Web Inspector: Remove text-shadow and gradient backgrounds
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Aug 2017 17:56:56 +0000 (17:56 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Aug 2017 17:56:56 +0000 (17:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=175430

Reviewed by Brian Burg.

Inspector should more closely match flat system look. Remove text-shadow
embossing and replace linear gradients in popover backgrounds and selected
tree item background color.

* UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
(.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
* UserInterface/Views/CompletionSuggestionsView.css:
(.completion-suggestions-container:not(:active) > .item.selected,):
* UserInterface/Views/DebuggerDashboardView.css:
(.toolbar .dashboard.debugger):
* UserInterface/Views/HierarchicalPathComponent.css:
(.hierarchical-path-component > .title):
* UserInterface/Views/Main.css:
(.bouncy-highlight):
* UserInterface/Views/NavigationSidebarPanel.css:
(.sidebar > .panel.navigation > .content .empty-content-placeholder > .message):
* UserInterface/Views/Popover.js:
(WI.Popover.prototype._drawBackground):
* UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:
(.sidebar > .details.recording-trace > .content > .no-trace-data > .message):
* UserInterface/Views/RulesStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style .rules .label):
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):
(@media (-webkit-min-device-pixel-ratio: 2)): Deleted.
(.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,): Deleted.
* UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:
(.style-spreadsheet .inherited):
* UserInterface/Views/TimelineDataGrid.css:
(.tree-outline.timeline-data-grid .item:hover):
* UserInterface/Views/TimelineDataGrid.js:
(WI.TimelineDataGrid.prototype._createPopoverContent):
* UserInterface/Views/Variables.css:
(:root):

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

14 files changed:
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
Source/WebInspectorUI/UserInterface/Views/Main.css
Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/Popover.js
Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css
Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
Source/WebInspectorUI/UserInterface/Views/Variables.css

index 3da0b6c..1fe0fac 100644 (file)
@@ -1,3 +1,44 @@
+2017-08-14  Matt Baker  <mattbaker@apple.com>
+
+        Web Inspector: Remove text-shadow and gradient backgrounds
+        https://bugs.webkit.org/show_bug.cgi?id=175430
+
+        Reviewed by Brian Burg.
+
+        Inspector should more closely match flat system look. Remove text-shadow
+        embossing and replace linear gradients in popover backgrounds and selected
+        tree item background color.
+
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.css:
+        (.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label):
+        * UserInterface/Views/CompletionSuggestionsView.css:
+        (.completion-suggestions-container:not(:active) > .item.selected,):
+        * UserInterface/Views/DebuggerDashboardView.css:
+        (.toolbar .dashboard.debugger):
+        * UserInterface/Views/HierarchicalPathComponent.css:
+        (.hierarchical-path-component > .title):
+        * UserInterface/Views/Main.css:
+        (.bouncy-highlight):
+        * UserInterface/Views/NavigationSidebarPanel.css:
+        (.sidebar > .panel.navigation > .content .empty-content-placeholder > .message):
+        * UserInterface/Views/Popover.js:
+        (WI.Popover.prototype._drawBackground):
+        * UserInterface/Views/RecordingTraceDetailsSidebarPanel.css:
+        (.sidebar > .details.recording-trace > .content > .no-trace-data > .message):
+        * UserInterface/Views/RulesStyleDetailsPanel.css:
+        (.sidebar > .panel.details.css-style .rules .label):
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message):
+        (@media (-webkit-min-device-pixel-ratio: 2)): Deleted.
+        (.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,): Deleted.
+        * UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css:
+        (.style-spreadsheet .inherited):
+        * UserInterface/Views/TimelineDataGrid.css:
+        (.tree-outline.timeline-data-grid .item:hover):
+        * UserInterface/Views/TimelineDataGrid.js:
+        (WI.TimelineDataGrid.prototype._createPopoverContent):
+        * UserInterface/Views/Variables.css:
+        (:root):
+
 2017-08-11  Nikita Vasilyev  <nvasilyev@apple.com>
 
         Web Inspector: Clicking on suggestion hint should apply it, not dismiss
index 5a3d82f..517319b 100644 (file)
@@ -55,7 +55,6 @@
 
 .sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
     color: hsl(0, 0%, 37%);
-    text-shadow: white 0 1px 0;
 
     margin: 0 5px;
     min-width: 55px;
index 3f1d3d4..1b0fe6b 100644 (file)
@@ -72,9 +72,6 @@
 
 .completion-suggestions-container:not(:active) > .item.selected,
 .completion-suggestions-container > .item:active {
-    box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
-    background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
-
+    background-color: var(--selected-background-color);
     color: white;
-    text-shadow: hsl(209, 41%, 34%) 0 1px 0;
 }
index 10c71e0..2e6ed47 100644 (file)
@@ -29,7 +29,6 @@
     align-items: center;
 
     text-align: center;
-    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
     color: hsl(0, 0%, 23%);
 
     --debugger-dashboard-padding-start: 5px;
index 38cfd72..6a0a780 100644 (file)
@@ -91,7 +91,6 @@ body[dir=rtl] .hierarchical-path-component > :matches(.icon, .selector-arrows) {
 
     vertical-align: top;
 
-    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
     line-height: 20px;
     height: 20px;
 
index 6c61104..4fdfaf3 100644 (file)
@@ -326,10 +326,8 @@ body[dir=rtl] .go-to-arrow {
     z-index: var(--z-index-highlight);
 
     box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px;
-    text-shadow: white 0 0 2px;
 
-    background: linear-gradient(to bottom, hsl(54, 93%, 70%), hsl(50, 84%, 67%));
-    border-radius: 7px;
+    background-color: hsl(54, 93%, 70%);
 
     padding: 2px 4px;
     margin-top: -2px;
index 9845ca4..e51be5e 100644 (file)
     display: inline-block;
     white-space: nowrap;
 
-    font-size: 13px;
+    font-size: var(--sidebar-no-results-message-font-size);
+    color: var(--text-color-gray-medium);
 
-    color: white;
-    background-color: hsla(0, 0%, 0%, 0.15);
-    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
-    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
-
-    border-radius: 6px;
     padding: 5px 15px 6px;
 }
index 084adca..bef8e71 100644 (file)
@@ -422,11 +422,8 @@ WI.Popover = class Popover extends WI.Object
         this._drawFrame(ctx, bounds, this._edge, this._anchorPoint);
         ctx.clip();
 
-        // Gradient fill, top-to-bottom.
-        var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
-        fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
-        fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
-        ctx.fillStyle = fillGradient;
+        // Panel background color fill.
+        ctx.fillStyle = "rgb(236, 236, 236)";
         ctx.fillRect(0, 0, width, height);
 
         // Stroke.
index 9fbc862..17847a1 100644 (file)
 .sidebar > .details.recording-trace > .content > .no-trace-data > .message {
     display: inline-block;
     padding: 5px 15px 6px;
-    font-size: 13px;
+    font-size: var(--sidebar-no-results-message-font-size);
     white-space: nowrap;
-    color: white;
-    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
-    background-color: hsla(0, 0%, 0%, 0.15);
-    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
-    border-radius: 6px;
+    color: var(--text-color-gray-medium);
 }
index 4d9c752..0767fcb 100644 (file)
@@ -29,7 +29,6 @@
 
 .sidebar > .panel.details.css-style .rules .label {
     color: hsl(0, 0%, 60%);
-    text-shadow: white 0 1px 0;
     padding: 0 8px;
 }
 
 }
 
 .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
-    font-size: 13px;
-    color: white;
-    background-color: hsla(0, 0%, 0%, 0.15);
-    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
-    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
-    border-radius: 6px;
     padding: 5px 15px 6px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 2) {
-    .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,
-    .no-filter-results-message {
-        border-width: 0.5px !important;
-    }
+    font-size: var(--sidebar-no-results-message-font-size);
+    color: var(--text-color-gray-medium);
 }
index 4746a6c..a6a0974 100644 (file)
 
 .style-spreadsheet .inherited {
     color: hsl(0, 0%, 60%);
-    text-shadow: white 0 1px 0;
     padding: 4px 6px;
     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
 }
index 89e86d4..7827b3d 100644 (file)
  */
 
 .tree-outline.timeline-data-grid .item:hover {
+    border-radius: 3px;
     color: white;
-    border-radius: 4px;
-    box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
-    background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
-    background-origin: padding-box;
-    background-clip: padding-box;
-    text-shadow: hsl(209, 41%, 34%) 0 1px 0;
+    background-color: var(--selected-background-color);
 }
 
 .tree-outline.timeline-data-grid .item:hover .subtitle {
index d632652..d481f38 100644 (file)
@@ -502,8 +502,7 @@ WI.TimelineDataGrid = class TimelineDataGrid extends WI.DataGrid
             this._popoverCallStackTreeOutline.appendChild(callFrameTreeElement);
         }
 
-        var content = document.createElement("div");
-        content.className = "timeline-data-grid-popover";
+        let content = document.createElement("div");
         content.appendChild(this._popoverCallStackTreeOutline.element);
         return content;
     }
index 95db84b..f37b04f 100644 (file)
     --button-background-color: white;
     --button-background-color-pressed: hsl(0, 0%, 85%);
 
-    --panel-background-color: hsl(0, 0%, 94%);
+    --panel-background-color: hsl(0, 0%, 93%);
     --panel-background-color-light: hsl(0, 0%, 96%);
 
     --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
     --console-prompt-min-height: 30px;
 
-    --text-color-gray-medium: hsl(0, 0%, 50%);
+    --sidebar-no-results-message-font-size: 16px;
+
+    --text-color-gray-medium: hsl(0, 0%, 52%);
     --error-text-color: hsl(0, 86%, 47%);
 
     --value-changed-highlight: hsla(83, 100%, 48%, 0.4);