chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

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

@@ -337,7 +337,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   #initializeDimHighlightSVG(): void {
     // Set up the desaturation mask
     const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
-    const mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
+    const mask = UI.UIUtils.createSVGChild(defs, 'mask');
     mask.id = 'dim-highlight-cutouts';
     /* Within the mask...
         - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
@@ -357,7 +357,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     // `mask` element.
     // The `mixBlendMode` is set to 'saturation', so this rectangle will completely desaturate the area it covers
     // within the mask.
-    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background') as SVGRectElement;
+    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background');
     desaturateRect.setAttribute('width', '100%');
     desaturateRect.setAttribute('height', '100%');
     desaturateRect.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
@@ -374,7 +374,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
     // This polygon is for the bracket beyond the not desaturated area.
     const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
-    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
+    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon');
     bracket.setAttribute('fill', bracketColor);
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {

package/front_end/ui/legacy/components/perf_ui/pieChart.css

@@ -33,7 +33,7 @@
 }
 
 :focus {
-  outline-width: 0;
+  outline-style: none;
 }
 
 .pie-chart-total.selected {

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

@@ -320,7 +320,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 
   linkifyRawLocation(
       rawLocation: SDK.DebuggerModel.Location, fallbackUrl: Platform.DevToolsPath.UrlString,
-      className?: string): Element {
+      className?: string): HTMLElement {
     return this.linkifyScriptLocation(
         rawLocation.debuggerModel.target(), rawLocation.scriptId, fallbackUrl, rawLocation.lineNumber, {
           columnNumber: rawLocation.columnNumber,

package/front_end/ui/legacy/inspectorCommon.css

@@ -35,7 +35,7 @@ body {
 }
 
 :focus {
-  outline-width: 0;
+  outline-style: none;
 }
 
 /* Prevent UA stylesheet from overriding font-family for HTML elements. */
@@ -140,7 +140,8 @@ iframe.widget {
   inset: 0;
 }
 
-.hidden {
+[hidden],
+.hidden { /* TODO(crbug.com/458299714): remove the class */
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 

package/mcp/mcp.ts

@@ -7,6 +7,7 @@
  * tests added to foundation_unittests. See front_end/core/i18n/BUILD.gn as an
  * example.
  */
+export * as Common from '../front_end/core/common/common.js';
 export * as I18n from '../front_end/core/i18n/i18n.js';
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export {
@@ -16,4 +17,17 @@ export {
   PerformanceTraceFormatter
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js';
 export {AgentFocus} from '../front_end/models/ai_assistance/performance/AIContext.js';
-export * as TraceEngine from '../front_end/models/trace/trace.js';
+export {Issue} from '../front_end/models/issues_manager/Issue.js';
+export {
+  AggregatedIssue,
+  Events as IssueAggregatorEvents,
+  IssueAggregator
+} from '../front_end/models/issues_manager/IssueAggregator.js';
+export {
+  createIssuesFromProtocolIssue,
+  Events as IssuesManagerEvents,
+  type EventTypes as IssuesManagerEventTypes,
+  IssuesManager
+} from '../front_end/models/issues_manager/IssuesManager.js';
+export {findTitleFromMarkdownAst} from '../front_end/models/issues_manager/MarkdownIssueDescription.js';
+export * as Marked from '../front_end/third_party/marked/marked.js';

package/package.json

@@ -62,6 +62,7 @@
     "eslint-plugin-eslint-plugin": "7.0.0",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-jsdoc": "60.5.0",
+    "eslint-plugin-lit": "2.1.1",
     "eslint-plugin-mocha": "10.5.0",
     "glob": "7.1.7",
     "globals": "16.4.0",
@@ -102,5 +103,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1539728"
+  "version": "1.0.1541169"
 }

package/front_end/core/protocol_client/NodeURL.ts

@@ -1,40 +0,0 @@
-// Copyright 2018 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Common from '../common/common.js';
-import * as Host from '../host/host.js';
-import type * as Platform from '../platform/platform.js';
-
-export class NodeURL {
-  static patch(object: object): void {
-    process(object, '');
-
-    function process(object: {url?: string}, path: string): void {
-      if (object.url && NodeURL.isPlatformPath(object.url, Host.Platform.isWin())) {
-        // object.url can be of both types: RawPathString and UrlString
-        object.url = Common.ParsedURL.ParsedURL.rawPathToUrlString(object.url as Platform.DevToolsPath.RawPathString);
-      }
-      for (const entry of Object.entries(object)) {
-        const key = entry[0];
-        const value = entry[1];
-        const entryPath = path + '.' + key;
-        if (entryPath !== '.result.result.value' && value !== null && typeof value === 'object') {
-          process(
-              (value as {
-                url: string,
-              }),
-              entryPath);
-        }
-      }
-    }
-  }
-
-  static isPlatformPath(fileSystemPath: string, isWindows: boolean): boolean {
-    if (isWindows) {
-      const re = /^([a-z]:[\/\\]|\\\\)/i;
-      return re.test(fileSystemPath);
-    }
-    return fileSystemPath.length ? fileSystemPath[0] === '/' : false;
-  }
-}

package/front_end/ui/components/docs/combo_box/basic.html

@@ -1,20 +0,0 @@
-<!--
-  Copyright 2025 The Chromium Authors
-  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>Basic ComboBox example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/combo_box/basic.ts

@@ -1,49 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as UI from '../../../legacy/legacy.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-function comboBoxExample({tabIndex, disabled}: {
-  tabIndex: number,
-  disabled: boolean,
-}): HTMLElement {
-  const example = document.createElement('div');
-  example.style.marginTop = '20px';
-  const disabledExplanation = document.createElement('div');
-  const tabbableExplanation = document.createElement('div');
-  const component = UI.UIUtils.createSelect('Select an option', ['Hamster', 'Mouse', 'Cat']);
-  component.disabled = disabled;
-  component.tabIndex = tabIndex;
-  disabledExplanation.textContent = `is disabled? ${component.disabled}`;
-  tabbableExplanation.textContent = `is tabbable? ${component.tabIndex >= 0}`;
-
-  example.appendChild(component);
-  example.appendChild(disabledExplanation);
-  example.appendChild(tabbableExplanation);
-  return example;
-}
-
-function init(): void {
-  const container = document.getElementById('container');
-  if (!container) {
-    return;
-  }
-
-  container.style.padding = '42px 42px';
-  container.style.margin = '42px 42px';
-  container.style.border = '1px solid rgb(0 0 0 / 20%)';
-
-  // Basic
-  container.appendChild(comboBoxExample({tabIndex: 0, disabled: false}));
-
-  // Not tab reachable
-  container.appendChild(comboBoxExample({tabIndex: -1, disabled: false}));
-
-  // Disabled
-  container.appendChild(comboBoxExample({tabIndex: 0, disabled: true}));
-}
-
-init();

package/front_end/ui/components/docs/context_menu/basic.html

@@ -1,45 +0,0 @@
-<!--
-  Copyright 2025 The Chromium Authors
-  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>Context menu example</title>
-    <style>
-      body {
-        overflow: auto  !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      div:not(.vbox) {
-        width: 500px;
-        padding: 25px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
-        background-color: var(--sys-color-neutral-container);
-        border-radius: var(--sys-shape-corner-medium);
-        text-align: center;
-
-        p {
-          vertical-align: middle;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <header>DevTools menu button (lit-html)</header>
-    <div id="menu-button"></div>
-    <header>Various simple menu items (imperative API)</header>
-    <div id="simple-items"><p>Right-click here</p></div>
-    <header>Custom sections (imperative API)</header>
-    <div id="custom-section"><p>Right-click here</p></div>
-    <header>Sub menu (imperative API)</header>
-    <div id="sub-menu"><p>Right-click here</p></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/legacy_color_invert/basic.html

@@ -1,77 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  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>Legacy color input</title>
-    <style>
-      #container {
-        margin: 20px;
-        padding: 0;
-      }
-
-      form {
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: 20px;
-      }
-
-      form input[type="submit"] {
-        margin-left: 20px;
-        padding: 10px;
-        font-size: 20px;
-        background: var(--sys-color-primary);
-        color: #fff;
-        border: 1px solid var(--sys-color-divider);
-        cursor: pointer;
-      }
-
-      form input[type="submit"]:hover {
-        background: var(--color-primary-variant);
-      }
-
-     .text-input, span, pre {
-       display: block;
-       font-size: 16px;
-     }
-
-     .text-input input {
-       display: block;
-       margin: 10px 0 0 0;
-       padding: 10px;
-       border: 1px solid #ccc;
-     }
-
-     pre {
-       margin: 10px 0;
-       padding: 10px;
-       border: 1px solid #ccc;
-       user-select: all !important;
-     }
-    </style>
-  </head>
-  <body>
-    <script type="module" src="./basic.js"></script>
-    <div id="container">
-      <form>
-        <label class="text-input">
-        CSS property:
-          <input type="text" id="css-property" placeholder="background-color"/>
-        </label>
-        <label class="text-input">
-          CSS value:
-          <input type="text" id="css-value" placeholder="rgb(10 10 10)"/>
-        </label>
-        <input type="submit" value="Go!" />
-      </form>
-
-      <span>Dark mode legacy value:</span>
-      <pre><code id="output"></code></pre>
-    </div>
-  </body>
-</html>

package/front_end/ui/components/docs/legacy_color_invert/basic.ts

@@ -1,98 +0,0 @@
-// Copyright 2020 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Common from '../../../../core/common/common.js';
-import * as Platform from '../../../../core/platform/platform.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-const form = document.querySelector<HTMLFormElement>('form');
-if (!form) {
-  throw new Error('could not find form');
-}
-
-form.addEventListener('submit', event => {
-  event.preventDefault();
-  const property = form.querySelector<HTMLInputElement>('#css-property')?.value;
-  const value = form.querySelector<HTMLInputElement>('#css-value')?.value;
-  if (!property || !value) {
-    return;
-  }
-  const output = legacyInvertVariableForDarkMode(property, value);
-  const outputElem = document.querySelector<HTMLElement>('#output');
-  if (outputElem) {
-    outputElem.innerText = output;
-  }
-});
-
-/**
- * This code is largely copy and pasted from the legacy ThemeSupport
- * around color patching. This is because we are working towards removing the
- * legacy color patching, but still may need to be able to generate legacy dark
- * mode values for light colors during the migration. This doc exists for that
- * reason.
- */
-
-type ColorUsage = 'unknown'|'foreground'|'background';
-
-function patchHSLA(hsla: number[], colorUsage: ColorUsage): void {
-  const hue = hsla[0];
-  const sat = hsla[1];
-  let lit: number = hsla[2];
-  const alpha = hsla[3];
-
-  const minCap = colorUsage === 'background' ? 0.14 : 0;
-  const maxCap = colorUsage === 'foreground' ? 0.9 : 1;
-  lit = 1 - lit;
-  if (lit < minCap * 2) {
-    lit = minCap + lit / 2;
-  } else if (lit > 2 * maxCap - 1) {
-    lit = maxCap - 1 / 2 + lit / 2;
-  }
-  hsla[0] = Platform.NumberUtilities.clamp(hue, 0, 1);
-  hsla[1] = Platform.NumberUtilities.clamp(sat, 0, 1);
-  hsla[2] = Platform.NumberUtilities.clamp(lit, 0, 1);
-  hsla[3] = Platform.NumberUtilities.clamp(alpha, 0, 1);
-}
-
-function patchColor(colorAsText: string, colorUsage: ColorUsage): string {
-  const color = Common.Color.parse(colorAsText)?.as(Common.Color.Format.HSL);
-  if (!color) {
-    return colorAsText;
-  }
-  const hsla: Common.ColorUtils.Color4D = [color.h, color.s, color.l, color.alpha ?? 1];
-  patchHSLA(hsla, colorUsage);
-
-  const rgba = Common.Color.hsl2rgb(hsla);
-  const outColor = new Common.Color.Legacy(rgba, Common.Color.Format.RGBA);
-  let outText = outColor.asString();
-  if (!outText) {
-    outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
-  }
-  return outText || colorAsText;
-}
-
-function legacyInvertVariableForDarkMode(cssProperty: string, cssValue: string): string {
-  let colorUsage: ColorUsage = 'unknown';
-  if (cssProperty.indexOf('background') === 0 || cssProperty.indexOf('border') === 0) {
-    colorUsage = 'background';
-  }
-  if (cssProperty.indexOf('background') === -1) {
-    colorUsage = 'foreground';
-  }
-
-  const items = cssValue.replace(Common.Color.Regex, '\0$1\0').split('\0');
-  const output = [];
-  for (const item of items) {
-    if (!item) {
-      continue;
-    }
-    const newColor = patchColor(item, colorUsage);
-    output.push(newColor);
-  }
-  return output.join(' ');
-}

package/front_end/ui/components/docs/linkifier/simple-url.html

@@ -1,25 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  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>Linkifier example with URL</title>
-    <style>
-      body {
-        padding: 50px;
-      }
-    </style>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./simple-url.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/linkifier/simple-url.ts

@@ -1,25 +0,0 @@
-// Copyright 2020 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as Platform from '../../../../core/platform/platform.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as Linkifier from '../../linkifier/linkifier.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-
-const link = new Linkifier.Linkifier.Linkifier();
-
-link.data = {
-  url: 'example.com' as Platform.DevToolsPath.UrlString,
-  lineNumber: 11,
-  columnNumber: 1,
-};
-
-const container = document.getElementById('container');
-
-container?.addEventListener('linkifieractivated', (event: Event) => {
-  const data = JSON.stringify((event as unknown as {data: unknown}).data, null, 2);
-  alert(`Linkifier click: ${data}`);
-});
-container?.appendChild(link);

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

@@ -1,25 +0,0 @@
-<!--
-  Copyright 2021 The Chromium Authors
-  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>Panel Feedback</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-        padding: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,21 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as Platform from '../../../../core/platform/platform.js';
-import * as FrontendHelpers from '../../../../testing/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.PanelFeedback.PanelFeedback();
-
-component.data = {
-  feedbackUrl: 'https://www.example.com' as Platform.DevToolsPath.UrlString,
-  quickStartUrl: 'https://www.example.com' as Platform.DevToolsPath.UrlString,
-  quickStartLinkText: 'Quick start: get started with the Recorder',
-};
-
-document.getElementById('container')?.appendChild(component);

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

@@ -1,25 +0,0 @@
-<!--
-  Copyright 2021 The Chromium Authors
-  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

@@ -1,19 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as Platform from '../../../../core/platform/platform.js';
-import * as FrontendHelpers from '../../../../testing/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' as Platform.DevToolsPath.UrlString,
-};
-
-document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/panel_introduction_steps/basic.html

@@ -1,25 +0,0 @@
-<!--
-  Copyright 2022 The Chromium Authors
-  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>Panel Introduction Steps</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-        padding: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/panel_introduction_steps/basic.ts

@@ -1,28 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import '../../../components/panel_introduction_steps/panel_introduction_steps.js';
-
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-
-const {html} = Lit;
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-const container = document.getElementById('container');
-if (container) {
-  Lit.render(
-      html`
-<devtools-panel-introduction-steps>
-<span slot="title">Get actionable insights on your website's performance</span>
-<span slot="step-1">Record or import a trace into the Performance Insights panel</span>
-<span slot="step-2">Get an overview of your page’s runtime performance</span>
-<span slot="step-3">Identify improvements to your performance via a list of actionable insights</span>
-</devtools-panel-introduction-steps>
-                 `,
-      container, {host: this});
-}

package/front_end/ui/components/docs/perf_piechart/basic-with-legend.html

@@ -1,20 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  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>PieChart example with a legend</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./basic-with-legend.js"></script>
-  </body>
-</html>