chrome-devtools-frontend 1.0.940714 → 1.0.942529

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -25,9 +25,11 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   constructor(parsedXML: Document) {
     super(true);
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS('ui/legacy/components/source_frame/xmlView.css');
     this.contentElement.classList.add('shadow-xml-view', 'source-code');
     this.treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.treeOutline.registerRequiredCSS('ui/legacy/components/source_frame/xmlTree.css');
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;

package/front_end/ui/legacy/components/source_frame/module.json

@@ -1,7 +1,4 @@
 {
-  "dependencies": [
-    "ui/legacy"
-  ],
     "resources": [
     "fontView.css",
     "imageView.css",

package/front_end/ui/legacy/components/source_frame/source_frame-legacy.ts

@@ -39,17 +39,6 @@ SourceFrame.SourceFrame = SourceFrameModule.SourceFrame.SourceFrameImpl;
 /** @interface */
 SourceFrame.LineDecorator = SourceFrameModule.SourceFrame.LineDecorator;
 
-/** @constructor */
-SourceFrame.SourcesTextEditor = SourceFrameModule.SourcesTextEditor.SourcesTextEditor;
-
-SourceFrame.SourcesTextEditor.Events = SourceFrameModule.SourcesTextEditor.Events;
-SourceFrame.SourcesTextEditor.lineNumbersGutterType = SourceFrameModule.SourcesTextEditor.lineNumbersGutterType;
-
-/** @interface */
-SourceFrame.SourcesTextEditorDelegate = SourceFrameModule.SourcesTextEditor.SourcesTextEditorDelegate;
-
-SourceFrame.SourcesTextEditor.TokenHighlighter = SourceFrameModule.SourcesTextEditor.TokenHighlighter;
-
 /** @constructor */
 SourceFrame.XMLView = SourceFrameModule.XMLView.XMLView;
 

package/front_end/ui/legacy/components/source_frame/source_frame.ts

@@ -9,7 +9,6 @@ import * as JSONView from './JSONView.js';
 import * as PreviewFactory from './PreviewFactory.js';
 import * as ResourceSourceFrame from './ResourceSourceFrame.js';
 import * as SourceFrame from './SourceFrame.js';
-import * as SourcesTextEditor from './SourcesTextEditor.js';
 import * as XMLView from './XMLView.js';
 
 export {
@@ -20,6 +19,5 @@ export {
   PreviewFactory,
   ResourceSourceFrame,
   SourceFrame,
-  SourcesTextEditor,
   XMLView,
 };

package/front_end/ui/legacy/components/text_editor/CodeMirrorTextEditor.ts

@@ -93,7 +93,9 @@ export class CodeMirrorTextEditor extends
     super();
     this.options = options;
 
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS('third_party/codemirror/codemirror.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
     this.registerRequiredCSS('ui/legacy/components/text_editor/cmdevtools.css');
 
     const {indentWithTabs, indentUnit} = CodeMirrorTextEditor.getIndentation(

package/front_end/ui/legacy/components/text_editor/cmdevtools.css

@@ -152,7 +152,9 @@
 }
 
 .CodeMirror-cursor {
-  border-left: 1px solid var(--color-background-inverted);
+  border-left:
+    1px solid
+    var(--color-background-inverted);
   border-right: none;
   width: 0;
 }

package/front_end/ui/legacy/components/text_editor/module.json

@@ -1,7 +1,4 @@
 {
-  "dependencies": [
-    "ui/legacy"
-  ],
   "resources": [
     "../../../../third_party/codemirror/codemirror.css",
     "autocompleteTooltip.css",

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -227,21 +227,13 @@ export class Linkifier implements SDK.TargetManager.Observer {
       return fallbackAnchor;
     }
 
-    let rawLocation;
-    if (scriptId) {
-      rawLocation = debuggerModel.createRawLocationByScriptId(
-          scriptId, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex);
-    }
-    // The function createRawLocationByScriptId will always return a raw location. Normally
-    // we rely on the live location that is created from it to update missing information
-    // to create the link. If we, however, already have a similar script with the same source url,
-    // use that one.
-    if (!rawLocation?.script()) {
-      rawLocation = debuggerModel.createRawLocationByURL(
-                        sourceURL, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex) ||
-          rawLocation;
-    }
-
+    // Prefer createRawLocationByScriptId() here, since it will always produce a correct
+    // link, since the script ID is unique. Only fall back to createRawLocationByURL()
+    // when all we have is an URL, which is not guaranteed to be unique.
+    const rawLocation = scriptId ? debuggerModel.createRawLocationByScriptId(
+                                       scriptId, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex) :
+                                   debuggerModel.createRawLocationByURL(
+                                       sourceURL, lineNumber || 0, columnNumber, linkifyURLOptions.inlineFrameIndex);
     if (!rawLocation) {
       return fallbackAnchor;
     }

package/front_end/ui/legacy/radioButton.css

@@ -5,31 +5,19 @@
  */
 
 ::slotted(input.dt-radio-button) {
-  --override-radio-dot: var(--image-file-radioDot);
-
   height: 17px;
   width: 17px;
   min-width: 17px;
-  border: 1px solid var(--color-details-hairline);
-  background-image: linear-gradient(to bottom, var(--color-background-elevation-0), var(--color-background-elevation-1));
   border-radius: 8px;
-  appearance: none;
   vertical-align: middle;
   margin: 0 5px 5px 0;
-}
-
-::slotted(input.dt-radio-button:checked) {
-  background: var(--override-radio-dot) center no-repeat, linear-gradient(to bottom, var(--color-background-elevation-0), var(--color-background-elevation-1));
+  accent-color: var(--color-checkbox-accent-color);
 }
 
 ::slotted(input.dt-radio-button:focus) {
   box-shadow: var(--legacy-focus-ring-active-shadow);
 }
 
-:host-context(.-theme-with-dark-background) ::slotted(input.dt-radio-button) {
-  --override-radio-dot: var(--image-file-radioDot-dark-theme);
-}
-
 @media (forced-colors: active) {
   ::slotted(input.dt-radio-button) {
     --gradient-start: ButtonFace;

package/front_end/ui/legacy/softContextMenu.css

@@ -42,6 +42,7 @@
   padding: 3px 7px 3px 8px;
   margin: 0 13px 0 0;
   white-space: nowrap;
+  align-items: center;
 }
 
 .soft-context-menu-item devtools-icon {

package/front_end/ui/legacy/themeColors.css

@@ -163,9 +163,27 @@
   --color-nonmatching-bracket-background: rgb(255 0 0 / 7%);
   --color-editor-selection: #cfe8fc;
   --color-editor-selection-blurred: #e0e0e0;
+  --color-trailing-whitespace: rgb(255 0 0 / 5%);
   --color-selected-option: #fff;
   --color-selected-option-background: #1a73e8;
   --color-highlighted-line: rgb(255 255 0 / 50%);
+  --color-search-match-border: rgb(128 128 128);
+  --color-selected-search-match: var(--color-text-primary);
+  --color-selected-search-match-background: rgb(241 234 0);
+  --color-coverage-used: #63acbe;
+  --color-execution-line-background: rgb(0 59 255 / 10%);
+  --color-execution-line-outline: rgb(64 115 244);
+  --color-execution-token-background: rgb(15 72 252 / 35%);
+  --color-continue-to-location: rgb(5 65 255 / 10%);
+  --color-continue-to-location-hover: rgb(15 72 252 / 35%);
+  --color-continue-to-location-hover-border: rgb(121 141 254);
+  --color-continue-to-location-async: rgb(58 162 8 / 30%);
+  --color-continue-to-location-async-hover: rgb(75 179 6 / 55%);
+  --color-continue-to-location-async-hover-border: rgb(100 154 100);
+  --color-evaluated-expression: rgb(255 255 11 / 25%);
+  --color-evaluated-expression-border: rgb(163 41 34);
+  --color-variable-values: #ffe3c7;
+  --color-non-breakable-line: rgb(128 128 128 / 40%);
 }
 
 .-theme-with-dark-background {
@@ -285,7 +303,25 @@
   --color-nonmatching-bracket-background: initial;
   --color-editor-selection: hsl(207deg 88% 22%);
   --color-editor-selection-blurred: #454545;
+  --color-trailing-whitespace: rgb(255 0 0 / 5%);
   --color-selected-option: #fff;
   --color-selected-option-background: #0e639c;
   --color-highlighted-line: hsl(133deg 100% 30% / 50%);
+  --color-search-match-border: rgb(128 128 128);
+  --color-selected-search-match: #eee;
+  --color-selected-search-match-background: hsl(133deg 100% 30%);
+  --color-coverage-used: rgb(65 138 156);
+  --color-execution-line-background: rgb(0 154 17 / 30%);
+  --color-execution-line-outline: #33cc6b;
+  --color-execution-token-background: rgb(132 237 78 / 20%);
+  --color-continue-to-location: rgb(0 173 56 / 35%);
+  --color-continue-to-location-hover: rgb(0 173 56 / 35%);
+  --color-continue-to-location-hover-border: #33cc6b;
+  --color-continue-to-location-async: rgb(87 238 0 / 20%);
+  --color-continue-to-location-async-hover: rgb(128 241 48 / 50%);
+  --color-continue-to-location-async-hover-border: rgb(101 155 101);
+  --color-evaluated-expression: rgb(71 70 0 / 75%);
+  --color-evaluated-expression-border: rgb(221 99 92);
+  --color-variable-values: rgb(56 28 0);
+  --color-non-breakable-line: rgb(127 127 127 / 40%);
 }

package/front_end/ui/legacy/theme_support/theme_support_impl.ts

@@ -35,7 +35,9 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as Root from '../../../core/root/root.js';
+
+import inspectorSyntaxHighlightStyles from '../inspectorSyntaxHighlight.css.legacy.js';
+import inspectorSyntaxHighlightDarkStyles from '../inspectorSyntaxHighlightDark.css.legacy.js';
 
 let themeSupportInstance: ThemeSupport;
 
@@ -112,9 +114,9 @@ export class ThemeSupport {
 
   injectHighlightStyleSheets(element: Element|ShadowRoot): void {
     this.injectingStyleSheet = true;
-    this.appendStyle(element, 'ui/legacy/inspectorSyntaxHighlight.css');
+    this.appendStyle(element, inspectorSyntaxHighlightStyles);
     if (this.themeNameInternal === 'dark') {
-      this.appendStyle(element, 'ui/legacy/inspectorSyntaxHighlightDark.css');
+      this.appendStyle(element, inspectorSyntaxHighlightDarkStyles);
     }
     this.injectingStyleSheet = false;
   }
@@ -123,13 +125,9 @@ export class ThemeSupport {
    * Note: this is a duplicate of the function in ui/utils. It exists here
    * so there is no circular dependency between ui/utils and theme_support.
    */
-  private appendStyle(node: Node, cssFile: string): void {
-    const content = Root.Runtime.cachedResources.get(cssFile) || '';
-    if (!content) {
-      console.error(cssFile + ' not preloaded. Check module.json');
-    }
+  private appendStyle(node: Node, {cssContent}: {cssContent: string}): void {
     const styleElement = document.createElement('style');
-    styleElement.textContent = content;
+    styleElement.textContent = cssContent;
     node.appendChild(styleElement);
   }
 

package/front_end/ui/legacy/utils/append-style.ts

@@ -4,10 +4,15 @@
 
 import * as Root from '../../../core/root/root.js';
 
-export function appendStyle(node: Node, cssFile: string): void {
-  const content = Root.Runtime.cachedResources.get(cssFile) || '';
-  if (!content) {
-    console.error(cssFile + ' not preloaded. Check module.json');
+export function appendStyle(node: Node, cssReference: string|{cssContent: string}): void {
+  let content: string;
+  if (typeof cssReference === 'string') {
+    content = Root.Runtime.cachedResources.get(cssReference) || '';
+    if (!content) {
+      console.error(cssReference + ' not preloaded. Check module.json');
+    }
+  } else {
+    content = cssReference.cssContent;
   }
   const styleElement = document.createElement('style');
   styleElement.textContent = content;

package/front_end/ui/legacy/utils/create-shadow-root-with-core-styles.ts

@@ -7,7 +7,7 @@ import {focusChanged} from './focus-changed.js';
 import {injectCoreStyles} from './inject-core-styles.js';
 
 interface Options {
-  cssFile?: string|CSSStyleSheet[];
+  cssFile?: string|CSSStyleSheet[]|{cssContent: string};
   delegatesFocus?: boolean;
 }
 
@@ -22,7 +22,7 @@ export function createShadowRootWithCoreStyles(element: Element, options: Option
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});
   injectCoreStyles(shadowRoot);
-  if (typeof cssFile === 'string') {
+  if (typeof cssFile === 'string' || (cssFile !== undefined && 'cssContent' in cssFile)) {
     appendStyle(shadowRoot, cssFile);
   } else if (cssFile) {
     shadowRoot.adoptedStyleSheets = cssFile;

package/front_end/ui/legacy/utils/inject-core-styles.ts

@@ -2,14 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import inspectorCommonStyles from '../inspectorCommon.css.legacy.js';
+import textButtonStyles from '../textButton.css.legacy.js';
 import * as ThemeSupport from '../theme_support/theme_support.js';
+import themeColorsStyles from '../themeColors.css.legacy.js';
+
 import {appendStyle} from './append-style.js';
 
 export function injectCoreStyles(root: Element|ShadowRoot): void {
-  // TODO: Migrate inspectorCommpon.css last https://crbug.com/1222666
-  appendStyle(root, 'ui/legacy/inspectorCommon.css');
-  appendStyle(root, 'ui/legacy/textButton.css');
-  appendStyle(root, 'ui/legacy/themeColors.css');
+  appendStyle(root, inspectorCommonStyles);
+  appendStyle(root, textButtonStyles);
+  appendStyle(root, themeColorsStyles);
 
   ThemeSupport.ThemeSupport.instance().injectHighlightStyleSheets(root);
   ThemeSupport.ThemeSupport.instance().injectCustomStyleSheets(root);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.940714"
+  "version": "1.0.942529"
 }

package/scripts/build/generate_css_js_files.js

@@ -4,34 +4,48 @@
 const fs = require('fs');
 const path = require('path');
 const CleanCSS = require('clean-css');
-const [, , isDebugString, targetName, srcDir, targetGenDir, files] = process.argv;
+const [, , isDebugString, legacyString, targetName, srcDir, targetGenDir, files] = process.argv;
 
 const filenames = files.split(',');
 const configFiles = [];
 const cleanCSS = new CleanCSS();
 const isDebug = isDebugString === 'true';
+const isLegacy = legacyString === 'true';
 
 for (const fileName of filenames) {
   let output = fs.readFileSync(path.join(srcDir, fileName), {encoding: 'utf8', flag: 'r'});
   output = output.replace(/\`/g, '\\\'');
   output = output.replace(/\\/g, '\\\\');
 
+  const stylesheetContents = isDebug ? output : cleanCSS.minify(output).styles;
+
+  let exportStatement;
+  if (isLegacy) {
+    exportStatement = `export default {
+  cssContent: \`${stylesheetContents}\`
+};`;
+  } else {
+    exportStatement = `const styles = new CSSStyleSheet();
+styles.replaceSync(
+\`${stylesheetContents}
+/*# sourceURL=${fileName} */
+\`);
+export default styles;`;
+  }
+
+  const generatedFileName = `${fileName}${isLegacy ? '.legacy' : ''}.js`;
+
   fs.writeFileSync(
-      path.join(targetGenDir, fileName + '.js'),
+      path.join(targetGenDir, generatedFileName),
       `// Copyright ${new Date().getFullYear()} The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 // IMPORTANT: this file is auto generated. Please do not edit this file.
 /* istanbul ignore file */
-const styles = new CSSStyleSheet();
-styles.replaceSync(
-\`${isDebug ? output : cleanCSS.minify(output).styles}
-/*# sourceURL=${fileName} */
-\`);
-export default styles;
+${exportStatement}
 `);
 
-  configFiles.push(`\"${fileName}.js\"`);
+  configFiles.push(`\"${generatedFileName}\"`);
 }
 
 fs.writeFileSync(path.join(targetGenDir, `${targetName}-tsconfig.json`), `{

package/scripts/build/ninja/generate_css.gni

@@ -18,6 +18,7 @@ template("generate_css") {
 
     args = [
       "$is_debug",
+      "${invoker.legacy}",
       target_name,
       _src,
       _dest,
@@ -26,7 +27,11 @@ template("generate_css") {
 
     outputs = []
     foreach(_input, sources) {
-      outputs += [ "$target_gen_dir/$_input.js" ]
+      _file_name = _input
+      if (invoker.legacy) {
+        _file_name = "$_file_name.legacy"
+      }
+      outputs += [ "$target_gen_dir/$_file_name.js" ]
     }
 
     data = outputs
@@ -38,3 +43,7 @@ template("generate_css") {
     }
   }
 }
+
+set_defaults("generate_css") {
+  legacy = false
+}

package/scripts/eslint_rules/lib/check_css_import.js

@@ -31,10 +31,10 @@ module.exports = {
       ImportDeclaration(node) {
         const importPath = path.normalize(node.source.value);
 
-        if (importPath.endsWith('.css.js')) {
+        if (importPath.endsWith('.css.js') || importPath.endsWith('.css.legacy.js')) {
           const importingFileName = path.resolve(context.getFilename());
           const exportingFileName = path.resolve(path.dirname(importingFileName), importPath);
-          const importedCSS = exportingFileName.replace(/\.js$/, '');
+          const importedCSS = exportingFileName.replace(/(\.legacy)?\.js$/, '');
 
           if (!fs.existsSync(importedCSS)) {
             context.report({

package/scripts/eslint_rules/tests/check_css_import_test.js

@@ -14,6 +14,10 @@ ruleTester.run('check_css_import', rule, {
       code: 'import styles from \'./check_css_import_test_file.css.js\';',
       filename: 'scripts/eslint_rules/tests/file.ts',
     },
+    {
+      code: 'import styles from \'./check_css_import_test_file.css.legacy.js\';',
+      filename: 'scripts/eslint_rules/tests/file.ts',
+    },
     {
       code: 'import styles from \'../../../scripts/eslint_rules/tests/check_css_import_test_file.css.js\';',
       filename: 'front_end/ui/components/file.ts',
@@ -29,6 +33,14 @@ ruleTester.run('check_css_import', rule, {
         message: 'File styles.css does not exist. Check you are importing the correct file.',
       }],
     },
+    {
+      // Files that do not exist are caught
+      code: 'import styles from \'styles.css.legacy.js\';',
+      filename: 'front_end/ui/components/component/file.ts',
+      errors: [{
+        message: 'File styles.css does not exist. Check you are importing the correct file.',
+      }],
+    },
     {
       // Filename typos are caught
       code: 'import styles from \'../../../scripts/eslint_rules/test/check_css_import_tests_file.css.js\';',

package/front_end/panels/application/module.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui",
-    "panels/network"
-  ]
-}

package/front_end/panels/emulation/module.json

@@ -1,11 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "deviceModeToolbar.css",
-    "deviceModeView.css",
-    "inspectedPagePlaceholder.css",
-    "mediaQueryInspector.css"
-  ]
-}

package/front_end/panels/issues/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "panels/network",
-    "ui/legacy"
-  ]
-}

package/front_end/panels/layer_viewer/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
-  ]
-}

package/front_end/panels/media/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "ui/legacy/components/perf_ui"
-  ]
-}

package/front_end/panels/network/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy/components/perf_ui",
-    "ui/legacy"
-  ]
-}

package/front_end/panels/security/module.json

@@ -1,5 +0,0 @@
-{
-    "dependencies": [
-    "panels/network"
-  ]
-}