chrome-devtools-frontend 1.0.941095 → 1.0.941208

package/config/gni/all_devtools_files.gni

@@ -63,13 +63,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/network_test_runner/network_test_runner.js",
   "front_end/panels/network/module.json",
   "front_end/entrypoints/node_main/nodeConnectionsPanel.css",
-  "front_end/ui/legacy/components/perf_ui/chartViewport.css",
-  "front_end/ui/legacy/components/perf_ui/filmStripView.css",
-  "front_end/ui/legacy/components/perf_ui/flameChart.css",
-  "front_end/ui/legacy/components/perf_ui/module.json",
-  "front_end/ui/legacy/components/perf_ui/overviewGrid.css",
-  "front_end/ui/legacy/components/perf_ui/timelineGrid.css",
-  "front_end/ui/legacy/components/perf_ui/timelineOverviewInfo.css",
   "front_end/legacy_test_runner/performance_test_runner/performance_test_runner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineDataTestRunner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineTestRunner.js",

package/config/gni/devtools_grd_files.gni

@@ -52,6 +52,7 @@ grd_files_release_sources = [
   "front_end/Images/elements_panel_icon.svg",
   "front_end/Images/errorWave.svg",
   "front_end/Images/error_icon.svg",
+  "front_end/Images/feedback_button_icon.svg",
   "front_end/Images/feedback_thin_16x16_icon.svg",
   "front_end/Images/flex-direction-icon.svg",
   "front_end/Images/flex-nowrap-icon.svg",
@@ -504,7 +505,6 @@ grd_files_release_sources = [
   "front_end/ui/legacy/components/perf_ui/perf_ui-legacy.js",
   "front_end/ui/legacy/components/perf_ui/perf_ui-meta.js",
   "front_end/ui/legacy/components/perf_ui/perf_ui.js",
-  "front_end/ui/legacy/components/perf_ui/perf_ui_module.js",
   "front_end/ui/legacy/components/quick_open/quick_open-legacy.js",
   "front_end/ui/legacy/components/quick_open/quick_open-meta.js",
   "front_end/ui/legacy/components/quick_open/quick_open.js",
@@ -1537,7 +1537,13 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/perf_ui/PieChart.js",
   "front_end/ui/legacy/components/perf_ui/TimelineGrid.js",
   "front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.js",
+  "front_end/ui/legacy/components/perf_ui/chartViewport.css.legacy.js",
+  "front_end/ui/legacy/components/perf_ui/filmStripView.css.legacy.js",
+  "front_end/ui/legacy/components/perf_ui/flameChart.css.legacy.js",
+  "front_end/ui/legacy/components/perf_ui/overviewGrid.css.legacy.js",
   "front_end/ui/legacy/components/perf_ui/pieChart.css.js",
+  "front_end/ui/legacy/components/perf_ui/timelineGrid.css.legacy.js",
+  "front_end/ui/legacy/components/perf_ui/timelineOverviewInfo.css.js",
   "front_end/ui/legacy/components/quick_open/CommandMenu.js",
   "front_end/ui/legacy/components/quick_open/FilteredListWidget.js",
   "front_end/ui/legacy/components/quick_open/HelpQuickOpen.js",

package/config/gni/devtools_image_files.gni

@@ -64,6 +64,7 @@ devtools_svg_sources = [
   "elements_panel_icon.svg",
   "errorWave.svg",
   "error_icon.svg",
+  "feedback_button_icon.svg",
   "feedback_thin_16x16_icon.svg",
   "flex-direction-icon.svg",
   "flex-nowrap-icon.svg",

package/front_end/.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
         'rulesdir/ban_style_tags_in_lit_html': 2,
         'rulesdir/ban_a_tags_in_lit_html': 2,
         'rulesdir/check_component_naming': 2,
+        'rulesdir/check_css_import': 2,
         'rulesdir/check_was_shown_methods': 2,
         'rulesdir/static_custom_event_names': 2,
         'rulesdir/lit_html_host_this': 2,

package/front_end/Images/src/feedback_button_icon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.3335 5.83325H6.66683C5.9335 5.83325 5.34016 6.43325 5.34016 7.16659L5.3335 19.1666L8.00016 16.4999H17.3335C18.0668 16.4999 18.6668 15.8999 18.6668 15.1666V7.16659C18.6668 6.43325 18.0668 5.83325 17.3335 5.83325ZM17.3335 15.1666H7.44683L7.0535 15.5599L6.66683 15.9466V7.16659H17.3335V15.1666ZM11.3335 12.4999H12.6668V13.8333H11.3335V12.4999ZM11.3335 8.49992H12.6668V11.1666H11.3335V8.49992Z" fill="black"/>
+</svg>

package/front_end/core/i18n/locales/en-US.json

@@ -11453,6 +11453,9 @@
   "ui/components/linear_memory_inspector/ValueInterpreterSettings.ts | otherGroup": {
     "message": "Other"
   },
+  "ui/components/panel_feedback/FeedbackButton.ts | feedback": {
+    "message": "Feedback"
+  },
   "ui/components/panel_feedback/PanelFeedback.ts | previewFeature": {
     "message": "Preview feature"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -11453,6 +11453,9 @@
   "ui/components/linear_memory_inspector/ValueInterpreterSettings.ts | otherGroup": {
     "message": "Ôt́ĥér̂"
   },
+  "ui/components/panel_feedback/FeedbackButton.ts | feedback": {
+    "message": "F̂éêd́b̂áĉḱ"
+  },
   "ui/components/panel_feedback/PanelFeedback.ts | previewFeature": {
     "message": "P̂ŕêv́îéŵ f́êát̂úr̂é"
   },

package/front_end/entrypoints/shell/shell.json

@@ -4,7 +4,6 @@
     { "name": "ui/legacy/components/text_editor", "type": "autostart" },
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },
 
-    { "name": "ui/legacy/components/perf_ui" },
     { "name": "panels/profiler" }
   ]
 }

package/front_end/global_typings/global_defs.d.ts

@@ -25,3 +25,8 @@ declare module '*.css.js' {
   const styles: CSSStyleSheet;
   export default styles;
 }
+
+declare module '*.css.legacy.js' {
+  const styles: {cssContent: string};
+  export default styles;
+}

package/front_end/legacy_test_runner/console_test_runner/console_test_runner.js

@@ -113,6 +113,14 @@ ConsoleTestRunner.prepareConsoleMessageText = function(messageElement) {
   return messageText;
 };
 
+/**
+ * @param {!Element} messageElement
+ * @return {string}
+ */
+ConsoleTestRunner.prepareConsoleMessageTextTrimmed = function(messageElement) {
+  return ConsoleTestRunner.prepareConsoleMessageText(messageElement).replace(/[ ]+/g, ' ');
+};
+
 /**
  * @param {!Console.ConsoleViewMessage} viewMessage
  * @param {boolean} forceInvalidate
@@ -334,15 +342,19 @@ ConsoleTestRunner.dumpConsoleMessagesWithStyles = function() {
 
 /**
  * @param {boolean=} sortMessages
+ * @param {boolean=} trimMessages
  */
-ConsoleTestRunner.dumpConsoleMessagesWithClasses = async function(sortMessages) {
+ConsoleTestRunner.dumpConsoleMessagesWithClasses = async function(sortMessages, trimMessages) {
   const result = [];
   const messageViews = Console.ConsoleView.instance().visibleViewMessages;
   for (let i = 0; i < messageViews.length; ++i) {
     const element = messageViews[i].element();
     const contentElement = messageViews[i].contentElement();
     await TestRunner.waitForPendingLiveLocationUpdates();
-    const messageText = ConsoleTestRunner.prepareConsoleMessageText(element);
+    let messageText = ConsoleTestRunner.prepareConsoleMessageText(element);
+    if (trimMessages) {
+      messageText = messageText.replace(/[ ]+/g, ' ');
+    }
     result.push(messageText + ' ' + element.getAttribute('class') + ' > ' + contentElement.getAttribute('class'));
   }
   if (sortMessages) {

package/front_end/legacy_test_runner/test_runner/TestRunner.js

@@ -393,6 +393,14 @@ export function textContentWithLineBreaks(node) {
   return buffer;
 }
 
+/**
+ * @param {!Node} node
+ * @return {string}
+ */
+export function textContentWithLineBreaksTrimmed(node) {
+  return textContentWithLineBreaks(node).replace(/[ ]+/g, ' ');
+}
+
 /**
  * @param {!Node} node
  * @return {string}
@@ -1459,6 +1467,7 @@ TestRunner.showPanel = showPanel;
 TestRunner.createKeyEvent = createKeyEvent;
 TestRunner.safeWrap = safeWrap;
 TestRunner.textContentWithLineBreaks = textContentWithLineBreaks;
+TestRunner.textContentWithLineBreaksTrimmed = textContentWithLineBreaksTrimmed;
 TestRunner.textContentWithoutStyles = textContentWithoutStyles;
 TestRunner.evaluateInPagePromise = evaluateInPagePromise;
 TestRunner.callFunctionInPageAsync = callFunctionInPageAsync;

package/front_end/panels/application/module.json

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

package/front_end/panels/layer_viewer/module.json

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

package/front_end/panels/media/module.json

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

package/front_end/panels/network/module.json

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

package/front_end/panels/profiler/module.json

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

package/front_end/panels/timeline/module.json

@@ -2,7 +2,6 @@
   "dependencies": [
     "ui/legacy",
     "panels/layer_viewer",
-    "ui/legacy/components/perf_ui",
     "panels/profiler"
   ]
 }

package/front_end/ui/components/docs/panel_feedback/button.html

@@ -0,0 +1,25 @@
+<!--
+  Copyright 2021 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.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Feedback button</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./button.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_feedback/button.ts

@@ -0,0 +1,18 @@
+// Copyright 2021 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.
+
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelFeedback from '../../../components/panel_feedback/panel_feedback.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const component = new PanelFeedback.FeedbackButton.FeedbackButton();
+
+component.data = {
+  feedbackUrl: 'https://www.example.com',
+};
+
+document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -0,0 +1,67 @@
+// Copyright 2021 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.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as Buttons from '../buttons/buttons.js';
+
+const UIStrings = {
+  /**
+   * @description The title of the button that leads to the feedback form.
+   */
+  feedback: 'Feedback',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/FeedbackButton.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const feedbackIconUrl = new URL('../../../Images/feedback_button_icon.svg', import.meta.url).toString();
+
+export interface FeedbackButtonData {
+  feedbackUrl: string;
+}
+export class FeedbackButton extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+
+  #props: FeedbackButtonData = {
+    feedbackUrl: '',
+  };
+
+  set data(data: FeedbackButtonData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #onFeedbackClick(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.#props.feedbackUrl);
+  }
+
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('FeedbackButton render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <${Buttons.Button.Button.litTagName}
+          @click=${this.#onFeedbackClick}
+          .iconUrl=${feedbackIconUrl}
+          .variant=${Buttons.Button.Variant.SECONDARY}
+      >${i18nString(UIStrings.feedback)}</${Buttons.Button.Button.litTagName}>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-feedback-button', FeedbackButton);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-feedback-button': FeedbackButton;
+  }
+}

package/front_end/ui/components/panel_feedback/panel_feedback.ts

@@ -2,4 +2,5 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as FeedbackButton from './FeedbackButton.js';
 export * as PanelFeedback from './PanelFeedback.js';

package/front_end/ui/legacy/Widget.ts

@@ -458,7 +458,7 @@ export class Widget {
     this.doResize();
   }
 
-  registerRequiredCSS(cssFile: string): void {
+  registerRequiredCSS(cssFile: string|{cssContent: string}): void {
     if (this.isWebComponent) {
       Utils.appendStyle((this.shadowRoot as DocumentFragment), cssFile);
     } else {

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as UI from '../../legacy.js';
 
+import chartViewPortStyles from './chartViewport.css.legacy.js';
 import {MinimalTimeWindowMs} from './FlameChart.js';
 
 export interface ChartViewportDelegate {
@@ -51,7 +52,7 @@ export class ChartViewport extends UI.Widget.VBox {
 
   constructor(delegate: ChartViewportDelegate) {
     super();
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/chartViewport.css');
+    this.registerRequiredCSS(chartViewPortStyles);
 
     this.delegate = delegate;
 

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -9,6 +9,8 @@ import * as Platform from '../../../../core/platform/platform.js';
 import type * as SDK from '../../../../core/sdk/sdk.js';
 import * as UI from '../../legacy.js';
 
+import filmStripViewStyles from './filmStripView.css.legacy.js';
+
 const UIStrings = {
   /**
   *@description Element title in Film Strip View of the Performance panel
@@ -43,7 +45,7 @@ export class FilmStripView extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   constructor() {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/filmStripView.css');
+    this.registerRequiredCSS(filmStripViewStyles);
     this.contentElement.classList.add('film-strip-view');
     this.statusLabel = this.contentElement.createChild('div', 'label');
     this.reset();

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -42,6 +42,7 @@ import type {ChartViewportDelegate} from './ChartViewport.js';
 import {ChartViewport} from './ChartViewport.js';
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
+import flameChartStyles from './flameChart.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -157,7 +158,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       dataProvider: FlameChartDataProvider, flameChartDelegate: FlameChartDelegate,
       groupExpansionSetting?: Common.Settings.Setting<GroupExpansionState>) {
     super(true);
-    this.registerRequiredCSS('ui/legacy/components/perf_ui/flameChart.css');
+    this.registerRequiredCSS(flameChartStyles);
     this.contentElement.classList.add('flame-chart-main-pane');
     this.groupExpansionSetting = groupExpansionSetting;
     this.groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -35,6 +35,7 @@ import * as UI from '../../legacy.js';
 
 import type {Calculator} from './TimelineGrid.js';
 import {TimelineGrid} from './TimelineGrid.js';
+import overviewGridStyles from './overviewGrid.css.legacy.js';
 
 const UIStrings = {
   /**
@@ -161,7 +162,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
     this.parentElement.addEventListener('wheel', this.onMouseWheel.bind(this), true);
     this.parentElement.addEventListener('dblclick', this.resizeWindowMaximum.bind(this), true);
-    UI.Utils.appendStyle(this.parentElement, 'ui/legacy/components/perf_ui/overviewGrid.css');
+    UI.Utils.appendStyle(this.parentElement, overviewGridStyles);
 
     this.leftResizeElement = parentElement.createChild('div', 'overview-grid-window-resizer') as HTMLElement;
     UI.UIUtils.installDragHandle(

package/front_end/ui/legacy/components/perf_ui/TimelineGrid.ts

@@ -36,6 +36,8 @@ import * as Host from '../../../../core/host/host.js';
 import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
+import timelineGridStyles from './timelineGrid.css.legacy.js';
+
 const labelMap = new Map<HTMLDivElement|HTMLElement, HTMLDivElement>();
 
 export class TimelineGrid {
@@ -47,7 +49,7 @@ export class TimelineGrid {
 
   constructor() {
     this.element = document.createElement('div');
-    UI.Utils.appendStyle(this.element, 'ui/legacy/components/perf_ui/timelineGrid.css');
+    UI.Utils.appendStyle(this.element, timelineGridStyles);
 
     this.dividersElementInternal = this.element.createChild('div', 'resources-dividers');
 

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -36,6 +36,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import type {WindowChangedWithPositionEvent} from './OverviewGrid.js';
 import {Events as OverviewGridEvents, OverviewGrid} from './OverviewGrid.js';
 import type {Calculator} from './TimelineGrid.js';
+import timelineOverviewInfoStyles from './timelineOverviewInfo.css.js';
 
 export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
@@ -426,7 +427,7 @@ export class OverviewInfo {
     this.visible = false;
     this.element = UI.Utils
                        .createShadowRootWithCoreStyles(this.glassPane.contentElement, {
-                         cssFile: 'ui/legacy/components/perf_ui/timelineOverviewInfo.css',
+                         cssFile: [timelineOverviewInfoStyles],
                          delegatesFocus: undefined,
                        })
                        .createChild('div', 'overview-info');

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.941095"
+  "version": "1.0.941208"
 }

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