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 3da0b6c6e05d9315aaa29082b5149d432f15db50..1fe0fac6a6bb02d97e2f393fa03a82170a2396f0 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 5a3d82fb1135fb32bdf7639b5b41b86233395ed6..517319b5a3d504c54269b52f4e6f3ee0ebe79d5d 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 3f1d3d4b210bbb1c3cc46793a972c012f50a5964..1b0fe6bd8d05b35fe6db79e637c073cfab57494c 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 10c71e0f1d9b5169bacfb466cf938e67ab290b22..2e6ed4750ccf0b6f01521a04d9245a842a1b9cfe 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 38cfd72a5690195491eb539fdf1cf880586575ea..6a0a78006ebfd62d7eb60a82a3325d70fd509b78 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 6c611048ef4f95a36b5071e388c35a2feb177017..4fdfaf360941b63e45d46b828e79497abf386a48 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 9845ca4ff4884fbedb5bc7995a6c53f1803d1c5e..e51be5e1cbd314a68eaaffaad90bb159a49e8087 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 084adca49703ee62eae6a87092a5bd1cedccd149..bef8e7155cb307fb2faabadd6a27d900333695a7 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 9fbc862b0526d06fcfc538e100288c38d37f9dc8..17847a1e5a78274f44430b002f67cff34e97169a 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 4d9c752550ce6081be1beb98251b0ecf105a3cc3..0767fcbb8d1d7f1c2a7c02d3e8a59ce6611275a3 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 4746a6c7f80e851ab51711af89c855a8646c3a7c..a6a09747bfd12f710b78f8ec77f67f7484d8f6e9 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 89e86d42ad2a45a6e7f78d71fb121fd9ffc5beef..7827b3d8ff67ad94e3f3e4f100b90b48c06c14b4 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 d6326521b2c15438519c34a4ed2f23e9243dfe05..d481f3814fb7e5be84da84a84d65e50578c93ea9 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 95db84bbbafb568bbdb7fa7b44c8203897f95208..f37b04f826f3baba7a780decb26fb90e800aa279 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);