chrome-devtools-frontend 1.0.940255 → 1.0.942095

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/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/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/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/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.940255"
+  "version": "1.0.942095"
 }

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/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"
-  ]
-}

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

@@ -1,13 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ],
-    "resources": [
-    "chartViewport.css",
-    "filmStripView.css",
-    "flameChart.css",
-    "overviewGrid.css",
-    "timelineGrid.css",
-    "timelineOverviewInfo.css"
-  ]
-}