Bug 134846 - Web Inspector: Modernize UI styles and better sync with platform styles
Summary: Web Inspector: Modernize UI styles and better sync with platform styles
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Jonathan Wells
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2014-07-11 15:45 PDT by Jonathan Wells
Modified: 2014-07-15 20:07 PDT (History)
5 users (show)

See Also:


Attachments
[PATCH] Styles update v1. (38.85 KB, patch)
2014-07-11 16:16 PDT, Jonathan Wells
no flags Details | Formatted Diff | Diff
[PATCH] Styles update v2. (54.48 KB, patch)
2014-07-15 13:45 PDT, Jonathan Wells
timothy: review+
Details | Formatted Diff | Diff
[PATCH] Styles update v3, reviewed. (55.27 KB, patch)
2014-07-15 15:32 PDT, Jonathan Wells
no flags Details | Formatted Diff | Diff
[PATCH] Styles update v3, reviewed. (55.49 KB, patch)
2014-07-15 17:05 PDT, Jonathan Wells
no flags Details | Formatted Diff | Diff
[PATCH] Styles update v3, reviewed, shadow tweak. (55.60 KB, patch)
2014-07-15 19:00 PDT, Jonathan Wells
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Wells 2014-07-11 15:45:18 PDT
The web inspector styles should match the OS more closely.
Comment 1 Radar WebKit Bug Importer 2014-07-11 15:45:57 PDT
<rdar://problem/17647568>
Comment 2 Jonathan Wells 2014-07-11 16:16:06 PDT
Created attachment 234790 [details]
[PATCH] Styles update v1.

Initial tests in Mountain Lion and Mavericks look fine but going over them with a fine tooth comb. The buttons are not yet updated as I'm figuring out how to work with the caching. Will update shortly.
Comment 3 Timothy Hatcher 2014-07-11 20:05:07 PDT
Comment on attachment 234790 [details]
[PATCH] Styles update v1.

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

> Source/WebInspectorUI/ChangeLog:12
> +        * UserInterface/Images/BackArrowModern.svg: Added.

Not used.

> Source/WebInspectorUI/ChangeLog:14
> +        * UserInterface/Images/ForwardArrowModern.svg: Added.

Not used.

> Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js:52
> +        this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackArrowLight.svg", 9, 9);

The 9, 9 here needs updated. It needs to be 10, 16. We should also continue to use BackArrow.svg on older systems.

This will likely have cache issues since the image changed but the name didn't. We might want to change ImageUtilities.js to store the OS version in the SQL database (maybe as a modified imageVersion — like imageVersion = imageVersion + osVersion.)

> Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js:57
> +        this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), "Images/ForwardArrowLight.svg", 9, 9);

Ditto.

> Source/WebInspectorUI/UserInterface/Views/DataGrid.css:88
> +    /*background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(to bottom, transparent, transparent),
> +        linear-gradient(to bottom, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237));*/
> +
> +    /*background-size: 1px 11px, 0 0, 100% 100%;*/
> +    /*background-position: left 2px, right 2px, center;*/
> +    /*background-repeat: no-repeat;*/
>  
> -    box-shadow: inset rgba(255, 255, 255, 0.3) 0 -1px 0;
> +    /*box-shadow: inset rgba(255, 255, 255, 0.3) 0 -1px 0;*/
> +    border-top: 1px solid rgb(179, 179, 179);
>      border-bottom: 1px solid rgb(182, 182, 182);
> +    /*border-bottom: 1px solid rgb(182, 182, 182);*/

Remove commented lines.

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:124
> +/*.details-section.dom-node-properties {
> +    border-bottom: none;
> +}
> +
> +.details-section.dom-node-properties > .header {
> +    border-bottom: 1px solid rgb(153, 153, 153);
> +}
> +
> +body.mac-platform.mountain-lion .details-section.dom-node-properties > .header,
> +body.mac-platform.mavericks .details-section.dom-node-properties > .header {
> +    border-bottom: none;
> +}*/

Remove?

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:236
> +body.mac-platform.mountain-lion .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
> +body.mac-platform.mavericks .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
> +body.mac-platform.mountain-lion .details-section > .content > .group:last-child > .row:not(.simple):last-child,
> +body.mac-platform.mavericks .details-section > .content > .group:last-child > .row:not(.simple):last-child,
> +body.mac-platform.mountain-lion .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
> +body.mac-platform.mavericks .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
> +body.mac-platform.mountain-lion .details-section > .content > .group:last-child > .row.simple:last-child > *,
> +body.mac-platform.mavericks .details-section > .content > .group:last-child > .row.simple:last-child > * {

Maybe we should add a style class that is ".mountain-lion-or-mavericks" to make this and all the other selectors shorter.

> Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:489
> +    <None Include="..\UserInterface\Images\ForwardArrowLight.svg" />

Why no BackArrowLight.svg?

> Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:1299
> +    <None Include="..\UserInterface\Images\ForwardArrowLight.svg">

Ditto.
Comment 4 Jonathan Wells 2014-07-15 13:45:15 PDT
Created attachment 234947 [details]
[PATCH] Styles update v2.
Comment 5 Timothy Hatcher 2014-07-15 14:32:31 PDT
Comment on attachment 234947 [details]
[PATCH] Styles update v2.

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

> Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js:57
> +        }
> +        else {

One line.

> Source/WebInspectorUI/UserInterface/Views/DetailsSection.css:100
> +body.mac-platform.mavericks .details-section .details-section > .header,
> +body.mac-platform.mountain-lion .details-section .details-section > .header {

body.mac-platform.legacy
Comment 6 Jonathan Wells 2014-07-15 15:32:39 PDT
Created attachment 234959 [details]
[PATCH] Styles update v3, reviewed.
Comment 7 Jonathan Wells 2014-07-15 17:05:06 PDT
Created attachment 234966 [details]
[PATCH] Styles update v3, reviewed.
Comment 8 Jonathan Wells 2014-07-15 19:00:19 PDT
Created attachment 234971 [details]
[PATCH] Styles update v3, reviewed, shadow tweak.
Comment 9 WebKit Commit Bot 2014-07-15 20:07:25 PDT
Comment on attachment 234971 [details]
[PATCH] Styles update v3, reviewed, shadow tweak.

Clearing flags on attachment: 234971

Committed r171134: <http://trac.webkit.org/changeset/171134>
Comment 10 WebKit Commit Bot 2014-07-15 20:07:28 PDT
All reviewed patches have been landed.  Closing bug.