Web Inspector: CSS Changes: only show changes for the given node

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

There should be a way to toggle between showing all changes for the entire page and only showing changes for the selected node.

[Radar WebKit Bug Importer]

<rdar://problem/48050206>

[Devin Rousso]

Created attachment 363480 [details]
Patch

[Matt Baker]

Comment on attachment 363480 [details]
Patch

Being able to toggle this is great, but I think it needs to be more discoverable. What about a filter button? You'd have to place it in the header for the first file with changes, since there isn't a DetailsSection header.

[Matt Baker]

Created attachment 363661 [details]
[Image] Changes filter button - mockup

[Matt Baker]

(In reply to Matt Baker from comment #4)
> Created attachment 363661 [details]
> [Image] Changes filter button - mockup

It's not ideal placing the filter in the file header, since it appears that it applies just to that file. Maybe there is another approach we could take.

[Timothy Hatcher]

Comment on attachment 363480 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=363480&action=review

> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:220
> +        generalSettingsView.addSetting(WI.UIString("CSS:"), WI.settings.cssChangesPerNode, WI.UIString("Show only for selected node"));

The user labels for this is not clear that this is about source changes.

[Devin Rousso]

Comment on attachment 363480 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=363480&action=review

>> Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js:220
>> +        generalSettingsView.addSetting(WI.UIString("CSS:"), WI.settings.cssChangesPerNode, WI.UIString("Show only for selected node"));
> 
> The user labels for this is not clear that this is about source changes.

🤦‍♂️ good point.  I'll make the label "CSS Changes" instead.

[Devin Rousso]

Created attachment 363760 [details]
Patch

[Devin Rousso]

(In reply to Matt Baker from comment #3)
> Being able to toggle this is great, but I think it needs to be more discoverable. What about a filter button? You'd have to place it in the header for the first file with changes, since there isn't a DetailsSection header.

(In reply to Matt Baker from comment #5)
> It's not ideal placing the filter in the file header, since it appears that it applies just to that file. Maybe there is another approach we could take.

For now, I'd like to get the basic functionality landed so I can actually make use of it.  I've filed <https://webkit.org/b/195365> as a followup to create UI within the Changes panel for this.

[Matt Baker]

(In reply to Devin Rousso from comment #9)
> (In reply to Matt Baker from comment #3)
> > Being able to toggle this is great, but I think it needs to be more discoverable. What about a filter button? You'd have to place it in the header for the first file with changes, since there isn't a DetailsSection header.
> 
> (In reply to Matt Baker from comment #5)
> > It's not ideal placing the filter in the file header, since it appears that it applies just to that file. Maybe there is another approach we could take.
> 
> For now, I'd like to get the basic functionality landed so I can actually
> make use of it.  I've filed <https://webkit.org/b/195365> as a followup to
> create UI within the Changes panel for this.

Sounds good. If we add an Export button we'll need a toolbar, so I'm sure there will be an opportunity to add a button for this somewhere.

[WebKit Commit Bot]

Comment on attachment 363760 [details]
Patch

Clearing flags on attachment: 363760

Committed r242556: <https://trac.webkit.org/changeset/242556>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.