Bug 181618 - Web Inspector: Styles Redesign: Long value causes bad wrapping
Summary: Web Inspector: Styles Redesign: Long value causes bad wrapping
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-01-12 15:44 PST by Joseph Pecoraro
Modified: 2018-01-17 16:37 PST (History)
5 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 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
Comment 1 Radar WebKit Bug Importer 2018-01-12 15:45:14 PST 
<rdar://problem/36485175>
Comment 2 Nikita Vasilyev 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
Comment 3 Nikita Vasilyev 2018-01-14 19:51:46 PST 
Created attachment 331320 [details]
[Animated GIF] With patch applied
Comment 4 Nikita Vasilyev 2018-01-15 16:12:08 PST 
Created attachment 331360 [details]
Patch
Comment 5 Joseph Pecoraro 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?
Comment 6 WebKit Commit Bot 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>
Comment 7 WebKit Commit Bot 2018-01-16 12:32:00 PST 
All reviewed patches have been landed.  Closing bug.
Comment 8 Nikita Vasilyev 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