Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (220709 => 220710)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-08-14 17:56:56 UTC (rev 220710)
@@ -1,3 +1,44 @@
+2017-08-14 Matt Baker <mattba...@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 <nvasil...@apple.com>
Web Inspector: Clicking on suggestion hint should apply it, not dismiss
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -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;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -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;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -91,7 +91,6 @@
vertical-align: top;
- text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
line-height: 20px;
height: 20px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Main.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Main.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -326,10 +326,8 @@
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;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -70,13 +70,8 @@
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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Popover.js 2017-08-14 17:56:56 UTC (rev 220710)
@@ -422,11 +422,8 @@
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.
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingTraceDetailsSidebarPanel.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -44,11 +44,7 @@
.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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -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;
}
@@ -83,18 +82,7 @@
}
.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;
+ font-size: var(--sidebar-no-results-message-font-size);
+ color: var(--text-color-gray-medium);
}
-
-@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;
- }
-}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleSpreadsheetDetailsPanel.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -104,7 +104,6 @@
.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);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -24,13 +24,9 @@
*/
.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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js 2017-08-14 17:56:56 UTC (rev 220710)
@@ -502,8 +502,7 @@
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;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (220709 => 220710)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-08-14 17:56:47 UTC (rev 220709)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2017-08-14 17:56:56 UTC (rev 220710)
@@ -52,13 +52,15 @@
--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);
