Bug 212123

Summary: Web Inspector: Computed: add "filter applied" icon
Product: WebKit Reporter: Nikita Vasilyev <nvasilyev>
Component: Web InspectorAssignee: Nikita Vasilyev <nvasilyev>
Status: ASSIGNED ---    
Severity: Normal CC: hi, inspector-bugzilla-changes, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
[Image] Bug
none
[Image] Filtering in Mail
none
(...) icon
nvasilyev: review-, nvasilyev: commit-queue-
[Image] With (...) icon none

Description Nikita Vasilyev 2020-05-19 21:13:05 PDT
Created attachment 399806 [details]
[Image] Bug

We should add a (...) icon or re-use a gear icon.
Comment 1 Radar WebKit Bug Importer 2020-05-19 21:13:17 PDT
<rdar://problem/63429830>
Comment 2 Nikita Vasilyev 2020-06-11 12:06:00 PDT
Created attachment 401663 [details]
[Image] Filtering in Mail

After making the (...) icon and running with it, I realized that this isn't the best solution either.

What we do in Computed section is filtering so the icon is applicable. However, when one of the filters is applied the icon looks exactly the same. This is not how it works on macOS.

On the attached image you can see that when filtering is applied, we show "Filtered by: Unread" and the icon is distinctly different. We should do the same for Computed.
Comment 3 Nikita Vasilyev 2020-06-11 12:22:39 PDT
Created attachment 401665 [details]
(...) icon

Here's the unpursued patch. Posting here since I think the icon can be used elsewhere.
Comment 4 Nikita Vasilyev 2020-06-11 12:23:39 PDT
Created attachment 401666 [details]
[Image] With (...) icon
Comment 5 Devin Rousso 2020-06-11 17:55:28 PDT
We should just create an active (i.e. filled) filter icon.

In this case, I think it's accurate for it to use a filter icon as it fundamentally is controlling filters:
 - "Show All" filters based on whether the property is implicit
 - "Prefer Shorthands" filters out longhand properties and filters in shorthand properties

I think one difference in this case is that the default/initial state is an active filtered state (only showing non-implicit properties, "Show All" is disabled), so we should debate/decide whether the icon should start out active (i.e. filled) or inactive (i.e. hollow).