Bug 148104

Summary: Web Inspector: Consider showing style summary on collapsed visual sidebar sections
Product: WebKit Reporter: Timothy Hatcher <timothy>
Component: Web InspectorAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: bburg, commit-queue, graouts, hi, joepeck, mattbaker, nvasilyev, timothy, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Local Build   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 147563    
Attachments:
Description Flags
Screenshot
none
Patch
timothy: review+
Patch none

Timothy Hatcher
Reported 2015-08-17 16:44:56 PDT
Created attachment 259203 [details] Screenshot The sections of the visual sidebar might be more useful when collapsed if they had a summary best to the title. Like "➤ Shadow — None", "➤ Font — sans-serif 12px", etc. We could show these summaries in a lighter grey to deemphasize them a bit.
Attachments
Screenshot (39.63 KB, image/png)
2015-08-17 16:44 PDT, Timothy Hatcher
no flags
Patch (6.38 KB, patch)
2015-08-18 16:29 PDT, Devin Rousso
timothy: review+
Patch (4.68 KB, patch)
2015-08-18 17:26 PDT, Devin Rousso
no flags
Radar WebKit Bug Importer
Comment 1 2015-08-17 16:45:34 PDT
Devin Rousso
Comment 2 2015-08-17 21:02:27 PDT
I like this idea, but I'm not sure how it would interface with the modified section indicators (the little blue dot on the left and trash can on the right). I do, however, have two issues: 1. For some of the comma separated properties, displaying them could be tough if there are multiple values (box-shadows, transitions, etc). 2. The "Display" section, as an example, has a bunch of unrelated properties under the same group. For this section (and ones of a similar format), how would we distinguish between "display" and "visibility" and "opacity" without explicitly stating that each value belongs to "display"/"visibility"/"opacity"? Could we maybe do this as a tooltip (it would have multiple lines in situations 1 and 2)?
Timothy Hatcher
Comment 3 2015-08-17 22:51:05 PDT
Valid questions and dilemmas. Maybe what I am more expecting us to see a dot more often. Right now it is only there for when the user makes a change in that section. But really I am curious what sections have author properties active. The auto expanding helps here, but I've manually expanded sections I plan to use or look at often. I'd like to know at a glance if that section has non-computed values.
Devin Rousso
Comment 4 2015-08-18 16:29:48 PDT
Timothy Hatcher
Comment 5 2015-08-18 16:46:18 PDT
Comment on attachment 259313 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=259313&action=review > Source/WebInspectorUI/ChangeLog:22 > + Web Inspector: font-family list is backwards in visual sidebar Oops.
Timothy Hatcher
Comment 6 2015-08-18 16:46:54 PDT
Comment on attachment 259313 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=259313&action=review > Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:159 > + this._commaSeparatedKeywords.insertChild(valueElement, index + !this._insertNewItemsBeforeSelected); Remove from this patch.
Devin Rousso
Comment 7 2015-08-18 16:47:53 PDT
(In reply to comment #6) > > Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js:159 > > + this._commaSeparatedKeywords.insertChild(valueElement, index + !this._insertNewItemsBeforeSelected); > > Remove from this patch. Whoops. That was an accident.
Devin Rousso
Comment 8 2015-08-18 17:26:05 PDT
Created attachment 259327 [details] Patch Removed accidental changeling entry.
WebKit Commit Bot
Comment 9 2015-08-18 18:22:18 PDT
Comment on attachment 259327 [details] Patch Clearing flags on attachment: 259327 Committed r188617: <http://trac.webkit.org/changeset/188617>
WebKit Commit Bot
Comment 10 2015-08-18 18:22:22 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.