Bug 175430

Summary: Web Inspector: Remove text-shadow and gradient backgrounds
Product: WebKit Reporter: Matt Baker <mattbaker>
Component: Web InspectorAssignee: Matt Baker <mattbaker>
Severity: Normal CC: bburg, commit-queue, inspector-bugzilla-changes, nvasilyev, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 175450    
Description Flags
[Image] Autocomplete popover - before/after
[Image] Timelines call frames popover - before/after
[Image] Sidebar "No Filter Results" - before/after
Patch none

Description Matt Baker 2017-08-10 09:50:43 PDT
Remove text-shadow and gradient backgrounds. Web Inspector should be using a flat style throughout the UI.
Comment 1 Matt Baker 2017-08-10 14:20:31 PDT
Created attachment 317845 [details]
Comment 2 Matt Baker 2017-08-10 14:27:11 PDT
Created attachment 317846 [details]
[Image] Autocomplete popover - before/after
Comment 3 Matt Baker 2017-08-10 14:30:14 PDT
Created attachment 317849 [details]
[Image] Timelines call frames popover - before/after
Comment 4 Matt Baker 2017-08-10 14:32:38 PDT
Created attachment 317850 [details]
[Image] Sidebar "No Filter Results" - before/after
Comment 5 Matt Baker 2017-08-10 14:34:04 PDT
The selected item background in the call frames popover should be full bleed (go all the way to the edges of the popover, be clipped by rounded corners) but this will be done in a follow-up.
Comment 6 Matt Baker 2017-08-10 14:37:43 PDT
Created attachment 317851 [details]
Comment 7 Nikita Vasilyev 2017-08-10 17:06:41 PDT
Comment on attachment 317851 [details]

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

Looks good! One comment:

> Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:47
> -    font-size: 13px;
> +    font-size: var(--sidebar-panel-content-message-font-size);

Did you change the font size from 13px...

> Source/WebInspectorUI/UserInterface/Views/Variables.css:61
> +    --sidebar-panel-content-message-font-size: 16px;

to 16px?
Comment 8 Matt Baker 2017-08-10 17:26:49 PDT
I did. Our font was much smaller than the same UI in Xcode and Mail. 16px is still smaller, but matching the size exactly felt too big.
Comment 9 Nikita Vasilyev 2017-08-11 16:07:01 PDT
(In reply to Matt Baker from comment #8)
> I did. Our font was much smaller than the same UI in Xcode and Mail. 16px is
> still smaller, but matching the size exactly felt too big.

Does it affect anything other than "No Filter Results" message? If not, "--sidebar-panel-content-message-font-size" is too generic for a variable name.
Comment 10 Matt Baker 2017-08-11 18:06:14 PDT
Created attachment 317981 [details]
Comment 11 Nikita Vasilyev 2017-08-11 18:36:25 PDT
Looks good to me, but I'm not a reviewer.
Comment 12 BJ Burg 2017-08-14 10:27:17 PDT
Comment on attachment 317981 [details]


There are other similar things to clean up, such as the popover's outline / drop shadow.
Comment 13 WebKit Commit Bot 2017-08-14 10:57:03 PDT
Comment on attachment 317981 [details]

Clearing flags on attachment: 317981

Committed r220710: <http://trac.webkit.org/changeset/220710>
Comment 14 WebKit Commit Bot 2017-08-14 10:57:05 PDT
All reviewed patches have been landed.  Closing bug.
Comment 15 Radar WebKit Bug Importer 2017-08-14 10:58:20 PDT