[Dark Mode] fix final patching sheets
This CL fixes a few stylesheets that my automated scripts didn't pick
up when generating the tracking list.
Bug: chromium:1152736
Change-Id: I0fe29cf2f1169f1147026462be92785c39cc82a1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2917076
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
diff --git a/front_end/panels/application/ServiceWorkersView.ts b/front_end/panels/application/ServiceWorkersView.ts
index aa2312c..95507f0 100644
--- a/front_end/panels/application/ServiceWorkersView.ts
+++ b/front_end/panels/application/ServiceWorkersView.ts
@@ -813,7 +813,7 @@
_wrapWidget(container: Element): Element {
const shadowRoot = UI.Utils.createShadowRootWithCoreStyles(
- container, {cssFile: undefined, enableLegacyPatching: true, delegatesFocus: undefined});
+ container, {cssFile: undefined, enableLegacyPatching: false, delegatesFocus: undefined});
UI.Utils.appendStyle(shadowRoot, 'panels/application/serviceWorkersView.css', {enableLegacyPatching: false});
const contentElement = document.createElement('div');
shadowRoot.appendChild(contentElement);
diff --git a/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts b/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts
index 0cd3211..4e05cf4 100644
--- a/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts
+++ b/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts
@@ -33,7 +33,7 @@
super(true);
this._categoriesTreeOutline = new UI.TreeOutline.TreeOutlineInShadow();
this._categoriesTreeOutline.registerRequiredCSS(
- 'panels/browser_debugger/categorizedBreakpointsSidebarPane.css', {enableLegacyPatching: true});
+ 'panels/browser_debugger/categorizedBreakpointsSidebarPane.css', {enableLegacyPatching: false});
this._categoriesTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true);
this.contentElement.appendChild(this._categoriesTreeOutline.element);
this._viewId = viewId;
diff --git a/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css b/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css
index d39df63..687f9b5 100644
--- a/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css
+++ b/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css
@@ -29,20 +29,22 @@
}
.breakpoint-hit {
- background-color: rgb(255 255 194); /* 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);
}
: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-dark-mode-color: #ccc;
+
+ color: var(--override-breakpoint-hit-dark-mode-color);
}
.breakpoint-hit .breakpoint-hit-marker {
- 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. */
+ background-color: var(--override-breakpoint-hit-background-color);
+ border-right: 3px solid var(--override-breakpoint-hit-border-color);
height: 100%;
left: 0;
margin-left: -30px;
@@ -54,7 +56,3 @@
.source-code[is="dt-checkbox"] {
max-width: 100%;
}
-
-:host-context(.-theme-with-dark-background) .breakpoint-hit .breakpoint-hit-marker {
- background-color: hsl(46deg 98% 22%);
-}
diff --git a/front_end/panels/css_overview/CSSOverviewCompletedView.ts b/front_end/panels/css_overview/CSSOverviewCompletedView.ts
index b792a8c..3415afe 100644
--- a/front_end/panels/css_overview/CSSOverviewCompletedView.ts
+++ b/front_end/panels/css_overview/CSSOverviewCompletedView.ts
@@ -254,7 +254,7 @@
// Dupe the styles into the main container because of the shadow root will prevent outer styles.
this._mainContainer.registerRequiredCSS(
- 'panels/css_overview/cssOverviewCompletedView.css', {enableLegacyPatching: true});
+ 'panels/css_overview/cssOverviewCompletedView.css', {enableLegacyPatching: false});
this._mainContainer.setMainWidget(this._resultsContainer);
this._mainContainer.setSidebarWidget(this._elementContainer);
diff --git a/front_end/panels/css_overview/cssOverviewCompletedView.css b/front_end/panels/css_overview/cssOverviewCompletedView.css
index 7a4131b..e6f027d 100644
--- a/front_end/panels/css_overview/cssOverviewCompletedView.css
+++ b/front_end/panels/css_overview/cssOverviewCompletedView.css
@@ -243,8 +243,7 @@
.overview-completed-view .unused-declarations button:hover .bar,
.overview-completed-view .unused-declarations button:focus .bar {
background-color: var(--color-primary-variant);
- box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 0 0 0 2px rgb(66 133 244 / 40%); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ box-shadow: 0 1px 2px var(--divider-line), 0 0 0 2px var(--color-primary-variant);
color: var(--color-background);
}
@@ -320,13 +319,11 @@
}
[is=ui-icon].smallicon-checkmark-square {
- background-color: #00b06f; /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ background-color: var(--color-green);
}
[is=ui-icon].smallicon-no {
- background-color: #f00; /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ background-color: var(--color-red);
}
.data .nodeId-column {
diff --git a/front_end/panels/network/RequestHeadersView.ts b/front_end/panels/network/RequestHeadersView.ts
index ed22148..998dcce 100644
--- a/front_end/panels/network/RequestHeadersView.ts
+++ b/front_end/panels/network/RequestHeadersView.ts
@@ -275,7 +275,7 @@
const root = new UI.TreeOutline.TreeOutlineInShadow();
root.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css', {enableLegacyPatching: false});
root.registerRequiredCSS(
- 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: true});
+ 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: false});
root.registerRequiredCSS('panels/network/requestHeadersTree.css', {enableLegacyPatching: false});
root.element.classList.add('request-headers-tree');
root.makeDense();
diff --git a/front_end/ui/legacy/UIUtils.ts b/front_end/ui/legacy/UIUtils.ts
index 512b556..175fbf4 100644
--- a/front_end/ui/legacy/UIUtils.ts
+++ b/front_end/ui/legacy/UIUtils.ts
@@ -1350,7 +1350,7 @@
constructor() {
super();
const root = createShadowRootWithCoreStyles(this, {
- enableLegacyPatching: true,
+ enableLegacyPatching: false,
cssFile: undefined,
delegatesFocus: undefined,
});
diff --git a/front_end/ui/legacy/Widget.ts b/front_end/ui/legacy/Widget.ts
index 70f7e80..a20ba34 100644
--- a/front_end/ui/legacy/Widget.ts
+++ b/front_end/ui/legacy/Widget.ts
@@ -78,7 +78,7 @@
this.element.classList.add('flex-auto');
this._shadowRoot = createShadowRootWithCoreStyles(this.element, {
cssFile: undefined,
- enableLegacyPatching: true,
+ enableLegacyPatching: false,
delegatesFocus,
});
this._shadowRoot.appendChild(this.contentElement);
diff --git a/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts b/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts
index f5aaa27..c30abfb 100644
--- a/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts
+++ b/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts
@@ -167,7 +167,7 @@
objectPropertiesSectionMap.set(this.element, this);
this.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css', {enableLegacyPatching: false});
this.registerRequiredCSS(
- 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: true});
+ 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: false});
this.rootElement().childrenListElement.classList.add('source-code', 'object-properties-section');
}
@@ -573,7 +573,7 @@
super();
this.registerRequiredCSS('ui/legacy/components/object_ui/objectValue.css', {enableLegacyPatching: false});
this.registerRequiredCSS(
- 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: true});
+ 'ui/legacy/components/object_ui/objectPropertiesSection.css', {enableLegacyPatching: false});
this._editable = !(options && options.readOnly);
this.contentElement.classList.add('source-code');
this.contentElement.classList.add('object-properties-section');
diff --git a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
index 739d61d..598f291 100644
--- a/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
+++ b/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css
@@ -10,8 +10,7 @@
.object-properties-section {
padding: 0 0 0 0;
- color: rgb(33 33 33) !important; /* stylelint-disable-line plugin/use_theme_colors, declaration-no-important */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--color-text-primary);
display: flex;
flex-direction: column;
}
@@ -44,8 +43,7 @@
}
.object-properties-section .private-property-hash {
- color: #222; /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--color-text-primary);
}
.object-properties-section-root-element {
diff --git a/front_end/ui/legacy/components/source_frame/XMLView.ts b/front_end/ui/legacy/components/source_frame/XMLView.ts
index 64d9ebb..17065ff 100644
--- a/front_end/ui/legacy/components/source_frame/XMLView.ts
+++ b/front_end/ui/legacy/components/source_frame/XMLView.ts
@@ -31,7 +31,7 @@
this.contentElement.classList.add('shadow-xml-view', 'source-code');
this._treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
this._treeOutline.registerRequiredCSS(
- 'ui/legacy/components/source_frame/xmlTree.css', {enableLegacyPatching: true});
+ 'ui/legacy/components/source_frame/xmlTree.css', {enableLegacyPatching: false});
this.contentElement.appendChild(this._treeOutline.element);
this._currentSearchFocusIndex = 0;
this._currentSearchTreeElements = [];
diff --git a/front_end/ui/legacy/components/source_frame/xmlTree.css b/front_end/ui/legacy/components/source_frame/xmlTree.css
index 5116d03..53c53de 100644
--- a/front_end/ui/legacy/components/source_frame/xmlTree.css
+++ b/front_end/ui/legacy/components/source_frame/xmlTree.css
@@ -9,6 +9,19 @@
padding: 0;
margin: 0;
padding-inline-start: 16px;
+
+ --override-xml-view-tag: rgb(136 18 128);
+ --override-xml-view-comment-or-instruction: rgb(35 110 37);
+ --override-xml-view-attribute-name: rgb(153 69 0);
+ --override-xml-view-attribute-value: rgb(26 26 166);
+}
+
+.-theme-with-dark-background .tree-outline ol,
+:host-context(.-theme-with-dark-background) .tree-outline ol {
+ --override-xml-view-tag: rgb(237 119 229);
+ --override-xml-view-comment-or-instruction: rgb(145 220 147);
+ --override-xml-view-attribute-name: rgb(255 171 102);
+ --override-xml-view-attribute-value: rgb(89 89 229);
}
ol.tree-outline {
@@ -24,37 +37,30 @@
}
.shadow-xml-view-tag {
- color: rgb(136 18 128); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--override-xml-view-tag);
}
.shadow-xml-view-comment {
- color: rgb(35 110 37); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--override-xml-view-comment-or-instruction);
}
.shadow-xml-view-processing-instruction {
- color: rgb(35 110 37); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--override-xml-view-comment-or-instruction);
}
.shadow-xml-view-attribute-name {
- color: rgb(153 69 0); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--override-xml-view-attribute-name);
}
.shadow-xml-view-attribute-value {
- color: rgb(26 26 166); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--override-xml-view-attribute-value);
}
.shadow-xml-view-text {
- color: rgb(0 0 0); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--color-background-inverted);
white-space: pre;
}
.shadow-xml-view-cdata {
- color: rgb(0 0 0); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ color: var(--color-background-inverted);
}