Bug 212123 - Web Inspector: Computed: add "filter applied" icon
Summary: Web Inspector: Computed: add "filter applied" icon
Status: ASSIGNED
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: 2020-05-19 21:13 PDT by Nikita Vasilyev
Modified: 2020-06-11 17:55 PDT (History)
3 users (show)

See Also:


Attachments
[Image] Bug (136.12 KB, image/png)
2020-05-19 21:13 PDT, Nikita Vasilyev
no flags Details
[Image] Filtering in Mail (6.90 KB, image/png)
2020-06-11 12:06 PDT, Nikita Vasilyev
no flags Details
(...) icon (1.76 KB, patch)
2020-06-11 12:22 PDT, Nikita Vasilyev
nvasilyev: review-
nvasilyev: commit-queue-
Details | Formatted Diff | Diff
[Image] With (...) icon (41.42 KB, image/png)
2020-06-11 12:23 PDT, Nikita Vasilyev
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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).