chrome-devtools-frontend 1.0.1669021 → 1.0.1672388

package/front_end/panels/linear_memory_inspector/components/LinearMemoryNavigator.ts

@@ -1,12 +1,12 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -48,43 +48,6 @@ export const enum Navigation {
   FORWARD = 'Forward',
 }
 
-export class AddressInputChangedEvent extends Event {
-  static readonly eventName = 'addressinputchanged';
-  data: {address: string, mode: Mode};
-
-  constructor(address: string, mode: Mode) {
-    super(AddressInputChangedEvent.eventName);
-    this.data = {address, mode};
-  }
-}
-
-export class PageNavigationEvent extends Event {
-  static readonly eventName = 'pagenavigation';
-  data: Navigation;
-
-  constructor(navigation: Navigation) {
-    super(PageNavigationEvent.eventName, {});
-    this.data = navigation;
-  }
-}
-
-export class HistoryNavigationEvent extends Event {
-  static readonly eventName = 'historynavigation';
-  data: Navigation;
-
-  constructor(navigation: Navigation) {
-    super(HistoryNavigationEvent.eventName, {});
-    this.data = navigation;
-  }
-}
-
-export class RefreshRequestedEvent extends Event {
-  static readonly eventName = 'refreshrequested';
-  constructor() {
-    super(RefreshRequestedEvent.eventName, {});
-  }
-}
-
 export interface LinearMemoryNavigatorData {
   address: string;
   mode: Mode;
@@ -100,108 +63,225 @@ export const enum Mode {
   INVALID_SUBMIT = 'InvalidSubmit',
 }
 
-export class LinearMemoryNavigator extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export interface ViewInput extends LinearMemoryNavigatorData {
+  onAddressChange?: (address: string, mode: Mode) => void;
+  onNavigatePage?: (navigation: Navigation) => void;
+  onNavigateHistory?: (navigation: Navigation) => void;
+  onRefreshRequest?: () => void;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  const result = html`
+    <style>${linearMemoryNavigatorStyles}</style>
+    <div class="navigator">
+      <div class="navigator-item">
+        ${createButton({icon: 'undo', title: i18nString(UIStrings.goBackInAddressHistory),
+            onClick: () => input.onNavigateHistory?.(Navigation.BACKWARD), enabled: input.canGoBackInHistory,
+            jslogContext:'linear-memory-inspector.history-back'})}
+        ${createButton({icon: 'redo', title: i18nString(UIStrings.goForwardInAddressHistory),
+            onClick: () => input.onNavigateHistory?.(Navigation.FORWARD), enabled: input.canGoForwardInHistory,
+            jslogContext:'linear-memory-inspector.history-forward'})}
+      </div>
+      <div class="navigator-item">
+        ${createButton({icon: 'chevron-left', title: i18nString(UIStrings.previousPage),
+            onClick: () => input.onNavigatePage?.(Navigation.BACKWARD), enabled: true,
+            jslogContext:'linear-memory-inspector.previous-page'})}
+        ${createAddressInput(input)}
+        ${createButton({icon: 'chevron-right', title: i18nString(UIStrings.nextPage),
+            onClick: () => input.onNavigatePage?.(Navigation.FORWARD), enabled: true,
+            jslogContext:'linear-memory-inspector.next-page'})}
+      </div>
+      ${createButton({icon: 'refresh', title: i18nString(UIStrings.refresh),
+          onClick: () => input.onRefreshRequest?.(), enabled: true,
+          jslogContext:'linear-memory-inspector.refresh'})}
+    </div>
+    `;
+    render(result, target);
+  // clang-format on
+};
+
+function createAddressInput(data: ViewInput): Lit.TemplateResult {
+  const classMap = {
+    'address-input': true,
+    invalid: !data.valid,
+  };
+  return html`<input
+    class=${Lit.Directives.classMap(classMap)}
+    data-input="true"
+    .value=${data.address}
+    jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
+    change: true,
+  })}
+    title=${
+      ifDefined(
+          data.valid ? i18nString(UIStrings.enterAddress) : data.error,
+          )}
+    @change=${(e: Event) => data.onAddressChange?.((e.target as HTMLInputElement).value, Mode.SUBMITTED)}
+    @input=${(e: Event) => data.onAddressChange?.((e.target as HTMLInputElement).value, Mode.EDIT)}
+    ${Lit.Directives.ref((el: Element|undefined) => {
+    if (el) {
+      const inputEl = el as HTMLInputElement;
+      if (data.mode === Mode.SUBMITTED) {
+        inputEl.blur();
+      } else if (data.mode === Mode.INVALID_SUBMIT) {
+        inputEl.select();
+      }
+    }
+  })}
+  />`;
+}
+
+function createButton(data: {
+  icon: string,
+  title: string,
+  onClick: () => void,
+  enabled: boolean,
+  jslogContext: string,
+}): Lit.TemplateResult {
+  return html`
+    <devtools-button class="navigator-button"
+      .data=${{variant: Buttons.Button.Variant.ICON,
+               iconName: data.icon,
+               disabled: !data.enabled} as Buttons.Button.ButtonData}
+      jslog=${VisualLogging.action().track({click: true, keydown: 'Enter'}).context(data.jslogContext)}
+      title=${data.title}
+      @click=${data.onClick}
+    ></devtools-button>`;
+}
+
+export class LinearMemoryNavigator extends UI.Widget.Widget {
+  readonly #view: View;
   #address = '0';
   #error: string|undefined = undefined;
   #valid = true;
   #canGoBackInHistory = false;
   #canGoForwardInHistory = false;
+  #mode = Mode.SUBMITTED;
 
-  set data(data: LinearMemoryNavigatorData) {
-    this.#address = data.address;
-    this.#error = data.error;
-    this.#valid = data.valid;
-    this.#canGoBackInHistory = data.canGoBackInHistory;
-    this.#canGoForwardInHistory = data.canGoForwardInHistory;
-    this.#render();
+  #onRefreshRequest?: () => void;
+  #onAddressChange?: (address: string, mode: Mode) => void;
+  #onNavigatePage?: (navigation: Navigation) => void;
+  #onNavigateHistory?: (navigation: Navigation) => void;
 
-    const addressInput = this.#shadow.querySelector<HTMLInputElement>('.address-input');
-    if (addressInput) {
-      if (data.mode === Mode.SUBMITTED) {
-        addressInput.blur();
-      } else if (data.mode === Mode.INVALID_SUBMIT) {
-        addressInput.select();
-      }
+  get onRefreshRequest(): (() => void)|undefined {
+    return this.#onRefreshRequest;
+  }
+
+  set onRefreshRequest(callback: (() => void)|undefined) {
+    this.#onRefreshRequest = callback;
+    this.performUpdate();
+  }
+
+  get onAddressChange(): ((address: string, mode: Mode) => void)|undefined {
+    return this.#onAddressChange;
+  }
+
+  set onAddressChange(callback: ((address: string, mode: Mode) => void)|undefined) {
+    this.#onAddressChange = callback;
+    this.performUpdate();
+  }
+
+  get onNavigatePage(): ((navigation: Navigation) => void)|undefined {
+    return this.#onNavigatePage;
+  }
+
+  set onNavigatePage(callback: ((navigation: Navigation) => void)|undefined) {
+    this.#onNavigatePage = callback;
+    this.performUpdate();
+  }
+
+  get onNavigateHistory(): ((navigation: Navigation) => void)|undefined {
+    return this.#onNavigateHistory;
+  }
+
+  set onNavigateHistory(callback: ((navigation: Navigation) => void)|undefined) {
+    this.#onNavigateHistory = callback;
+    this.performUpdate();
+  }
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    if (!this.element.shadowRoot) {
+      this.element.attachShadow({mode: 'open'});
     }
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    const result = html`
-      <style>${linearMemoryNavigatorStyles}</style>
-      <div class="navigator">
-        <div class="navigator-item">
-          ${this.#createButton({icon: 'undo', title: i18nString(UIStrings.goBackInAddressHistory),
-              event: new HistoryNavigationEvent(Navigation.BACKWARD), enabled: this.#canGoBackInHistory,
-              jslogContext:'linear-memory-inspector.history-back'})}
-          ${this.#createButton({icon: 'redo', title: i18nString(UIStrings.goForwardInAddressHistory),
-              event: new HistoryNavigationEvent(Navigation.FORWARD), enabled: this.#canGoForwardInHistory,
-              jslogContext:'linear-memory-inspector.history-forward'})}
-        </div>
-        <div class="navigator-item">
-          ${this.#createButton({icon: 'chevron-left', title: i18nString(UIStrings.previousPage),
-              event: new PageNavigationEvent(Navigation.BACKWARD), enabled: true,
-              jslogContext:'linear-memory-inspector.previous-page'})}
-          ${this.#createAddressInput()}
-          ${this.#createButton({icon: 'chevron-right', title: i18nString(UIStrings.nextPage),
-              event: new PageNavigationEvent(Navigation.FORWARD), enabled: true,
-              jslogContext:'linear-memory-inspector.next-page'})}
-        </div>
-        ${this.#createButton({icon: 'refresh', title: i18nString(UIStrings.refresh),
-            event: new RefreshRequestedEvent(), enabled: true,
-            jslogContext:'linear-memory-inspector.refresh'})}
-      </div>
-      `;
-      render(result, this.#shadow, {host: this});
-    // clang-format on
+  get address(): string {
+    return this.#address;
   }
 
-  #createAddressInput(): Lit.TemplateResult {
-    const classMap = {
-      'address-input': true,
-      invalid: !this.#valid,
-    };
-    return html`<input
-      class=${Lit.Directives.classMap(classMap)}
-      data-input="true"
-      .value=${this.#address}
-      jslog=${VisualLogging.textField('linear-memory-inspector.address').track({
-      change: true,
-    })}
-      title=${
-        ifDefined(
-            this.#valid ? i18nString(UIStrings.enterAddress) : this.#error,
-            )}
-      @change=${this.#onAddressChange.bind(this, Mode.SUBMITTED)}
-      @input=${this.#onAddressChange.bind(this, Mode.EDIT)}
-    />`;
-  }
-
-  #onAddressChange(mode: Mode, event: Event): void {
-    const addressInput = event.target as HTMLInputElement;
-    this.dispatchEvent(new AddressInputChangedEvent(addressInput.value, mode));
-  }
-
-  #createButton(data: {icon: string, title: string, event: Event, enabled: boolean, jslogContext: string}):
-      Lit.TemplateResult {
-    return html`
-      <devtools-button class="navigator-button"
-        .data=${
-        {variant: Buttons.Button.Variant.ICON, iconName: data.icon, disabled: !data.enabled} as
-        Buttons.Button.ButtonData}
-        jslog=${VisualLogging.action().track({click: true, keydown: 'Enter'}).context(data.jslogContext)}
-        data-button=${data.event.type} title=${data.title}
-        @click=${this.dispatchEvent.bind(this, data.event)}
-      ></devtools-button>`;
+  set address(address: string) {
+    this.#address = address;
+    this.requestUpdate();
+  }
+
+  get error(): string|undefined {
+    return this.#error;
+  }
+
+  set error(error: string|undefined) {
+    this.#error = error;
+    this.requestUpdate();
+  }
+
+  get valid(): boolean {
+    return this.#valid;
+  }
+
+  set valid(valid: boolean) {
+    this.#valid = valid;
+    this.requestUpdate();
+  }
+
+  get canGoBackInHistory(): boolean {
+    return this.#canGoBackInHistory;
+  }
+
+  set canGoBackInHistory(canGoBackInHistory: boolean) {
+    this.#canGoBackInHistory = canGoBackInHistory;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-linear-memory-inspector-navigator', LinearMemoryNavigator);
+  get canGoForwardInHistory(): boolean {
+    return this.#canGoForwardInHistory;
+  }
+
+  set canGoForwardInHistory(canGoForwardInHistory: boolean) {
+    this.#canGoForwardInHistory = canGoForwardInHistory;
+    this.requestUpdate();
+  }
+
+  get mode(): Mode {
+    return this.#mode;
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-navigator': LinearMemoryNavigator;
+  set mode(mode: Mode) {
+    this.#mode = mode;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const shadowRoot = this.element.shadowRoot;
+    if (!shadowRoot) {
+      return;
+    }
+    const viewInput: ViewInput = {
+      address: this.#address,
+      error: this.#error,
+      valid: this.#valid,
+      canGoBackInHistory: this.#canGoBackInHistory,
+      canGoForwardInHistory: this.#canGoForwardInHistory,
+      mode: this.#mode,
+      onAddressChange: this.onAddressChange,
+      onNavigatePage: this.onNavigatePage,
+      onNavigateHistory: this.onNavigateHistory,
+      onRefreshRequest: this.onRefreshRequest,
+    };
+    this.#view(viewInput, undefined, shadowRoot);
   }
 }

package/front_end/panels/linear_memory_inspector/components/linearMemoryInspector.css

@@ -29,7 +29,7 @@
     justify-content: center;
   }
 
-  devtools-linear-memory-inspector-navigator + devtools-linear-memory-inspector-viewer {
+  .navigator-widget ~ devtools-linear-memory-inspector-viewer {
     margin-top: 12px;
   }
 

package/front_end/panels/mobile_throttling/CalibrationController.ts

@@ -10,7 +10,7 @@ const UIStrings = {
   /**
    * @description Text to display to user while a calibration process is running.
    */
-  runningCalibration: 'Running CPU calibration, please do not leave this tab or close DevTools.',
+  runningCalibration: 'Running CPU calibration, don’t leave this tab or close DevTools.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/CalibrationController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/mobile_throttling/MobileThrottlingSelector.ts

@@ -16,17 +16,17 @@ import {
 const UIStrings = {
   /**
    * @description Mobile throttling is disabled. The user can select this option to run mobile
-   *emulation at a normal speed instead of throttled.
+   * emulation at a normal speed instead of throttled.
    */
   disabled: 'Disabled',
   /**
    * @description Title for a group of pre-decided configuration options for mobile throttling. These
-   *are useful default options that users might want.
+   * are useful default options that users might want.
    */
   presets: 'Presets',
   /**
    * @description Title for a group of advanced configuration options for mobile throttling, which
-   *might not be applicable to every user or situation.
+   * might not be applicable to every user or situation.
    */
   advanced: 'Advanced',
 } as const;

package/front_end/panels/mobile_throttling/NetworkPanelIndicator.ts

@@ -9,22 +9,22 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 const UIStrings = {
   /**
-   * @description Icon title in Network Panel Indicator of the Network panel
+   * @description Icon title for warning indicator in the Network panel title.
    */
   networkThrottlingIsEnabled: 'Network throttling is enabled',
   /**
-   * @description Icon title in Network Panel Indicator of the Network panel
+   * @description Icon title for warning indicator in the Network panel title.
    */
-  requestsMayBeOverridden: 'Requests may be overridden locally, see the Sources panel',
+  requestsMayBeOverridden: 'Requests may be overridden locally. See the Sources panel',
   /**
-   * @description Icon title in Network Panel Indicator of the Network panel
+   * @description Icon title for warning indicator in the Network panel title.
    */
-  requestsMayBeBlocked: 'Requests may be blocked, see the Network request blocking panel',
+  requestsMayBeBlocked: 'Requests may be blocked. See the Network request blocking panel',
   /**
    * @description Title of an icon in the Network panel that indicates that accepted content encodings have been overridden.
    */
   acceptedEncodingOverrideSet:
-      'The set of accepted `Content-Encoding` headers has been modified by DevTools, see the Network conditions panel',
+      'The set of accepted `Content-Encoding` headers has been changed by DevTools. See the Network conditions panel',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/NetworkPanelIndicator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -19,38 +19,38 @@ const {render, html, Directives} = Lit;
 
 const UIStrings = {
   /**
-   * @description Text to indicate something is not enabled
+   * @description Text to indicate something is not enabled.
    */
   disabled: 'Disabled',
   /**
-   * @description Title for a group of configuration options
+   * @description Title for a group of configuration options.
    */
   presets: 'Presets',
   /**
-   * @description Text in Network Throttling Selector of the Network panel
+   * @description Text in network throttling selector of the Network panel.
    */
   custom: 'Custom',
   /**
-   * @description  Title for a network throttling group containing the request blocking option
+   * @description Title for a network throttling group containing the request blocking option.
    */
   blockingGroup: 'Blocking',
   /**
-   *@description Text with two placeholders separated by a colon
-   *@example {Node removed} PH1
-   *@example {div#id1} PH2
+   * @description Text with two placeholders separated by a colon.
+   * @example {Node removed} PH1
+   * @example {div#id1} PH2
    */
   sS: '{PH1}: {PH2}',
   /**
-   *@description Accessibility label for custom add network throttling option
-   *@example {Custom} PH1
+   * @description Accessibility label for custom add network throttling option.
+   * @example {Custom} PH1
    */
   addS: 'Add {PH1}',
   /**
-   *@description Text in Throttling Manager of the Network panel
+   * @description Text in throttling manager of the Network panel.
    */
   add: 'Add…',
   /**
-   * @description Text label for a selection box showing that a specific option is recommended for CPU or Network throttling.
+   * @description Text label for a selection box showing that a specific option is recommended for CPU or network throttling.
    * @example {Fast 4G} PH1
    * @example {4x slowdown} PH1
    */

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -28,43 +28,43 @@ export interface CPUThrottlingSelectorWrapper {
 
 const UIStrings = {
   /**
-   *@description Text to indicate the network connectivity is offline
+   * @description Text to indicate the network connectivity is offline.
    */
   offline: 'Offline',
   /**
-   *@description Text in Throttling Manager of the Network panel
+   * @description Text in throttling manager of the Network panel.
    */
   forceDisconnectedFromNetwork: 'Force disconnected from network',
   /**
-   * @description Text for throttling the network
+   * @description Text for throttling the network.
    */
   throttling: 'Throttling',
   /**
-   * @description Icon title in Throttling Manager of the Network panel
+   * @description Icon title in throttling manager of the Network panel.
    */
   cpuThrottlingIsEnabled: 'CPU throttling is enabled',
   /**
-   * @description Screen reader label for a select box that chooses the CPU throttling speed in the Performance panel
+   * @description Screen reader label for a select box that chooses the CPU throttling speed in the Performance panel.
    */
   cpuThrottling: 'CPU throttling',
   /**
-   * @description Tooltip text in Throttling Manager of the Performance panel
+   * @description Tooltip text in throttling manager of the Performance panel.
    */
   excessConcurrency: 'Exceeding the default value may degrade system performance.',
   /**
-   * @description Tooltip text in Throttling Manager of the Performance panel
+   * @description Tooltip text in throttling manager of the Performance panel.
    */
   resetConcurrency: 'Reset to the default value',
   /**
-   * @description Label for an check box that neables overriding navigator.hardwareConcurrency
+   * @description Label for a checkbox that enables overriding navigator.hardwareConcurrency.
    */
   hardwareConcurrency: 'Hardware concurrency',
   /**
-   * @description Tooltip text for an input box that overrides navigator.hardwareConcurrency on the page
+   * @description Tooltip text for an input box that overrides navigator.hardwareConcurrency on the page.
    */
-  hardwareConcurrencySettingLabel: 'Override the value reported by navigator.hardwareConcurrency',
+  hardwareConcurrencySettingLabel: 'Override the value reported by `navigator.hardwareConcurrency`',
   /**
-   * @description Text label for a selection box showing that a specific option is recommended for CPU or Network throttling.
+   * @description Text label for a selection box showing that a specific option is recommended for CPU or network throttling.
    * @example {Fast 4G} PH1
    * @example {4x slowdown} PH1
    */
@@ -90,9 +90,9 @@ const UIStrings = {
    */
   saveDataOff: '\'Save-Data\': off',
   /**
-   * @description Tooltip text for an select element that overrides navigator.connection.saveData on the page
+   * @description Tooltip text for a select element that overrides navigator.connection.saveData on the page.
    */
-  saveDataSettingTooltip: 'Override the value reported by navigator.connection.saveData on the page',
+  saveDataSettingTooltip: 'Override the value reported by `navigator.connection.saveData` on the page',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -8,45 +8,45 @@ import * as PanelsCommon from '../common/common.js';
 
 const UIStrings = {
   /**
-   * @description Text for no network throttling
+   * @description Text for no network throttling.
    */
   noThrottling: 'No CPU and no network throttling',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   noInternetConnectivity: 'No internet connectivity',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   lowTierMobile: 'Low-tier mobile',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   slowGXCpuSlowdown: 'Slow 3G & 6x CPU slowdown',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    * @example {2.2} PH1
    */
   slowGXCpuSlowdownCalibrated: 'Slow 3G & {PH1}x CPU slowdown',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   midtierMobile: 'Mid-tier mobile',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   fastGXCpuSlowdown: 'Fast 3G & 4x CPU slowdown',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    * @example {2.2} PH1
    */
   fastGXCpuSlowdownCalibrated: 'Fast 3G & {PH1}x CPU slowdown',
   /**
-   * @description Text in Network Throttling Selector of the Network panel
+   * @description Text in network throttling selector of the Network panel.
    */
   custom: 'Custom',
   /**
-   * @description Text in Throttling Presets of the Network panel
+   * @description Text in throttling presets of the Network panel.
    */
   checkNetworkAndPerformancePanels: 'Check Network and Performance panels',
 } as const;