chrome-devtools-frontend 1.0.975699 → 1.0.976172

package/AUTHORS

@@ -29,6 +29,7 @@ Feng Lu <lufengd3@gmail.com>
 Gabriel Luong <gabriel.luong@gmail.com>
 Gautham Banasandra <gautham.bangalore@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
+Jan Keitel <jan.keitel@gmail.com>
 Jeffrey Chen <jeffreyca16@gmail.com>
 Jesper van den Ende <jespertheend@gmail.com>
 Juba Borgohain <chromiumjuba@gmail.com>

package/config/gni/devtools_grd_files.gni

@@ -480,6 +480,7 @@ grd_files_release_sources = [
   "front_end/third_party/wasmparser/wasmparser.js",
   "front_end/ui/components/adorners/adorners.js",
   "front_end/ui/components/buttons/buttons.js",
+  "front_end/ui/components/chrome_link/chrome_link.js",
   "front_end/ui/components/code_highlighter/code_highlighter.js",
   "front_end/ui/components/data_grid/data_grid.js",
   "front_end/ui/components/diff_view/diff_view.js",
@@ -1400,6 +1401,8 @@ grd_files_debug_sources = [
   "front_end/ui/components/adorners/adorner.css.js",
   "front_end/ui/components/buttons/Button.js",
   "front_end/ui/components/buttons/button.css.js",
+  "front_end/ui/components/chrome_link/ChromeLink.js",
+  "front_end/ui/components/chrome_link/chromeLink.css.js",
   "front_end/ui/components/code_highlighter/CodeHighlighter.js",
   "front_end/ui/components/code_highlighter/codeHighlighter.css.js",
   "front_end/ui/components/data_grid/DataGrid.js",

package/front_end/generated/InspectorBackendCommands.js

@@ -1877,7 +1877,7 @@ export function registerCommands(inspectorBackend) {
   // Overlay.
   inspectorBackend.registerEnum('Overlay.LineStylePattern', {Dashed: 'dashed', Dotted: 'dotted'});
   inspectorBackend.registerEnum('Overlay.ContrastAlgorithm', {Aa: 'aa', Aaa: 'aaa', Apca: 'apca'});
-  inspectorBackend.registerEnum('Overlay.ColorFormat', {Rgb: 'rgb', Hsl: 'hsl', Hex: 'hex'});
+  inspectorBackend.registerEnum('Overlay.ColorFormat', {Rgb: 'rgb', Hsl: 'hsl', Hwb: 'hwb', Hex: 'hex'});
   inspectorBackend.registerEnum('Overlay.InspectMode', {
     SearchForNode: 'searchForNode',
     SearchForUAShadowDOM: 'searchForUAShadowDOM',

package/front_end/generated/protocol.ts

@@ -9587,6 +9587,7 @@ export namespace Overlay {
   export const enum ColorFormat {
     Rgb = 'rgb',
     Hsl = 'hsl',
+    Hwb = 'hwb',
     Hex = 'hex',
   }
 

package/front_end/panels/settings/components/SyncSection.ts

@@ -8,7 +8,7 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Settings from '../../../ui/components/settings/settings.js';
-import * as SDK from '../../../core/sdk/sdk.js';
+import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
@@ -92,9 +92,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.syncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -104,9 +103,8 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href=${link} class="link" target="_blank"
-          @click=${(e: Event): void => openSettingsTab(link, e)}
-          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.preferencesSyncDisabled)}
+        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
       </span>`;
     // clang-format on
   }
@@ -120,16 +118,6 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     </div>`;
 }
 
-// Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
-// there using CDP.
-function openSettingsTab(url: string, event: Event): void {
-  if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    mainTarget && mainTarget.targetAgent().invoke_createTarget({url});
-    event.consume(true);
-  }
-}
-
 ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
 
 declare global {

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -0,0 +1,62 @@
+// Copyright 2022 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 SDK from '../../../core/sdk/sdk.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
+import chromeLinkStyles from './chromeLink.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-chrome-link': ChromeLink;
+  }
+}
+
+// Use this component to render links to 'chrome://...'-URLs
+// (for which regular <x-link>s do not work).
+export class ChromeLink extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+  #href: string = '';
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [chromeLinkStyles];
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set href(href: string) {
+    if (!href.startsWith('chrome://')) {
+      throw new Error('ChromeLink href needs to start with \'chrome://\'');
+    }
+    this.#href = href;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+  // there using CDP.
+  openSettingsTab(event: Event): void {
+    if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
+      const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+      mainTarget && mainTarget.targetAgent().invoke_createTarget({url: this.#href});
+      event.consume(true);
+    }
+  }
+
+  #render(): void {
+    // clang-format off
+    LitHtml.render(
+      /* x-link doesn't work with custom click/keydown handlers */
+      /* eslint-disable rulesdir/ban_a_tags_in_lit_html */
+      LitHtml.html`
+        <a href=${this.#href} class="link" target="_blank"
+          @click=${this.openSettingsTab}
+          @keydown=${this.openSettingsTab}><slot></slot></a>
+      `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-chrome-link', ChromeLink);

package/front_end/ui/components/chrome_link/chromeLink.css

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2022 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.
+ */
+
+.link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 2px 0; /* adjust focus ring size */
+}

package/front_end/ui/components/chrome_link/chrome_link.ts

@@ -0,0 +1,9 @@
+// Copyright 2022 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 ChromeLink from './ChromeLink.js';
+
+export {
+  ChromeLink,
+};

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.975699"
+  "version": "1.0.976172"
 }