Bug 181618

Summary:

Web Inspector: Styles Redesign: Long value causes bad wrapping

Product:

WebKit

Reporter:

Joseph Pecoraro <joepeck>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

commit-queue, inspector-bugzilla-changes, joepeck, nvasilyev, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
[IMAGE] Wrapping Issue	none
Patch	none
[Animated GIF] With patch applied	none
Patch	none

Joseph Pecoraro

Reported 2018-01-12 15:44:20 PST

Created attachment 331246 [details] [IMAGE] Wrapping Issue Styles Redesign: Long value causes bad wrapping See attached screenshot. Steps to Reproduce: 1. Inspect data:text/html,<p>test 2. Show the styles sidebar for the <p> 3. Start adding: "color: asdfasdfasdfasdfasdfasdfasdfasdf..." => Sidebar gots crazy

Attachments
[IMAGE] Wrapping Issue (94.88 KB, image/png) 2018-01-12 15:44 PST, Joseph Pecoraro	no flags	Details
Patch (1.27 KB, patch) 2018-01-14 19:51 PST, Nikita Vasilyev	no flags	Details Formatted Diff Diff
[Animated GIF] With patch applied (171.32 KB, image/gif) 2018-01-14 19:51 PST, Nikita Vasilyev	no flags	Details
Patch (1.34 KB, patch) 2018-01-15 16:12 PST, Nikita Vasilyev	no flags	Details Formatted Diff Diff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2018-01-12 15:45:14 PST

<rdar://problem/36485175>

Nikita Vasilyev

Comment 2 2018-01-14 19:51:15 PST

Created attachment 331319 [details] Patch HTML page for manual testing: http://nv.github.io/webkit-inspector-bugs/styles-redesign/tests/long-values.html

Nikita Vasilyev

Comment 3 2018-01-14 19:51:46 PST

Created attachment 331320 [details] [Animated GIF] With patch applied

Nikita Vasilyev

Comment 4 2018-01-15 16:12:08 PST

Created attachment 331360 [details] Patch

Joseph Pecoraro

Comment 5 2018-01-16 12:26:37 PST

Comment on attachment 331360 [details] Patch r=me A property name that is super long ends up wrapping when editing, but going off the screen when not editing. Do we have a good story for what to do with long property names? Truncate to some max?

WebKit Commit Bot

Comment 6 2018-01-16 12:31:58 PST

Comment on attachment 331360 [details] Patch Clearing flags on attachment: 331360 Committed r226995: <https://trac.webkit.org/changeset/226995>

WebKit Commit Bot

Comment 7 2018-01-16 12:32:00 PST

All reviewed patches have been landed. Closing bug.

Nikita Vasilyev

Comment 8 2018-01-17 16:37:10 PST

(In reply to Joseph Pecoraro from comment #5) > Comment on attachment 331360 [details] > Patch > > r=me > > A property name that is super long ends up wrapping when editing, but going > off the screen when not editing. Do we have a good story for what to do with > long property names? Truncate to some max? We truncate the middle part of values over 150 characters when not editing: token.value.trimMiddle(maxValueLength) It would be better to fit as many characters on a single line (or maybe two lines) without setting an arbitrary 150 character limit. This could be done in JS, but we'd need to truncate on sidebar resize. It would be nice to just use CSS for this, but it isn't supported. https://www.w3.org/wiki/Text-overflow_middle_cropping

Note You need to log in before you can comment on or make changes to this bug.