Web Inspector: Modernize UI styles and better sync with platform styles
authorjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 Jul 2014 03:07:03 +0000 (03:07 +0000)
committerjonowells@apple.com <jonowells@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 Jul 2014 03:07:03 +0000 (03:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134846

Reviewed by Timothy Hatcher.

Updated styles to better match the OS UI design. Updated the forward/back button.
Moved several rules to selectors that support older OS designs. Added global platform
data to support this patch.

* UserInterface/Images/BackArrow.svg: Added.
* UserInterface/Images/BackArrowLegacy.svg: Copied from Source/WebInspectorUI/UserInterface/Images/BackArrow.svg.
* UserInterface/Images/ForwardArrow.svg: Added.
* UserInterface/Images/ForwardArrowLegacy.svg: Copied from Source/WebInspectorUI/UserInterface/Images/ForwardArrow.svg.

* UserInterface/Base/ImageUtilities.js: Updated image version
(.generateImage.generateModernImage):
(.generateImage.generateLegacyImage):
(.generateImage):
Updated image generation to support modern look. Updated versioning scheme and version.

* UserInterface/Base/Main.js:
(WebInspector.loaded):
(WebInspector.contentLoaded.WebInspector.Platform.version.toString):
(WebInspector.contentLoaded.WebInspector.Platform.toString):
(WebInspector.contentLoaded):
Added global platform information.

* UserInterface/Views/ContentBrowser.js:
(WebInspector.ContentBrowser):
Updated back and forward buttons.

* UserInterface/Views/FindBanner.js:
(WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
Updated images for the find banner.

* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
* WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
Added new images.

* UserInterface/Views/ButtonToolbarItem.css:
(.toolbar .item.button > .label):
(body.mac-platform.legacy .toolbar .item.button > .label):
* UserInterface/Views/CSSStyleDeclarationSection.css:
(.style-declaration-section):
(body.mac-platform.legacy .style-declaration-section):
(body.mac-platform.legacy .style-declaration-section + .style-declaration-section):
(.style-declaration-section.last-in-group):
(body.mac-platform.legacy .style-declaration-section.last-in-group):
(.style-declaration-section.last-in-group + .style-declaration-section):
(body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section):
(body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section:last-child):
(.style-declaration-section + .style-declaration-section): Deleted.
(.style-declaration-section.last-in-group + .style-declaration-section:last-child): Deleted.
* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content > .pseudo-classes):
* UserInterface/Views/DOMTreeOutline.css:
(.dom-tree-outline li.hovered:not(.selected) .selection):
(body.mac-platform.legacy .dom-tree-outline li.hovered:not(.selected) .selection):
(.dom-tree-outline li.elements-drag-over .selection):
(body.mac-platform.legacy .dom-tree-outline li.elements-drag-over .selection):
(.dom-tree-outline:focus li.selected .selection):
(body.mac-platform.legacy .dom-tree-outline:focus li.selected .selection):
* UserInterface/Views/DashboardContainerView.css:
(.toolbar .dashboard-container):
(body.mac-platform.legacy .toolbar .dashboard-container):
(body.window-inactive .toolbar .dashboard-container):
(body.mac-platform.legacy.window-inactive .toolbar .dashboard-container):
(.toolbar .dashboard):
(body.window-inactive .toolbar .dashboard):
(body.mac-platform.legacy.window-inactive .toolbar .dashboard):
* UserInterface/Views/DataGrid.css:
(.data-grid th):
(body.mac-platform.legacy .data-grid th):
(.data-grid tr.selected):
(body.mac-platform.legacy .data-grid tr.selected):
(.data-grid:focus tr.selected):
(body.mac-platform.legacy .data-grid:focus tr.selected):
* UserInterface/Views/DetailsSection.css:
(.details-section):
(body.mac-platform.legacy .details-section):
(.details-section .details-section):
(body.mac-platform.legacy .details-section .details-section):
(.details-section .details-section:last-child):
(.details-section .details-section:first-child):
(.details-section > .header):
(body.mac-platform.legacy .details-section > .header):
(.details-section .details-section > .header):
(body.mac-platform.mountain-lion .details-section .details-section > .header):
(.details-section .details-section.collaspsed > .header):
(.details-section.computed-style-properties:not(.collapsed) > .header):
(body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header):
(.details-section > .content > .group):
(body.mac-platform.legacy .details-section > .content > .group):
(.details-section > .content > .group:last-child):
(.details-section > .content > .group:nth-child(even)):
(body.mac-platform.legacy .details-section > .content > .group:nth-child(even)):
(body.mac-platform.legacy .details-section > .content > .group:last-child > .row.simple:last-child > *):
(.details-section > .content > .group:last-child > .row.simple:last-child > *): Deleted.
* UserInterface/Views/FilterBar.css:
(.filter-bar > input[type="search"]):
(body.mac-platform.legacy .filter-bar > input[type="search"]):
* UserInterface/Views/NavigationSidebarPanel.css:
(.navigation-sidebar-panel-content-tree-outline .item.selected):
(body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline .item.selected):
(.navigation-sidebar-panel-content-tree-outline:focus .item.selected):
(body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline:focus .item.selected):
(body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected):
(body.mac-platform.legacy.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected):
* UserInterface/Views/RadioButtonNavigationItem.css:
(.navigation-bar .item.radio.button.text-only.selected):
(body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected):
* UserInterface/Views/RulesStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style .rules .label + .style-declaration-section):
(body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .label + .style-declaration-section):
(.sidebar > .panel.details.css-style .rules .new-rule):
(body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule):
(.sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section):
(body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section):
* UserInterface/Views/ScopeBar.css:
(.scope-bar > li):
(body.mac-platform.legacy .scope-bar > li):
(.scope-bar > li.selected):
(body.mac-platform.legacy .scope-bar > li.selected):
* UserInterface/Views/SearchBar.css:
(.search-bar > input[type="search"]):
(body.mac-platform.legacy .search-bar > input[type="search"]):
* UserInterface/Views/Sidebar.css:
(.sidebar):
(body.mac-platform.legacy .sidebar):
(body.mac-platform.legacy.window-inactive .sidebar):
(body.mac-platform.legacy .sidebar.right):
(body.window-inactive .sidebar): Deleted.
(.sidebar.right): Deleted.
* UserInterface/Views/TimelineSidebarPanel.css:
(.sidebar > .panel.navigation.timeline > .title-bar):
(body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar):
Style updates for new look and feel.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@171134 268f45cc-cd09-0410-ab3c-d52691b4dbfc

27 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js
Source/WebInspectorUI/UserInterface/Base/Main.js
Source/WebInspectorUI/UserInterface/Images/BackArrow.svg
Source/WebInspectorUI/UserInterface/Images/BackArrowLegacy.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/ForwardArrow.svg
Source/WebInspectorUI/UserInterface/Images/ForwardArrowLegacy.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css
Source/WebInspectorUI/UserInterface/Views/DataGrid.css
Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
Source/WebInspectorUI/UserInterface/Views/FilterBar.css
Source/WebInspectorUI/UserInterface/Views/FindBanner.js
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
Source/WebInspectorUI/UserInterface/Views/SearchBar.css
Source/WebInspectorUI/UserInterface/Views/Sidebar.css
Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Toolbar.css
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj
Source/WebInspectorUI/WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters

index b4f9c75..9638f83 100644 (file)
@@ -1,3 +1,143 @@
+2014-07-15  Jonathan Wells  <jonowells@apple.com>
+
+        Web Inspector: Modernize UI styles and better sync with platform styles
+        https://bugs.webkit.org/show_bug.cgi?id=134846
+
+        Reviewed by Timothy Hatcher.
+
+        Updated styles to better match the OS UI design. Updated the forward/back button. 
+        Moved several rules to selectors that support older OS designs. Added global platform
+        data to support this patch.
+
+        * UserInterface/Images/BackArrow.svg: Added.
+        * UserInterface/Images/BackArrowLegacy.svg: Copied from Source/WebInspectorUI/UserInterface/Images/BackArrow.svg.
+        * UserInterface/Images/ForwardArrow.svg: Added.
+        * UserInterface/Images/ForwardArrowLegacy.svg: Copied from Source/WebInspectorUI/UserInterface/Images/ForwardArrow.svg.
+
+        * UserInterface/Base/ImageUtilities.js: Updated image version
+        (.generateImage.generateModernImage):
+        (.generateImage.generateLegacyImage):
+        (.generateImage):
+        Updated image generation to support modern look. Updated versioning scheme and version.
+
+        * UserInterface/Base/Main.js:
+        (WebInspector.loaded):
+        (WebInspector.contentLoaded.WebInspector.Platform.version.toString):
+        (WebInspector.contentLoaded.WebInspector.Platform.toString):
+        (WebInspector.contentLoaded):
+        Added global platform information.
+
+        * UserInterface/Views/ContentBrowser.js:
+        (WebInspector.ContentBrowser):
+        Updated back and forward buttons.
+
+        * UserInterface/Views/FindBanner.js:
+        (WebInspector.FindBanner.prototype._generateButtonsGlyphsIfNeeded):
+        Updated images for the find banner.
+
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj:
+        * WebInspectorUI.vcxproj/WebInspectorUI.vcxproj.filters:
+        Added new images.
+
+        * UserInterface/Views/ButtonToolbarItem.css:
+        (.toolbar .item.button > .label):
+        (body.mac-platform.legacy .toolbar .item.button > .label):
+        * UserInterface/Views/CSSStyleDeclarationSection.css:
+        (.style-declaration-section):
+        (body.mac-platform.legacy .style-declaration-section):
+        (body.mac-platform.legacy .style-declaration-section + .style-declaration-section):
+        (.style-declaration-section.last-in-group):
+        (body.mac-platform.legacy .style-declaration-section.last-in-group):
+        (.style-declaration-section.last-in-group + .style-declaration-section):
+        (body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section):
+        (body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section:last-child):
+        (.style-declaration-section + .style-declaration-section): Deleted.
+        (.style-declaration-section.last-in-group + .style-declaration-section:last-child): Deleted.
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes):
+        * UserInterface/Views/DOMTreeOutline.css:
+        (.dom-tree-outline li.hovered:not(.selected) .selection):
+        (body.mac-platform.legacy .dom-tree-outline li.hovered:not(.selected) .selection):
+        (.dom-tree-outline li.elements-drag-over .selection):
+        (body.mac-platform.legacy .dom-tree-outline li.elements-drag-over .selection):
+        (.dom-tree-outline:focus li.selected .selection):
+        (body.mac-platform.legacy .dom-tree-outline:focus li.selected .selection):
+        * UserInterface/Views/DashboardContainerView.css:
+        (.toolbar .dashboard-container):
+        (body.mac-platform.legacy .toolbar .dashboard-container):
+        (body.window-inactive .toolbar .dashboard-container):
+        (body.mac-platform.legacy.window-inactive .toolbar .dashboard-container):
+        (.toolbar .dashboard):
+        (body.window-inactive .toolbar .dashboard):
+        (body.mac-platform.legacy.window-inactive .toolbar .dashboard):
+        * UserInterface/Views/DataGrid.css:
+        (.data-grid th):
+        (body.mac-platform.legacy .data-grid th):
+        (.data-grid tr.selected):
+        (body.mac-platform.legacy .data-grid tr.selected):
+        (.data-grid:focus tr.selected):
+        (body.mac-platform.legacy .data-grid:focus tr.selected):
+        * UserInterface/Views/DetailsSection.css:
+        (.details-section):
+        (body.mac-platform.legacy .details-section):
+        (.details-section .details-section):
+        (body.mac-platform.legacy .details-section .details-section):
+        (.details-section .details-section:last-child):
+        (.details-section .details-section:first-child):
+        (.details-section > .header):
+        (body.mac-platform.legacy .details-section > .header):
+        (.details-section .details-section > .header):
+        (body.mac-platform.mountain-lion .details-section .details-section > .header):
+        (.details-section .details-section.collaspsed > .header):
+        (.details-section.computed-style-properties:not(.collapsed) > .header):
+        (body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header):
+        (.details-section > .content > .group):
+        (body.mac-platform.legacy .details-section > .content > .group):
+        (.details-section > .content > .group:last-child):
+        (.details-section > .content > .group:nth-child(even)):
+        (body.mac-platform.legacy .details-section > .content > .group:nth-child(even)):
+        (body.mac-platform.legacy .details-section > .content > .group:last-child > .row.simple:last-child > *):
+        (.details-section > .content > .group:last-child > .row.simple:last-child > *): Deleted.
+        * UserInterface/Views/FilterBar.css:
+        (.filter-bar > input[type="search"]):
+        (body.mac-platform.legacy .filter-bar > input[type="search"]):
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.navigation-sidebar-panel-content-tree-outline .item.selected):
+        (body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline .item.selected):
+        (.navigation-sidebar-panel-content-tree-outline:focus .item.selected):
+        (body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline:focus .item.selected):
+        (body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected):
+        (body.mac-platform.legacy.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected):
+        * UserInterface/Views/RadioButtonNavigationItem.css:
+        (.navigation-bar .item.radio.button.text-only.selected):
+        (body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected):
+        * UserInterface/Views/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style .rules .label + .style-declaration-section):
+        (body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .label + .style-declaration-section):
+        (.sidebar > .panel.details.css-style .rules .new-rule):
+        (body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule):
+        (.sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section):
+        (body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section):
+        * UserInterface/Views/ScopeBar.css:
+        (.scope-bar > li):
+        (body.mac-platform.legacy .scope-bar > li):
+        (.scope-bar > li.selected):
+        (body.mac-platform.legacy .scope-bar > li.selected):
+        * UserInterface/Views/SearchBar.css:
+        (.search-bar > input[type="search"]):
+        (body.mac-platform.legacy .search-bar > input[type="search"]):
+        * UserInterface/Views/Sidebar.css:
+        (.sidebar):
+        (body.mac-platform.legacy .sidebar):
+        (body.mac-platform.legacy.window-inactive .sidebar):
+        (body.mac-platform.legacy .sidebar.right):
+        (body.window-inactive .sidebar): Deleted.
+        (.sidebar.right): Deleted.
+        * UserInterface/Views/TimelineSidebarPanel.css:
+        (.sidebar > .panel.navigation.timeline > .title-bar):
+        (body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar):
+        Style updates for new look and feel.
+
 2014-07-11  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Debugger Pause button does not work
index 42dbc6e..9ee0853 100644 (file)
@@ -393,8 +393,9 @@ function generateEmbossedImages(src, width, height, states, canvasIdentifierCall
     var scaledWidth = width * scaleFactor;
     var scaledHeight = height * scaleFactor;
 
-    // Bump this version when making changes that affect the result image.
-    const imageVersion = 2;
+    // Bump the base version when making changes that affect the result image.
+    const baseImageVersion = 3;
+    const imageVersion = baseImageVersion + 0.01 * WebInspector.Platform.version.base + 0.0001 * WebInspector.Platform.version.release;
 
     const storageKeyPrefix = "generated-embossed-image-";
 
@@ -487,103 +488,148 @@ function generateEmbossedImages(src, width, height, states, canvasIdentifierCall
 
     function generateImage(state)
     {
-        const depth = 1 * scaleFactor;
-        const shadowDepth = depth;
-        const shadowBlur = depth - 1;
-        const glowBlur = 2;
+        function generateModernImage()
+        {
+            const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
+            context.save();
+            context.scale(scaleFactor, scaleFactor);
+
+            context.clearRect(0, 0, width, height);
+
+            var gradient = context.createLinearGradient(0, 0, 0, height);
+            if (state === states.Active) {
+                gradient.addColorStop(0, "rgb(65, 65, 65)");
+                gradient.addColorStop(1, "rgb(70, 70, 70)");
+            } else if (state === states.Focus) {
+                gradient.addColorStop(0, "rgb(0, 123, 247)");
+                gradient.addColorStop(1, "rgb(0, 128, 252)");
+            } else if (state === states.ActiveFocus) {
+                gradient.addColorStop(0, "rgb(0, 62, 210)");
+                gradient.addColorStop(1, "rgb(0, 67, 215)");
+            } else {
+                gradient.addColorStop(0, "rgb(75, 75, 75)");
+                gradient.addColorStop(1, "rgb(80, 80, 80)");
+            }
 
-        const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
-        context.save();
-        context.scale(scaleFactor, scaleFactor);
+            context.fillStyle = gradient;
+            context.fillRect(0, 0, width, height);
 
-        context.clearRect(0, 0, width, height);
-
-        if (depth > 0) {
-            // Use scratch canvas so we can apply the draw the white drop shadow
-            // to the whole glyph at the end.
-
-            var scratchCanvas = document.createElement("canvas");
-            scratchCanvas.width = scaledWidth;
-            scratchCanvas.height = scaledHeight;
-
-            var scratchContext = scratchCanvas.getContext("2d");
-            scratchContext.scale(scaleFactor, scaleFactor);
-        } else
-            var scratchContext = context;
-
-        var gradient = scratchContext.createLinearGradient(0, 0, 0, height);
-        if (state === states.Active) {
-            gradient.addColorStop(0, "rgb(60, 60, 60)");
-            gradient.addColorStop(1, "rgb(100, 100, 100)");
-        } else if (state === states.Focus) {
-            gradient.addColorStop(0, "rgb(50, 135, 200)");
-            gradient.addColorStop(1, "rgb(60, 155, 225)");
-        } else if (state === states.ActiveFocus) {
-            gradient.addColorStop(0, "rgb(30, 115, 185)");
-            gradient.addColorStop(1, "rgb(40, 135, 200)");
-        } else {
-            gradient.addColorStop(0, "rgb(90, 90, 90)");
-            gradient.addColorStop(1, "rgb(145, 145, 145)");
+            // Apply the mask to keep just the inner shape of the glyph.
+            _applyImageMask(context, image);
+
+            if (!ignoreCache) {
+                const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
+                saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion);
+            }
+
+            context.restore();
         }
 
-        scratchContext.fillStyle = gradient;
-        scratchContext.fillRect(0, 0, width, height);
-
-        if (depth > 0) {
-            // Invert the image to use as a reverse image mask for the inner shadows.
-            // Pass in the color to use for the opaque areas to prevent "black halos"
-            // later when applying the final image mask.
-
-            if (state === states.Active)
-                var invertedImage = _invertMaskImage(image, 60, 60, 60);
-            else if (state === states.Focus)
-                var invertedImage = _invertMaskImage(image, 45, 145, 210);
-            else if (state === states.ActiveFocus)
-                var invertedImage = _invertMaskImage(image, 35, 125, 195);
-            else
-                var invertedImage = _invertMaskImage(image, 90, 90, 90);
-
-            if (state === states.Focus) {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
-
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 80, 170)", invertedImage);
-            } else if (state === states.ActiveFocus) {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
+        function generateLegacyImage()
+        {
+            const depth = 1 * scaleFactor;
+            const shadowDepth = depth;
+            const shadowBlur = depth - 1;
+            const glowBlur = 2;
+
+            const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
+            context.save();
+            context.scale(scaleFactor, scaleFactor);
 
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 65, 150)", invertedImage);
+            context.clearRect(0, 0, width, height);
+
+            if (depth > 0) {
+                // Use scratch canvas so we can apply the draw the white drop shadow
+                // to the whole glyph at the end.
+
+                var scratchCanvas = document.createElement("canvas");
+                scratchCanvas.width = scaledWidth;
+                scratchCanvas.height = scaledHeight;
+
+                var scratchContext = scratchCanvas.getContext("2d");
+                scratchContext.scale(scaleFactor, scaleFactor);
+            } else
+                var scratchContext = context;
+
+            var gradient = scratchContext.createLinearGradient(0, 0, 0, height);
+            if (state === states.Active) {
+                gradient.addColorStop(0, "rgb(60, 60, 60)");
+                gradient.addColorStop(1, "rgb(100, 100, 100)");
+            } else if (state === states.Focus) {
+                gradient.addColorStop(0, "rgb(50, 135, 200)");
+                gradient.addColorStop(1, "rgb(60, 155, 225)");
+            } else if (state === states.ActiveFocus) {
+                gradient.addColorStop(0, "rgb(30, 115, 185)");
+                gradient.addColorStop(1, "rgb(40, 135, 200)");
             } else {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
+                gradient.addColorStop(0, "rgb(90, 90, 90)");
+                gradient.addColorStop(1, "rgb(145, 145, 145)");
+            }
 
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgba(0, 0, 0, 0.6)", invertedImage);
+            scratchContext.fillStyle = gradient;
+            scratchContext.fillRect(0, 0, width, height);
+
+            if (depth > 0) {
+                // Invert the image to use as a reverse image mask for the inner shadows.
+                // Pass in the color to use for the opaque areas to prevent "black halos"
+                // later when applying the final image mask.
+
+                if (state === states.Active)
+                    var invertedImage = _invertMaskImage(image, 60, 60, 60);
+                else if (state === states.Focus)
+                    var invertedImage = _invertMaskImage(image, 45, 145, 210);
+                else if (state === states.ActiveFocus)
+                    var invertedImage = _invertMaskImage(image, 35, 125, 195);
+                else
+                    var invertedImage = _invertMaskImage(image, 90, 90, 90);
+
+                if (state === states.Focus) {
+                    // Double draw the blurry inner shadow to get the right effect.
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
+
+                    // Draw the inner shadow.
+                    _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 80, 170)", invertedImage);
+                } else if (state === states.ActiveFocus) {
+                    // Double draw the blurry inner shadow to get the right effect.
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
+
+                    // Draw the inner shadow.
+                    _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 65, 150)", invertedImage);
+                } else {
+                    // Double draw the blurry inner shadow to get the right effect.
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
+                    _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
+
+                    // Draw the inner shadow.
+                    _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgba(0, 0, 0, 0.6)", invertedImage);
+                }
             }
-        }
 
-        // Apply the mask to keep just the inner shape of the glyph.
-        _applyImageMask(scratchContext, image);
+            // Apply the mask to keep just the inner shape of the glyph.
+            _applyImageMask(scratchContext, image);
+
+            // Draw the white drop shadow.
+            if (depth > 0)
+                _drawImageShadow(context, 0, shadowDepth, shadowBlur, "rgba(255, 255, 255, 0.6)", scratchCanvas);
 
-        // Draw the white drop shadow.
-        if (depth > 0)
-            _drawImageShadow(context, 0, shadowDepth, shadowBlur, "rgba(255, 255, 255, 0.6)", scratchCanvas);
+            // Draw a subtle glow for the focus states.
+            if (state === states.Focus || state === states.ActiveFocus)
+                _drawImageShadow(context, 0, 0, glowBlur, "rgba(20, 100, 220, 0.4)", scratchCanvas);
 
-        // Draw a subtle glow for the focus states.
-        if (state === states.Focus || state === states.ActiveFocus)
-            _drawImageShadow(context, 0, 0, glowBlur, "rgba(20, 100, 220, 0.4)", scratchCanvas);
+            if (!ignoreCache) {
+                const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
+                saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion);
+            }
 
-        if (!ignoreCache) {
-            const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
-            saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion);
+            context.restore();
         }
 
-        context.restore();
+        if (WebInspector.Platform.name === "mac" && WebInspector.Platform.version.base === 10 && WebInspector.Platform.version.release < 10)
+            generateLegacyImage();
+        else
+            generateModernImage();
     }
 
     function _drawImageShadow(context, xOffset, yOffset, blur, color, image) {
@@ -653,7 +699,6 @@ function generateEmbossedImages(src, width, height, states, canvasIdentifierCall
     }
 }
 
-
 var svgImageCache = {};
 
 function loadSVGImageDocumentElement(url, callback)
index a4a6cce..05740bb 100644 (file)
@@ -167,7 +167,7 @@ WebInspector.loaded = function()
     };
 
     this._windowKeydownListeners = [];
-}
+};
 
 WebInspector.contentLoaded = function()
 {
@@ -193,16 +193,50 @@ WebInspector.contentLoaded = function()
         document.body.classList.add("nightly-build");
 
     // Add platform style classes so the UI can be tweaked per-platform.
-    document.body.classList.add(InspectorFrontendHost.platform() + "-platform");
-
-    if (InspectorFrontendHost.platform() === "mac") {
-        var versionMatch = / Mac OS X (\d+)_(\d+)/.exec(navigator.appVersion);
-        if (versionMatch && versionMatch[1] == 10 && versionMatch[2] == 8)
-            document.body.classList.add("mountain-lion");
-        else if (versionMatch && versionMatch[1] == 10 && versionMatch[2] == 9)
-            document.body.classList.add("mavericks");
+    WebInspector.Platform = {
+        name: InspectorFrontendHost.platform(),
+        codeName: "",
+        version: {
+            base: 0,
+            release: 0,
+            toString: function()
+            {
+                return this.base + "." + this.version;
+            }
+        },
+        toString: function()
+        {
+            return this.name;
+        }
+    };
+
+    var isLegacyMacOS = false;
+    var osVersionMatch = / Mac OS X (\d+)_(\d+)/.exec(navigator.appVersion);
+    if (osVersionMatch && osVersionMatch[1] === "10") {
+        WebInspector.Platform.version.base = 10;
+        switch(osVersionMatch[2]) {
+            case "10":
+                WebInspector.Platform.codeName = "yosemite";
+                WebInspector.Platform.version.release = 10;
+                break;
+            case "9":
+                WebInspector.Platform.codeName = "mavericks";
+                WebInspector.Platform.version.release = 9;
+                isLegacyMacOS = true;
+                break;
+            case "8":
+                WebInspector.Platform.codeName = "mountain-lion";
+                WebInspector.Platform.version.release = 8;
+                isLegacyMacOS = true;
+        }
     }
 
+    document.body.classList.add(WebInspector.Platform + "-platform");
+    if (WebInspector.Platform.codeName)
+        document.body.classList.add(WebInspector.Platform.codeName);
+    if (isLegacyMacOS)
+        document.body.classList.add("legacy");
+
     this.debuggableType = InspectorFrontendHost.debuggableType() === "web" ? WebInspector.DebuggableType.Web : WebInspector.DebuggableType.JavaScript;
     document.body.classList.add(this.debuggableType);
 
index e1f590e..180531e 100644 (file)
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
-    <path d="M 9 0 L 0.484375 4.484375 L 9 9 Z"/>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16">
+    <path d="M 3.20540064 7.75983283 L 9.3448 1.6244 L 7.7388 0.0174 L -0.0002 7.7514 L 0.0091993759 7.76080523 L 0.0018 7.7682 L 7.7358 15.5072 L 9.3428 13.9012 L 3.20540064 7.75983283 Z"></path>
 </svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/BackArrowLegacy.svg b/Source/WebInspectorUI/UserInterface/Images/BackArrowLegacy.svg
new file mode 100644 (file)
index 0000000..e1f590e
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+    <path d="M 9 0 L 0.484375 4.484375 L 9 9 Z"/>
+</svg>
index c16bc65..68b8f15 100644 (file)
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
-    <path d="M 0 0 L 8.515625 4.484375 L 0 9 Z"/>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16">
+    <path d="M 6.13924933 7.75978283 L 0.0018 13.9012 L 1.6088 15.5072 L 9.3428 7.7682 L 9.33545066 7.76085523 L 9.3449 7.7514 L 1.6059 0.0174 L -0.0001 1.6244 L 6.13924933 7.75978283 Z"></path>
 </svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ForwardArrowLegacy.svg b/Source/WebInspectorUI/UserInterface/Images/ForwardArrowLegacy.svg
new file mode 100644 (file)
index 0000000..c16bc65
--- /dev/null
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+    <path d="M 0 0 L 8.515625 4.484375 L 0 9 Z"/>
+</svg>
index d62a189..cddeeb3 100644 (file)
 
 .toolbar .item.button > .label {
     text-align: center;
+    color: rgb(80, 80, 80);
+}
+
+body.mac-platform.legacy .toolbar .item.button > .label {
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     color: rgb(60, 60, 60);
 }
index 5b36fb3..482e78c 100644 (file)
     padding: 5px;
 
     background-color: white;
+    border-bottom: 1px solid rgb(210, 210, 210);
 }
 
-.style-declaration-section + .style-declaration-section {
+body.mac-platform.legacy .style-declaration-section {
+    border-bottom: none;
+}
+
+body.mac-platform.legacy .style-declaration-section + .style-declaration-section {
     border-top: 1px solid rgb(210, 210, 210);
 }
 
 .style-declaration-section.last-in-group {
     margin-bottom: 15px;
 
+    border-bottom: 1px solid rgb(210, 210, 210);
+}
+
+body.mac-platform.legacy .style-declaration-section.last-in-group {
     box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 0;
 }
 
 .style-declaration-section.last-in-group + .style-declaration-section {
     margin-top: 15px;
 
-    border-top: none;
+    border-top: 1px solid rgb(210, 210, 210);
+}
 
+body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section {
     box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px 0;
+    border-top: none;
 }
 
-.style-declaration-section:first-child,
-div:not(.style-declaration-section) + .style-declaration-section,
-.style-declaration-section.last-in-group + .style-declaration-section.last-in-group,
-.style-declaration-section.last-in-group + .style-declaration-section:last-child {
+body.mac-platform.legacy .style-declaration-section:first-child,
+body.mac-platform.legacy div:not(.style-declaration-section) + .style-declaration-section,
+body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section.last-in-group,
+body.mac-platform.legacy .style-declaration-section.last-in-group + .style-declaration-section:last-child {
     box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 1px;
 }
 
index 9df882b..76df3a3 100644 (file)
@@ -43,6 +43,7 @@
 
 .sidebar > .panel.details.css-style > .content > .pseudo-classes {
     padding: 10px;
+    border-bottom: 1px solid rgb(153, 153, 153);
 
     display: -webkit-flex;
     -webkit-flex-flow: row wrap;
index 7f587a1..8b15efe 100644 (file)
@@ -49,12 +49,22 @@ WebInspector.ContentBrowser = function(element, delegate, disableBackForward)
         this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this));
         this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this));
 
-        this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackArrow.svg", 9, 9);
+        var forwardArrow, backArrow;
+        if (WebInspector.Platform.name === "mac" && WebInspector.Platform.version.release < 10) {
+            forwardArrow = {src: "Images/ForwardArrowLegacy.svg", width: 9, height: 9};
+            backArrow = {src: "Images/BackArrowLegacy.svg", width: 9, height: 9};
+        }
+        else {
+            forwardArrow = {src: "Images/ForwardArrow.svg", width: 10, height: 16};
+            backArrow = {src: "Images/BackArrow.svg", width: 10, height: 16};
+        }
+
+        this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), backArrow.src, backArrow.width, backArrow.height);
         this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);
         this._backButtonNavigationItem.enabled = false;
         this._navigationBar.addNavigationItem(this._backButtonNavigationItem);
 
-        this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), "Images/ForwardArrow.svg", 9, 9);
+        this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), forwardArrow.src, forwardArrow.width, forwardArrow.height);
         this._forwardButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._forwardButtonClicked, this);
         this._forwardButtonNavigationItem.enabled = false;
         this._navigationBar.addNavigationItem(this._forwardButtonNavigationItem);
index 3194b59..c4c1d92 100644 (file)
     left: 3px;
     right: 3px;
 
-    background-color: rgba(56, 121, 217, 0.1);
+    background-color: rgba(0, 128, 252, 0.1);
     border-radius: 5px;
 }
 
+body.mac-platform.legacy .dom-tree-outline li.hovered:not(.selected) .selection {
+    background-color: rgba(56, 121, 217, 0.1);
+}
+
 .dom-tree-outline li .selection {
     display: none;
     position: absolute;
 .dom-tree-outline li.elements-drag-over .selection {
     display: block;
     margin-top: -2px;
+    border-top: 2px solid rgb(0, 128, 252);
+}
+
+body.mac-platform.legacy .dom-tree-outline li.elements-drag-over .selection {
     border-top: 2px solid rgb(56, 121, 217);
 }
 
 .dom-tree-outline:focus li.selected .selection {
+    background-color: rgb(0, 128, 252);
+}
+
+body.mac-platform.legacy .dom-tree-outline:focus li.selected .selection {
     background-color: rgb(56, 121, 217);
 }
 
index 26986da..30459f6 100644 (file)
 
     width: 375px;
 
-    border: 1px solid rgb(163, 163, 163);
     border-radius: 4px;
+    background-color: rgb(252, 252, 252);
 
-    box-shadow: rgba(255, 255, 255, 0.45) 0 1px 0;
+    box-shadow: rgba(0, 0, 0, 0.15) 0 1px 0, inset white 0 1px 0;
 
     margin: 4px 10px;
     overflow: hidden;
 }
 
+body.mac-platform.legacy .toolbar .dashboard-container {
+    border: 1px solid rgb(163, 163, 163);
+    background-color: transparent;
+    box-shadow: rgba(255, 255, 255, 0.45) 0 0px 0;
+}
+
 body.window-inactive .toolbar .dashboard-container {
-    border-color: rgb(196, 196, 196);
+    border: 1px solid rgb(220, 220, 220);
+    background-color: rgb(246, 246, 246);
+    box-shadow: none;
+}
+
+body.mac-platform.legacy.window-inactive .toolbar .dashboard-container {
+    border: 1px solid rgb(196, 196, 196);
     background-image: none;
     background-color: rgb(239, 239, 239);
+    box-shadow: rgba(255, 255, 255, 0.45) 0 1px 0;
 }
 
 .toolbar.collapsed .dashboard-container {
@@ -78,16 +91,29 @@ body.window-inactive .toolbar .dashboard-container {
     left: 0;
     right: 0;
 
+    padding: 0 5px;
+
+    background-color: rgb(252, 252, 252);
+    box-shadow: inset white 0 1px 0;
+
+    -webkit-animation-duration: 0.4s;
+}
+
+body.window-inactive .toolbar .dashboard {
+    background-color: rgb(246, 246, 246);
+    box-shadow: none;
+}
+
+body.mac-platform.legacy .toolbar .dashboard,
+body.mac-platform.legacy.window-inactive .toolbar .dashboard {
     background-image: linear-gradient(to bottom, rgba(0, 128, 255, 0), rgba(0, 128, 255, 0.075)),
         linear-gradient(to right, rgba(0, 0, 0, 0.09), transparent, rgba(0, 0, 0, 0.09)),
         linear-gradient(to bottom, rgb(240, 244, 251), rgb(250, 253, 255));
     background-size: 100% 6px, auto, auto;
     background-position: bottom, center, center;
     background-repeat: no-repeat;
-
-    padding: 0 5px;
-
-    -webkit-animation-duration: 0.4s;
+    background-color: transparent;
+    box-shadow: none;
 }
 
 .toolbar .dashboard.visible {
index 39577c4..9ac3dd6 100644 (file)
     text-align: left;
     vertical-align: middle;
 
+    border-top: 1px solid rgb(179, 179, 179);
+    border-bottom: 1px solid rgb(182, 182, 182);
+
+    height: 15px;
+    font-weight: normal;
+    padding: 0 4px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+body.mac-platform.legacy .data-grid th {
     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;
     border-bottom: 1px solid rgb(182, 182, 182);
-
-    height: 15px;
-    font-weight: normal;
-    padding: 0 4px;
-    white-space: nowrap;
-    overflow: hidden;
 }
 
 .data-grid th:first-child {
@@ -313,15 +319,23 @@ body.window-inactive .data-grid th.sort-descending {
 }
 
 .data-grid tr.selected {
-    background-color: rgb(212, 212, 212) !important;
+    background-color: rgb(185, 184, 185) !important;
     color: inherit !important;
 }
 
+body.mac-platform.legacy .data-grid tr.selected {
+    background-color: rgb(212, 212, 212) !important;
+}
+
 .data-grid:focus tr.selected {
-    background-color: rgb(56, 121, 217) !important;
+    background-color: rgb(0, 128, 252) !important;
     color: white !important;
 }
 
+body.mac-platform.legacy .data-grid:focus tr.selected {
+    background-color: rgb(56, 121, 217) !important;
+}
+
 .data-grid tr:not(.parent) td.disclosure {
     text-indent: 10px;
 }
index 23c6005..9c91fd1 100644 (file)
  */
 
 .details-section {
+    font-size: 10px;
+    background-color: rgb(242, 242, 242);
+    border-bottom: 1px solid rgb(153, 153, 153);
+}
+
+body.mac-platform.legacy .details-section {
     margin-top: -1px;
     margin-bottom: -1px;
 
-    font-size: 10px;
+    border-bottom: none;
+    background-color: transparent;
+}
+
+.details-section .details-section {
+    background-color: rgb(255, 255, 255);
+}
+
+body.mac-platform.legacy .details-section .details-section {
+    background-color: transparent;
+}
+
+.details-section .details-section:last-child {
+    border-bottom: none;
+}
+
+.details-section .details-section:first-child {
+    border-top: 1px solid rgb(153, 153, 153);
 }
 
 .details-section > .header {
     top: -1px;
     height: 23px;
 
-    border-top: 1px solid rgb(153, 153, 153);
-    border-bottom: 1px solid rgb(153, 153, 153);
-    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
-    background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
-
+    background-color: rgb(242, 242, 242);
     color: rgb(57, 57, 57);
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
 
     white-space: nowrap;
     overflow: hidden;
     z-index: 200;
 }
 
-.details-section .details-section > .header {
-    background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240));
+body.mac-platform.legacy .details-section > .header {
+    border-bottom: 1px solid rgb(153, 153, 153);
+    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
 
+    border-top: 1px solid rgb(153, 153, 153);
+
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+}
+
+.details-section .details-section > .header {
     top: 21px;
+    background-color: rgb(255, 255, 255);
+
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 0;
 
     /* Ensure these headers are displayed below the parent header but above scrollbars. */
     z-index: 100;
+
+}
+
+body.mac-platform.legacy .details-section .details-section > .header {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, rgb(250, 250, 250), rgb(240, 240, 240));
+    box-shadow: none;
+}
+
+.details-section .details-section.collaspsed > .header {
+    box-shadow: none;
+}
+
+.details-section.computed-style-properties:not(.collapsed) > .header {
+    background-color: rgb(255, 255, 255);
+}
+
+body.mac-platform.legacy .details-section.computed-style-properties:not(.collapsed) > .header {
+    background-color: transparent;
 }
 
 .details-section > .header::before {
 
 .details-section > .content > .group {
     display: table-row-group;
+    border-bottom: 1px solid rgb(153, 153, 153);
+}
+
+body.mac-platform.legacy .details-section > .content > .group {
+    border-bottom: none;
+}
+
+.details-section > .content > .group:last-child {
+    border-bottom: none;
 }
 
 .details-section > .content > .group:nth-child(even) {
+    background-color: rgb(233, 233, 233);
+}
+
+body.mac-platform.legacy .details-section > .content > .group:nth-child(even) {
     background-color: rgb(222, 222, 222);
 }
 
     border-top: 1px solid rgb(153, 153, 153);
 }
 
-.details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
-.details-section > .content > .group:last-child > .row:not(.simple):last-child,
-.details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
-.details-section > .content > .group:last-child > .row.simple:last-child > * {
+body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
+body.mac-platform.legacy .details-section > .content > .group:last-child > .row:not(.simple):last-child,
+body.mac-platform.legacy .details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
+body.mac-platform.legacy .details-section > .content > .group:last-child > .row.simple:last-child > * {
     border-bottom: 1px solid rgb(153, 153, 153);
 }
 
index d89f268..ab61ce9 100644 (file)
@@ -43,7 +43,7 @@
     -webkit-appearance: none;
 
     border: 1px solid rgba(0, 0, 0, 0.35);
-    border-radius: 10px;
+    border-radius: 3px;
     background-color: rgba(255, 255, 255, 0.2);
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
     background-clip: padding-box;
     transition: background-color 200ms ease-in-out;
 }
 
+body.mac-platform.legacy .filter-bar > input[type="search"] {
+    border-radius: 10px;
+}
+
 .filter-bar > input[type="search"]::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.35);
 }
index d676aba..da3f29a 100644 (file)
@@ -326,8 +326,17 @@ WebInspector.FindBanner.prototype = {
         specifications["normal"] = {fillColor: [81, 81, 81]};
         specifications["normal-active"] = {fillColor: [37, 37, 37]};
 
-        generateColoredImagesForCSS("Images/BackArrow.svg", specifications, 7, 7, "find-banner-previous-arrow-");
-        generateColoredImagesForCSS("Images/ForwardArrow.svg", specifications, 7, 7, "find-banner-next-arrow-");
+        var forwardArrow, backArrow;
+        if (WebInspector.Platform.name === "mac" && WebInspector.Platform.version.release < 10) {
+            forwardArrow = "Images/ForwardArrowLegacy.svg";
+            backArrow = "Images/BackArrowLegacy.svg";
+        } else {
+            forwardArrow = "Images/ForwardArrow.svg";
+            backArrow = "Images/BackArrow.svg";
+        }
+
+        generateColoredImagesForCSS(backArrow, specifications, 7, 7, "find-banner-previous-arrow-");
+        generateColoredImagesForCSS(forwardArrow, specifications, 7, 7, "find-banner-next-arrow-");
     }
 };
 
index 7ace21a..916a40b 100644 (file)
 .navigation-sidebar-panel-content-tree-outline .item.selected {
     color: white;
 
+    background-color: rgb(185, 184, 185);
+}
+
+body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline .item.selected {
     border-top: 1px solid rgb(162, 177, 201);
 
+    background-color: transparent;
     background-image: linear-gradient(to bottom, rgb(175, 190, 213), rgb(130, 151, 182));
     background-origin: padding;
     background-clip: padding;
 }
 
 .navigation-sidebar-panel-content-tree-outline:focus .item.selected {
+    background-color: rgb(0, 128, 252);
+}
+
+body.mac-platform.legacy .navigation-sidebar-panel-content-tree-outline:focus .item.selected {
+    background-color: transparent;
     border-top: 1px solid rgb(148, 174, 193);
     background-image: linear-gradient(to bottom, rgb(154, 180, 203), rgb(112, 139, 176));
 }
 
 body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
+    background-color: rgb(212, 212, 212);
+}
+
+body.mac-platform.legacy.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
+    background-color: transparent;
     border-top: 1px solid rgb(168, 168, 168);
     background-image: linear-gradient(to bottom, rgb(194, 194, 194), rgb(158, 158, 158));
 }
index 51e04f4..2219990 100644 (file)
 }
 
 .navigation-bar .item.radio.button.text-only.selected {
+    color: rgb(52, 141, 220);
+    font-weight: bold;
+}
+
+body.mac-platform.legacy .navigation-bar .item.radio.button.text-only.selected {
+    color: rgb(0, 0, 0);
+
     background-repeat: no-repeat;
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.09) 12%, rgba(0, 0, 0, 0.06) 12%, transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent),
         linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
     background-size: 100% 100%, 1px 100%, 1px 100%;
     background-position: left top, left top, right top;
-
-    font-weight: bold;
 }
index 811b053..220656b 100644 (file)
 
 .sidebar > .panel.details.css-style .rules .label + .style-declaration-section {
     margin-top: 5px;
+    border-top: 1px solid rgb(210, 210, 210);
+}
+
+body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .label + .style-declaration-section {
+    border-top: none;
 }
 
 .sidebar > .panel.details.css-style .rules .new-rule {
@@ -43,7 +48,6 @@
     font-weight: bold;
 
     color: black;
-    text-shadow: white 0 1px 0;
 
     padding: 5px 10px;
 
     opacity: 0.5;
 }
 
+body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule {
+    text-shadow: white 0 1px 0;
+    border-bottom: none;
+}
+
+.sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section {
+    border-top: 1px solid rgb(210, 210, 210);
+}
+
+body.mac-platform.legacy .sidebar > .panel.details.css-style .rules .new-rule + .style-declaration-section {
+    border-top: none;
+}
+
 .sidebar > .panel.details.css-style .rules .new-rule img {
     content: url(../Images/Plus.svg);
 
index a1789d6..3c70547 100644 (file)
@@ -33,7 +33,6 @@
     margin: 0 2px;
     padding: 0 8px 3px;
     font-size: 11px;
-    font-weight: bold;
     line-height: 11px;
     color: rgb(46, 46, 46);
     background-color: transparent;
     transition-property: background-color, border-color;
 }
 
+body.mac-platform.legacy .scope-bar > li {
+    font-weight: bold;
+}
+
 .scope-bar > li.selected,
 .scope-bar > li:active {
     transition-duration: 75ms;
 }
 
 .scope-bar > li.selected {
+    color: rgb(52, 141, 220);
+    border-color: rgba(52, 141, 220, 1);
+    font-weight: bold;
+}
+
+body.mac-platform.legacy .scope-bar > li.selected {
+    color: inherit;
     background-color: rgba(0, 0, 0, 0.06);
     border-color: rgba(0, 0, 0, 0.30);
 }
index 7275e4c..1605ee4 100644 (file)
@@ -31,7 +31,7 @@
     -webkit-appearance: none;
 
     border: 1px solid rgba(0, 0, 0, 0.35);
-    border-radius: 10px;
+    border-radius: 3px;
     background-color: rgba(255, 255, 255, 0.2);
     box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
     background-clip: padding-box;
     transition: background-color 200ms ease-in-out;
 }
 
+body.mac-platform.legacy .search-bar > input[type="search"] {
+    border-radius: 10px;
+}
+
 .search-bar > input[type="search"]::-webkit-input-placeholder {
     color: rgba(0, 0, 0, 0.35);
 }
index 3a1f752..856fa3a 100644 (file)
 .sidebar {
     position: relative;
 
+    background-color: rgb(242, 242, 242);
+}
+
+body.mac-platform.legacy .sidebar {
     background-color: rgb(227, 231, 235);
 }
 
@@ -34,7 +38,7 @@
     border: none !important;
 }
 
-body.window-inactive .sidebar {
+body.mac-platform.legacy.window-inactive .sidebar {
     background-color: rgb(231, 231, 231);
 }
 
@@ -88,6 +92,9 @@ body.window-inactive .sidebar {
 }
 
 .sidebar.right {
-    background-color: rgb(231, 231, 231);
     border-left: 1px solid rgb(153, 153, 153);
 }
+
+body.mac-platform.legacy .sidebar.right {
+    background-color: rgb(231, 231, 231);
+}
index e8b780f..c3bc546 100644 (file)
     height: 22px;
 
     border-bottom: 1px solid rgb(179, 179, 179);
-    background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
-
+    background-color: rgb(242, 242, 242);
     color: rgb(57, 57, 57);
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
 
     white-space: nowrap;
     overflow: hidden;
     overflow: hidden;
 }
 
+body.mac-platform.legacy .sidebar > .panel.navigation.timeline > .title-bar {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+}
+
 .sidebar > .panel.navigation.timeline > .title-bar.timelines {
     top: 22px;
 }
index 55d73db..40fe0b6 100644 (file)
@@ -59,8 +59,7 @@ body:not(.mac-platform) .toolbar {
     box-shadow: inset rgb(252, 252, 252) 0 1px 0;
 }
 
-body.docked.mac-platform.mountain-lion .toolbar,
-body.docked.mac-platform.mavericks .toolbar {
+body.docked.mac-platform.legacy .toolbar {
     background-image: linear-gradient(to bottom, rgb(216, 216, 216), rgb(190, 190, 190));
     box-shadow: inset rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(0, 0, 0, 0.02) 0 -1px 0;
 }
index 55b9b9e..8c123f2 100644 (file)
     <None Include="..\UserInterface\Images\ApplicationCacheManifest%402x.png" />
     <None Include="..\UserInterface\Images\ApplicationCacheManifest.png" />
     <None Include="..\UserInterface\Images\BackArrow.svg" />
+    <None Include="..\UserInterface\Images\BackArrowLegacy.svg" />
     <None Include="..\UserInterface\Images\BottomUpTree.svg" />
     <None Include="..\UserInterface\Images\Breakpoint%402x.png" />
     <None Include="..\UserInterface\Images\Breakpoint.png" />
     <None Include="..\UserInterface\Images\FolderGeneric%402x.png" />
     <None Include="..\UserInterface\Images\FolderGeneric.png" />
     <None Include="..\UserInterface\Images\ForwardArrow.svg" />
+    <None Include="..\UserInterface\Images\ForwardArrowLegacy.svg" />
     <None Include="..\UserInterface\Images\Function.svg" />
     <None Include="..\UserInterface\Images\GoToArrow.svg" />
     <None Include="..\UserInterface\Images\HierarchicalNavigationItemChevron.svg" />
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
   <ImportGroup Label="ExtensionTargets">
   </ImportGroup>
-</Project>
\ No newline at end of file
+</Project>
index 492fd5c..1ecb7f6 100644 (file)
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <ItemGroup>
     <Filter Include="Resource Files">
     <None Include="..\UserInterface\Images\BackArrow.svg">
       <Filter>Images</Filter>
     </None>
+    <None Include="..\UserInterface\Images\BackArrowLegacy.svg">
+      <Filter>Images</Filter>
+    </None>
     <None Include="..\UserInterface\Images\BottomUpTree.svg">
       <Filter>Images</Filter>
     </None>
     <None Include="..\UserInterface\Images\ForwardArrow.svg">
       <Filter>Images</Filter>
     </None>
+    <None Include="..\UserInterface\Images\ForwardArrowLegacy.svg">
+      <Filter>Images</Filter>
+    </None>
     <None Include="..\UserInterface\Images\Function.svg">
       <Filter>Images</Filter>
     </None>
     <None Include="WebInspectorUI.make" />
     <None Include="build-webinspectorui.pl" />
   </ItemGroup>
-</Project>
\ No newline at end of file
+</Project>