Merge inspectorSyntaxHighlight.css and inspectorCommon.css.

Eventually we will need to split up the `inspectorCommon.css` styles
into separate style sheets and be more explicit about their usage,
but that's a bigger undertaking, and not something to start today.

Bug: 391381439
Change-Id: Ib075553b808257d1ef72d1abdb981221b8f19b93
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6189458
Auto-Submit: Benedikt Meurer <[email protected]>
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: bmeurer

config/gni/devtools_grd_files.gni

@@ -2483,7 +2483,6 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/inlineButton.css.legacy.js",
   "front_end/ui/legacy/inspectorCommon.css.js",
   "front_end/ui/legacy/inspectorCommon.css.legacy.js",
-  "front_end/ui/legacy/inspectorSyntaxHighlight.css.legacy.js",
   "front_end/ui/legacy/inspectorViewTabbedPane.css.legacy.js",
   "front_end/ui/legacy/listWidget.css.legacy.js",
   "front_end/ui/legacy/popover.css.legacy.js",

front_end/ui/legacy/BUILD.gn

@@ -28,7 +28,6 @@ generate_css("legacy_css_files") {
     "infobar.css",
     "inlineButton.css",
     "inspectorCommon.css",
-    "inspectorSyntaxHighlight.css",
     "inspectorViewTabbedPane.css",
     "listWidget.css",
     "popover.css",
@@ -54,10 +53,7 @@ generate_css("legacy_css_files") {
 }
 
 copy_to_gen("copy_stylesheets_for_server") {
-  sources = [
-    "inspectorCommon.css",
-    "inspectorSyntaxHighlight.css",
-  ]
+  sources = [ "inspectorCommon.css" ]
 }
 
 devtools_module("ui") {

front_end/ui/legacy/UIUtils.ts

@@ -1873,8 +1873,6 @@ export function injectCoreStyles(elementOrShadowRoot: Element|ShadowRoot): void
       elementOrShadowRoot :
       (elementOrShadowRoot.shadowRoot ?? elementOrShadowRoot.ownerDocument);
   shadowRootOrDocument.adoptedStyleSheets.push(Buttons.textButtonStyles);
-
-  ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(elementOrShadowRoot);
 }
 
 /**

front_end/ui/legacy/inspectorCommon.css

@@ -1237,3 +1237,108 @@ devtools-toolbar {
     opacity: 0%;
   }
 }
+
+/* Syntax highlighting */
+.webkit-css-property {
+  color: var(--webkit-css-property-color, var(--sys-color-token-property-special)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
+}
+
+.webkit-html-comment {
+  color: var(--sys-color-token-comment);
+}
+
+.webkit-html-tag {
+  color: var(--sys-color-token-tag);
+}
+
+.webkit-html-tag-name,
+.webkit-html-close-tag-name {
+  /* Keep this in sync with view-source.css (.webkit-html-tag) */
+  color: var(--sys-color-token-tag);
+}
+
+.webkit-html-pseudo-element {
+  /* This one is non-standard. */
+  color: var(--sys-color-token-pseudo-element);
+}
+
+.webkit-html-js-node,
+.webkit-html-css-node {
+  color: var(--text-primary);
+  white-space: pre-wrap;
+}
+
+.webkit-html-text-node {
+  color: var(--text-primary);
+  unicode-bidi: -webkit-isolate;
+}
+
+.webkit-html-entity-value {
+  /* This one is non-standard. */
+  background-color: rgb(0 0 0 / 15%); /* stylelint-disable-line plugin/use_theme_colors */
+  /* See: crbug.com/1152736 for color variable migration. */
+  unicode-bidi: -webkit-isolate;
+}
+
+.webkit-html-doctype {
+  /* Keep this in sync with view-source.css (.webkit-html-doctype) */
+  color: var(--text-secondary);
+  /* See: crbug.com/1152736 for color variable migration. */
+}
+
+.webkit-html-attribute-name {
+  /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+  color: var(--sys-color-token-attribute);
+  unicode-bidi: -webkit-isolate;
+}
+
+.webkit-html-attribute-value {
+  /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
+  color: var(--sys-color-token-attribute-value);
+  unicode-bidi: -webkit-isolate;
+  word-break: break-all;
+}
+
+.devtools-link {
+  color: var(--text-link);
+  text-decoration: underline;
+  outline-offset: 2px;
+
+  .elements-disclosure & {
+    color: var(--text-link);
+  }
+
+  devtools-icon {
+    vertical-align: baseline;
+    color: var(--sys-color-primary);
+  }
+
+  :focus .selected & devtools-icon {
+    color: var(--sys-color-tonal-container);
+  }
+
+  &:focus-visible {
+    outline-width: unset;
+  }
+
+  &.invalid-link {
+    color: var(--text-disabled);
+    text-decoration: none;
+  }
+
+  &:not(.devtools-link-prevent-click, .invalid-link) {
+    cursor: pointer;
+  }
+
+  @media (forced-colors: active) {
+    &:not(.devtools-link-prevent-click) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
+
+    &:focus-visible {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

front_end/ui/legacy/inspectorSyntaxHighlight.css

@@ -35,7 +35,6 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
-import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
 
 let themeSupportInstance: ThemeSupport;
 
@@ -148,10 +147,6 @@ export class ThemeSupport extends EventTarget {
     return this.themeNameInternal;
   }
 
-  injectHighlightStyleSheets(element: Element|ShadowRoot): void {
-    this.appendStyle(element, inspectorSyntaxHighlightStyles);
-  }
-
   appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
     const styleElement = document.createElement('style');
     styleElement.textContent = cssContent;

front_end/ui/legacy/theme_support/ThemeSupport.ts

@@ -202,13 +202,13 @@ body {
 }
 
 .material-tag-name {
-  /* Keep this in sync with inspectorSyntaxHighlight.css (--override-dom-tag-name-color) */
+  /* Keep this in sync with inspectorCommon.css (--override-dom-tag-name-color) */
   color: rgb(136 18 128);
 }
 
 .material-class-name,
 .material-node-id {
-  /* Keep this in sync with inspectorSyntaxHighlight.css (.webkit-html-attribute-value) */
+  /* Keep this in sync with inspectorCommon.css (.webkit-html-attribute-value) */
   color: rgb(26 26 166);
 }
 

inspector_overlay/tool_highlight.css

@@ -149,7 +149,6 @@ const styleSheetPaths = [
   'front_end/design_tokens.css',
   'front_end/ui/components/buttons/textButton.css',
   'front_end/ui/legacy/inspectorCommon.css',
-  'front_end/ui/legacy/inspectorSyntaxHighlight.css',
   'front_end/ui/components/docs/component_docs_styles.css',
 ];
 

scripts/component_server/server.js

@@ -53,7 +53,6 @@ const EXEMPTED_FILES = new Set([
   ['front_end', 'panels', 'sources', 'sourcesView.css'],
   ['front_end', 'panels', 'timeline', 'timelinePanel.css'],
   ['front_end', 'ui', 'legacy', 'filter.css'],
-  ['front_end', 'ui', 'legacy', 'inspectorSyntaxHighlight.css'],
   ['front_end', 'ui', 'legacy', 'splitWidget.css'],
   ['front_end', 'ui', 'legacy', 'suggestBox.css'],
   ['front_end', 'ui', 'legacy', 'tabbedPane.css'],