npm - chrome-devtools-frontend - Versions diffs - 1.0.939473 → 1.0.941208 - Mend

chrome-devtools-frontend 1.0.939473 → 1.0.941208

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

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

@@ -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 ADDED Viewed

@@ -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/helpers/get-stylesheet.ts CHANGED Viewed

@@ -56,4 +56,5 @@ export const CSS_RESOURCES_TO_LOAD_INTO_RUNTIME = [
   'ui/legacy/components/source_frame/jsonView.css',
   'ui/legacy/searchableView.css',
   'ui/legacy/toolbar.css',
+  'ui/legacy/inspectorViewTabbedPane.css',
 ];

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

@@ -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/PanelFeedback.ts ADDED Viewed

@@ -0,0 +1,100 @@
+// 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 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 IconButton from '../icon_button/icon_button.js';
+import panelFeedbackStyles from './panelFeedback.css.js';
+const UIStrings = {
+  /**
+  *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
+  */
+  previewText: 'Our team is actively working on this feature and we would love to know what you think.',
+  /**
+  *@description Link text the user can click to provide feedback to the team.
+  */
+  previewTextFeedbackLink: 'Send us your feedback.',
+  /**
+  *@description Title of the UI section that shows the user that this feature is in preview. Used as the main heading. Not a verb.
+  */
+  previewFeature: 'Preview feature',
+  /**
+  *@description Title of the section to the quick start video and documentation on experimental panels.
+  */
+  videoAndDocumentation: 'Video and documentation',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PanelFeedback.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const previewFeatureUrl = new URL('../../../Images/ic_preview_feature.svg', import.meta.url).toString();
+const videoThumbnailUrl = new URL('../../../Images/preview_feature_video_thumbnail.svg', import.meta.url).toString();
+export interface PanelFeedbackData {
+  feedbackUrl: string;
+  quickStartUrl: string;
+  quickStartLinkText: string;
+}
+export class PanelFeedback extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.render.bind(this);
+  #props: PanelFeedbackData = {
+    feedbackUrl: '',
+    quickStartUrl: '',
+    quickStartLinkText: '',
+  };
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [panelFeedbackStyles];
+  }
+  set data(data: PanelFeedbackData) {
+    this.#props = data;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+  private render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('PanelFeedback render was not scheduled');
+    }
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <div class="preview">
+        <h2 class="flex">
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconPath: previewFeatureUrl,
+            width: '24px',
+            height: '24px',
+            color: 'var(--color-primary)',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+        </h2>
+        <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
+        <div class="video">
+          <div class="thumbnail">
+            <img src=${videoThumbnailUrl} role="presentation" />
+          </div>
+          <div class="video-description">
+            <h3>${i18nString(UIStrings.videoAndDocumentation)}</h3>
+            <x-link class="quick-start-link" href=${this.#props.quickStartUrl}>${this.#props.quickStartLinkText}</x-link>
+          </div>
+        </div>
+      </div>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+ComponentHelpers.CustomElements.defineComponent('devtools-panel-feedback', PanelFeedback);
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-panel-feedback': PanelFeedback;
+  }
+}

package/front_end/ui/components/panel_feedback/panelFeedback.css ADDED Viewed

@@ -0,0 +1,76 @@
+/*
+ * 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.
+ */
+/**
+ * Copyright 2021 Google LLC. All rights reserved.
+ */
+:host {
+  display: block;
+}
+.preview {
+  padding: 12px 16px;
+  border: 1px solid var(--color-details-hairline);
+  color: var(--color-text-primary);
+  font-size: 13px;
+  line-height: 20px;
+  border-radius: 12px;
+  margin: 42px 0;
+  letter-spacing: 0.01em;
+}
+h2 {
+  color: var(--color-primary);
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.01em;
+  margin: 9px 0 14px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: normal;
+}
+h3 {
+  font-size: 13px;
+  line-height: 20px;
+  letter-spacing: 0.04em;
+  color: var(--color-text-primary);
+  margin-bottom: 2px;
+  font-weight: normal;
+}
+.preview p {
+  margin-bottom: 24px;
+}
+.thumbnail {
+  height: 92px;
+}
+.video {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+}
+x-link { /* stylelint-disable-line selector-type-no-unknown */
+  color: var(--color-primary);
+  text-decoration-line: underline;
+}
+x-link.quick-start-link { /* stylelint-disable-line selector-type-no-unknown */
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0.04em;
+}
+.video-description {
+  min-width: min-content;
+  flex-basis: min-content;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,6 @@
+// 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.
+export * as FeedbackButton from './FeedbackButton.js';
+export * as PanelFeedback from './PanelFeedback.js';

package/front_end/ui/components/report_view/reportValue.css CHANGED Viewed

@@ -14,4 +14,5 @@
   color: var(--color-text-primary);
   margin-inline-start: 0;
   padding: 0 6px;
+  overflow-wrap: break-word;
 }

package/front_end/ui/legacy/Widget.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/softContextMenu.css CHANGED Viewed

@@ -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/utils/append-style.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -31,7 +31,7 @@
     "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js",
     "check-gn": "third_party/node/node.py --output scripts/check_gn.js",
     "check-json": "third_party/node/node.py --output scripts/json_validator/validate_module_json.js",
-    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.js && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
     "components-server": "third_party/node/node.py --output scripts/component_server/server.js",
@@ -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.939473"
+  "version": "1.0.941208"
 }

package/scripts/build/generate_css_js_files.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 DELETED Viewed

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