RESOLVED FIXED 134846
Web Inspector: Modernize UI styles and better sync with platform styles
https://bugs.webkit.org/show_bug.cgi?id=134846
Summary Web Inspector: Modernize UI styles and better sync with platform styles
Jonathan Wells
Reported 2014-07-11 15:45:18 PDT
The web inspector styles should match the OS more closely.
Attachments
[PATCH] Styles update v1. (38.85 KB, patch)
2014-07-11 16:16 PDT, Jonathan Wells
no flags
[PATCH] Styles update v2. (54.48 KB, patch)
2014-07-15 13:45 PDT, Jonathan Wells
timothy: review+
[PATCH] Styles update v3, reviewed. (55.27 KB, patch)
2014-07-15 15:32 PDT, Jonathan Wells
no flags
[PATCH] Styles update v3, reviewed. (55.49 KB, patch)
2014-07-15 17:05 PDT, Jonathan Wells
no flags
[PATCH] Styles update v3, reviewed, shadow tweak. (55.60 KB, patch)
2014-07-15 19:00 PDT, Jonathan Wells
no flags
Radar WebKit Bug Importer
Comment 1 2014-07-11 15:45:57 PDT
Jonathan Wells
Comment 2 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.
Timothy Hatcher
Comment 3 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.
Jonathan Wells
Comment 4 2014-07-15 13:45:15 PDT
Created attachment 234947 [details] [PATCH] Styles update v2.
Timothy Hatcher
Comment 5 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
Jonathan Wells
Comment 6 2014-07-15 15:32:39 PDT
Created attachment 234959 [details] [PATCH] Styles update v3, reviewed.
Jonathan Wells
Comment 7 2014-07-15 17:05:06 PDT
Created attachment 234966 [details] [PATCH] Styles update v3, reviewed.
Jonathan Wells
Comment 8 2014-07-15 19:00:19 PDT
Created attachment 234971 [details] [PATCH] Styles update v3, reviewed, shadow tweak.
WebKit Commit Bot
Comment 9 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>
WebKit Commit Bot
Comment 10 2014-07-15 20:07:28 PDT
All reviewed patches have been landed. Closing bug.
Note You need to log in before you can comment on or make changes to this bug.