chrome-devtools-frontend 1.0.941208 → 1.0.943182

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

@@ -7,6 +7,9 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
+import xmlTreeStyles from './xmlTree.css.legacy.js';
+import xmlViewStyles from './xmlView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Text to find an item
@@ -25,10 +28,12 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
 
   constructor(parsedXML: Document) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/source_frame/xmlView.css');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.registerRequiredCSS(xmlViewStyles);
     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');
+    // eslint-disable-next-line no-restricted-syntax -- Should import styles https://crbug.com/1106746
+    this.treeOutline.registerRequiredCSS(xmlTreeStyles);
     this.contentElement.appendChild(this.treeOutline.element);
     this.currentSearchFocusIndex = 0;
     this.currentSearchTreeElements = [];

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/textButton.css

@@ -108,8 +108,9 @@
   .text-button:not(:disabled):focus {
     forced-color-adjust: none;
     background-color: ButtonFace;
-    color: ButtonText;
+    color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     border-color: Highlight;
+    outline: 2px solid ButtonText;
     box-shadow: var(--legacy-focus-ring-active-shadow);
   }
 
@@ -117,7 +118,7 @@
   .text-button:not(:disabled):active {
     forced-color-adjust: none;
     background-color: Highlight;
-    color: HighlightText;
+    color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
     box-shadow: var(--legacy-accent-color);
   }
 
@@ -130,14 +131,14 @@
 
   .text-button.primary-button:not(:disabled):focus {
     background-color: Highlight;
-    color: HighlightText;
+    color: HighlightText !important; /* stylelint-disable-line declaration-no-important */
     border-color: ButtonText;
   }
 
   .text-button.primary-button:not(:disabled):hover,
   .text-button.primary-button:not(:disabled):active {
     background-color: HighlightText;
-    color: Highlight;
+    color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     border-color: Highlight;
   }
 }

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/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.941208"
+  "version": "1.0.943182"
 }

package/scripts/check_gn.js

@@ -17,40 +17,6 @@ const gnPath = path.resolve(__dirname, '..', 'BUILD.gn');
 const gnFile = fs.readFileSync(gnPath, 'utf-8');
 const gnLines = gnFile.split('\n');
 
-/**
- * Ensures that generated module files are in the right list in BUILD.gn.
- * This is primarily to avoid remote modules from accidentally getting
- * bundled with the main Chrome binary.
- */
-function checkNonAutostartNonRemoteModules() {
-  const errors = [];
-  const gnVariable = 'non_autostart_non_remote_modules';
-  const lines = selectGNLines(`${gnVariable} = [`, ']');
-  if (!lines.length) {
-    return [
-      'Could not identify non-autostart non-remote modules in gn file',
-      'Please look at: ' + __filename,
-    ];
-  }
-  const text = lines.join('\n');
-  const modules = manifestModules.filter(m => m.type !== 'autostart').map(m => m.name);
-
-  const missingModules = modules.filter(m => !text.includes(`${m}/${path.basename(m)}_module.js`));
-  if (missingModules.length) {
-    errors.push(`Check that you've included [${missingModules.join(', ')}] modules in: ` + gnVariable);
-  }
-
-  // e.g. "lighthouse/lighthouse_module.js" => "lighthouse"
-  const mapLineToModuleName = line => path.dirname(line.substring(1));
-
-  const extraneousModules = lines.map(mapLineToModuleName).filter(module => !modules.includes(module));
-  if (extraneousModules.length) {
-    errors.push(`Found extraneous modules [${extraneousModules.join(', ')}] in: ` + gnVariable);
-  }
-
-  return errors;
-}
-
 /**
  * Ensures that all source files (according to the various module.json files) are
  * listed in BUILD.gn.
@@ -139,7 +105,6 @@ function selectGNLines(startLine, endLine, linesToCheck = gnLines) {
 
 function main() {
   const errors = [
-    ...checkNonAutostartNonRemoteModules(),
     ...checkAllDevToolsFiles(),
   ];
   if (errors.length) {

package/scripts/eslint_rules/lib/es_modules_import.js

@@ -90,14 +90,21 @@ function checkStarImport(context, node, importPath, importPathForErrorMessage, i
   const invalidCrossFolderUsage = !isSameFolder && !isModuleEntrypoint(exportingFileName);
 
   if (invalidSameFolderUsage) {
-    context.report({
-      node,
-      message:
-          'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
-      data: {
-        importPathForErrorMessage,
-      },
-    });
+    // Meta files import their entrypoints and are considered separate entrypoints.
+    // Additionally, any file ending with `-entrypoint.ts` is considered an entrypoint as well.
+    // Therefore, they are allowed to import using a same-namespace star-import.
+    const importingFileIsEntrypoint =
+        importingFileName.endsWith('-entrypoint.ts') || importingFileName.endsWith('-meta.ts');
+    if (!importingFileIsEntrypoint) {
+      context.report({
+        node,
+        message:
+            'Incorrect same-namespace import: "{{importPathForErrorMessage}}". Use "import { Symbol } from \'./relative-file.js\';" instead.',
+        data: {
+          importPathForErrorMessage,
+        },
+      });
+    }
   }
 
   if (invalidCrossFolderUsage) {

package/scripts/eslint_rules/tests/es_modules_import_test.js

@@ -106,6 +106,14 @@ ruleTester.run('es_modules_import', rule, {
       code: 'import * as ConsoleCounters from \'../console_counters/console_counters.js\';',
       filename: 'front_end/panels/console/ConsoleView.ts',
     },
+    {
+      code: 'import * as Elements from \'./elements.js\';',
+      filename: 'front_end/panels/elements/elements-meta.ts',
+    },
+    {
+      code: 'import * as Elements from \'./elements.js\';',
+      filename: 'front_end/panels/elements/elements-entrypoint.ts',
+    },
     // Tests are allowed to import from front_end
     {
       code: 'import * as UI from \'../../../front_end/ui/ui.js\';',

package/front_end/emulated_devices/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "panels/emulation"
-  ],
-  "resources": []
-}

package/front_end/panels/application/module.json

@@ -1,6 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "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/js_profiler/module.json

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

package/front_end/panels/layer_viewer/module.json

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

package/front_end/panels/layers/module.json

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

package/front_end/panels/media/module.json

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

package/front_end/panels/network/module.json

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

package/front_end/panels/profiler/module.json

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

package/front_end/panels/screencast/module.json

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

package/front_end/panels/security/module.json

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

package/front_end/panels/timeline/module.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy",
-    "panels/layer_viewer",
-    "panels/profiler"
-  ]
-}