Web Inspector: Modernize UI styles and better sync with platform styles

• Component: Web Inspector
• Status: RESOLVED FIXED

[Jonathan Wells]

The web inspector styles should match the OS more closely.

[Radar WebKit Bug Importer]

<rdar://problem/17647568>

[Jonathan Wells]

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.

[Timothy Hatcher]

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.

[Jonathan Wells]

Created attachment 234947 [details]
[PATCH] Styles update v2.

[Timothy Hatcher]

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

[Jonathan Wells]

Created attachment 234959 [details]
[PATCH] Styles update v3, reviewed.

[Jonathan Wells]

Created attachment 234966 [details]
[PATCH] Styles update v3, reviewed.

[Jonathan Wells]

Created attachment 234971 [details]
[PATCH] Styles update v3, reviewed, shadow tweak.

[WebKit Commit Bot]

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>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.