From 3f4f4db4e5cb41c305f60ea041e7e3e47e23f01a Mon Sep 17 00:00:00 2001 From: Jack Franklin Date: Tue, 25 May 2021 11:32:02 +0000 Subject: [PATCH] [DarkMode] more small files * xhrBreakpointsSidebarPane.css * sensors.css * profilesSidebarTree.css * watchExpressionsSidebarPane.css Bug: chromium:1152736 Change-Id: I7c2ae46b94cfb6b331e19cf652bfae4586c1e16b Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2916381 Commit-Queue: Jack Franklin Commit-Queue: Tim van der Lippe Auto-Submit: Jack Franklin Reviewed-by: Tim van der Lippe --- .../XHRBreakpointsSidebarPane.ts | 2 +- .../xhrBreakpointsSidebarPane.css | 20 +++++++++---------- front_end/panels/emulation/SensorsView.ts | 2 +- front_end/panels/emulation/sensors.css | 20 +++++++++++++------ front_end/panels/profiler/ProfilesPanel.ts | 2 +- .../panels/profiler/profilesSidebarTree.css | 6 ++---- .../sources/WatchExpressionsSidebarPane.ts | 4 ++-- .../sources/watchExpressionsSidebarPane.css | 18 ++++++++--------- 8 files changed, 40 insertions(+), 34 deletions(-) diff --git a/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts b/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts index 41236be646..ab3f65f5fd 100644 --- a/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts +++ b/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts @@ -78,7 +78,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont private constructor() { super(true); - this.registerRequiredCSS('panels/browser_debugger/xhrBreakpointsSidebarPane.css', {enableLegacyPatching: true}); + this.registerRequiredCSS('panels/browser_debugger/xhrBreakpointsSidebarPane.css', {enableLegacyPatching: false}); this._breakpoints = new UI.ListModel.ListModel(); this._list = new UI.ListControl.ListControl(this._breakpoints, this, UI.ListControl.ListMode.NonViewport); diff --git a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css index 9bd72bad71..5fbf26feef 100644 --- a/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css +++ b/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css @@ -26,8 +26,7 @@ margin-left: 0; margin-right: 0; outline: none !important; /* stylelint-disable-line declaration-no-important */ - border: 1px solid rgb(66% 66% 66%); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + border: 1px solid var(--color-background-elevation-2); } .breakpoint-entry { @@ -36,8 +35,7 @@ } .breakpoint-list .breakpoint-entry:hover { - background-color: #eee; /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + background-color: var(--color-background-elevation-1); } .breakpoint-list .breakpoint-entry:focus-visible { @@ -49,15 +47,17 @@ } .breakpoint-hit { - background-color: rgb(255 255 194); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ - border-right: 3px solid rgb(107 97 48); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + --override-breakpoint-hit-background-color: rgb(255 255 194); + --override-breakpoint-hit-border-color: rgb(107 97 48); + + background-color: var(--override-breakpoint-hit-background-color); + border-right: 3px solid var(--override-breakpoint-hit-border-color); } +.-theme-with-dark-background .breakpoint-hit, :host-context(.-theme-with-dark-background) .breakpoint-hit { - background-color: hsl(46deg 98% 22%); - color: #ccc; + --override-breakpoint-hit-background-color: hsl(46deg 98% 22%); + --override-breakpoint-hit-border-color: #ccc; } @media (forced-colors: active) { diff --git a/front_end/panels/emulation/SensorsView.ts b/front_end/panels/emulation/SensorsView.ts index 3f20c5a3b2..51a09d5614 100644 --- a/front_end/panels/emulation/SensorsView.ts +++ b/front_end/panels/emulation/SensorsView.ts @@ -208,7 +208,7 @@ export class SensorsView extends UI.Widget.VBox { constructor() { super(true); - this.registerRequiredCSS('panels/emulation/sensors.css', {enableLegacyPatching: true}); + this.registerRequiredCSS('panels/emulation/sensors.css', {enableLegacyPatching: false}); this.contentElement.classList.add('sensors-view'); this._LocationSetting = Common.Settings.Settings.instance().createSetting('emulation.locationOverride', ''); diff --git a/front_end/panels/emulation/sensors.css b/front_end/panels/emulation/sensors.css index 3cfa9b3a57..d086b1506a 100644 --- a/front_end/panels/emulation/sensors.css +++ b/front_end/panels/emulation/sensors.css @@ -17,8 +17,7 @@ } .sensors-view input[readonly] { - background-color: rgb(235 235 228); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + background-color: var(--color-background-elevation-1); } .sensors-view fieldset { @@ -84,17 +83,27 @@ } .orientation-stage { + --override-gradient-color-1: #e1f5fe; + --override-gradient-color-2: #b0ebf3; + --override-gradient-color-3: #def6f9; + perspective: 700px; perspective-origin: 50% 50%; width: 160px; height: 150px; - background: linear-gradient(#e1f5fe 0%, #e1f5fe 64%, #b0ebf3 64%, #def6f9 100%); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + background: linear-gradient(var(--override-gradient-color-1) 0%, var(--override-gradient-color-1) 64%, var(--override-gradient-color-2) 64%, var(--override-gradient-color-3) 100%); transition: 0.2s ease opacity, 0.2s ease filter; overflow: hidden; margin-bottom: 10px; } +.-theme-with-dark-background .orientation-stage, +:host-context(.-theme-with-dark-background) .orientation-stage { + --override-gradient-color-1: rgb(1 21 30); + --override-gradient-color-2: rgb(12 71 79); + --override-gradient-color-3: rgb(6 30 33); +} + .orientation-stage.disabled { filter: grayscale(); opacity: 50%; @@ -280,8 +289,7 @@ fieldset.device-orientation-override-section { .panel-section-separator { height: 2px; margin-bottom: 8px; - background: #f1f1f1; /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + background: var(--color-background-elevation-2); } button.text-button { diff --git a/front_end/panels/profiler/ProfilesPanel.ts b/front_end/panels/profiler/ProfilesPanel.ts index 7cccb11551..85e8efef1d 100644 --- a/front_end/panels/profiler/ProfilesPanel.ts +++ b/front_end/panels/profiler/ProfilesPanel.ts @@ -110,7 +110,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp this.profilesItemTreeElement = new ProfilesSidebarTreeElement(this); this._sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(); - this._sidebarTree.registerRequiredCSS('panels/profiler/profilesSidebarTree.css', {enableLegacyPatching: true}); + this._sidebarTree.registerRequiredCSS('panels/profiler/profilesSidebarTree.css', {enableLegacyPatching: false}); this._sidebarTree.element.classList.add('profiles-sidebar-tree-box'); this.panelSidebarElement().appendChild(this._sidebarTree.element); diff --git a/front_end/panels/profiler/profilesSidebarTree.css b/front_end/panels/profiler/profilesSidebarTree.css index 9f9589c958..eeaec1873b 100644 --- a/front_end/panels/profiler/profilesSidebarTree.css +++ b/front_end/panels/profiler/profilesSidebarTree.css @@ -37,10 +37,8 @@ ol.tree-outline { padding: 0 10px; white-space: nowrap; margin-top: 1px; - color: rgb(92 110 129); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ - text-shadow: rgb(255 255 255 / 75%) 0 1px 0; /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + color: var(--color-text-secondary); + text-shadow: var(--color-background-opacity-80) 0 1px 0; line-height: 18px; } diff --git a/front_end/panels/sources/WatchExpressionsSidebarPane.ts b/front_end/panels/sources/WatchExpressionsSidebarPane.ts index a73fa23514..a5be52a49c 100644 --- a/front_end/panels/sources/WatchExpressionsSidebarPane.ts +++ b/front_end/panels/sources/WatchExpressionsSidebarPane.ts @@ -99,7 +99,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid private constructor() { super(true); this.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css', {enableLegacyPatching: false}); - this.registerRequiredCSS('panels/sources/watchExpressionsSidebarPane.css', {enableLegacyPatching: true}); + this.registerRequiredCSS('panels/sources/watchExpressionsSidebarPane.css', {enableLegacyPatching: false}); // TODO(szuend): Replace with a Set once the web test // panels/sources/debugger-ui/watch-expressions-preserve-expansion.js is either converted @@ -119,7 +119,7 @@ export class WatchExpressionsSidebarPane extends UI.ThrottledWidget.ThrottledWid this.contentElement.addEventListener('contextmenu', this._contextMenu.bind(this), false); this._treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline(); this._treeOutline.registerRequiredCSS( - 'panels/sources/watchExpressionsSidebarPane.css', {enableLegacyPatching: true}); + 'panels/sources/watchExpressionsSidebarPane.css', {enableLegacyPatching: false}); this._treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true); this._expandController = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController(this._treeOutline); diff --git a/front_end/panels/sources/watchExpressionsSidebarPane.css b/front_end/panels/sources/watchExpressionsSidebarPane.css index f39b7c5384..557ef06a69 100644 --- a/front_end/panels/sources/watchExpressionsSidebarPane.css +++ b/front_end/panels/sources/watchExpressionsSidebarPane.css @@ -48,21 +48,22 @@ } .watch-expressions .name { - color: rgb(136 19 145); /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + --override-watch-expression-name-color: rgb(136 19 145); + + color: var(--override-watch-expression-name-color); flex: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } -.watch-expression-error { - color: #f00; /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ +.-theme-with-dark-background .watch-expressions .name, +:host-context(.-theme-with-dark-background) .watch-expressions .name { + --override-watch-expression-name-color: rgb(227 110 236); } -:host-context(.-theme-with-dark-background) .watch-expression-error { - color: hsl(0deg 100% 65%); +.watch-expression-error { + color: var(--color-red); } .watch-expressions-separator { @@ -100,8 +101,7 @@ li.watch-expression-tree-item { } li.watch-expression-tree-item:hover { - background-color: #f0f0f0; /* stylelint-disable-line plugin/use_theme_colors */ - /* See: crbug.com/1152736 for color variable migration. */ + background-color: var(--color-background-elevation-2); } .watch-expression-header:focus-visible {