chrome-devtools-frontend 1.0.1602543 → 1.0.1603822

package/front_end/panels/timeline/components/OriginMap.ts

@@ -1,10 +1,8 @@
 // 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.
-/* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import '../../../ui/kit/kit.js';
+import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -52,26 +50,117 @@ interface ListItem extends CrUXManager.OriginMapping {
   isTitleRow?: boolean;
 }
 
-export class OriginMap extends UI.Widget.WidgetElement<UI.Widget.Widget> implements UI.ListWidget.Delegate<ListItem> {
-  #list: UI.ListWidget.ListWidget<ListItem>;
-  #editor?: UI.ListWidget.Editor<ListItem>;
+export interface ViewInput {
+  mappings: ListItem[];
+  prefillDevelopmentOrigin: string;
+  errorMessage: string;
+  isCrUXEnabled: boolean;
+  getFieldDataForPage: (url: string) => Promise<CrUXManager.PageResult>;
+  onCommitEdit: (event: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>) => void;
+  onRemoveItemRequested: (event: CustomEvent) => void;
+  onCreate: (event: CustomEvent<{developmentOrigin?: string, productionOrigin?: string}>) => void;
+}
 
-  constructor() {
-    super();
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-    this.#list = new UI.ListWidget.ListWidget<ListItem>(this, false /* delegatesFocus */, true /* isTable */);
+function renderOriginWarning(input: ViewInput, url: string): Promise<Lit.LitTemplate> {
+  return RenderCoordinator.write(async () => {
+    if (!input.isCrUXEnabled) {
+      return Lit.nothing;
+    }
 
-    CrUXManager.CrUXManager.instance().getConfigSetting().addChangeListener(this.#updateListFromSetting, this);
-    this.#updateListFromSetting();
-  }
+    const result = await input.getFieldDataForPage(url);
 
-  override createWidget(): UI.Widget.Widget {
-    const containerWidget = new UI.Widget.Widget(this);
+    const hasFieldData = Object.entries(result).some(([key, value]) => {
+      if (key === 'warnings') {
+        return false;
+      }
+      return Boolean(value);
+    });
+    if (hasFieldData) {
+      return Lit.nothing;
+    }
 
-    this.#list.registerRequiredCSS(originMapStyles);
-    this.#list.show(containerWidget.contentElement);
+    return html`
+      <devtools-icon
+        class="origin-warning-icon"
+        name="warning-filled"
+        title=${i18nString(UIStrings.pageHasNoData)}
+      ></devtools-icon>
+    `;
+  });
+}
 
-    return containerWidget;
+function renderItem(input: ViewInput, originMapping: ListItem, index: number): Lit.LitTemplate {
+  const warningIcon = Lit.Directives.until(renderOriginWarning(input, originMapping.productionOrigin));
+  // clang-format off
+  return html`
+    <tr data-index=${index} @edit=${input.onCommitEdit} @delete=${input.onRemoveItemRequested}>
+      <td data-value=${originMapping.developmentOrigin}>
+        <div class="origin" title=${originMapping.developmentOrigin}>${originMapping.developmentOrigin}</div>
+      </td>
+      <td data-value=${originMapping.productionOrigin}>
+        ${warningIcon}
+        <div class="origin" title=${originMapping.productionOrigin}>${originMapping.productionOrigin}</div>
+      </td>
+    </tr>
+  `;
+  // clang-format on
+}
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (!input.prefillDevelopmentOrigin && input.mappings.length === 0) {
+    Lit.render(Lit.nothing, target);
+    return;
+  }
+  // clang-format off
+  Lit.render(html`
+    <devtools-data-grid striped inline
+        @click=${(e: Event) => { e.stopPropagation(); }}
+        @create=${input.onCreate}>
+      <table>
+        <tr>
+          <th id=${DEV_ORIGIN_CONTROL} editable weight="1">${i18nString(UIStrings.developmentOrigin)}</th>
+          <th id=${PROD_ORIGIN_CONTROL} editable weight="1">${i18nString(UIStrings.productionOrigin)}</th>
+        </tr>
+        ${input.mappings.map((mapping, index) => renderItem(input, mapping, index))}
+        ${input.prefillDevelopmentOrigin ? html`
+          <tr placeholder>
+            <td>${input.prefillDevelopmentOrigin}</td>
+            <td></td>
+          </tr>` : Lit.nothing}
+      </table>
+    </devtools-data-grid>
+    ${input.errorMessage ? html`<div class="error-message">${input.errorMessage}</div>` : Lit.nothing}
+  `, target);
+  // clang-format on
+};
+
+export class OriginMap extends UI.Widget.VBox {
+  readonly #view: View;
+  #errorMessage = '';
+  #prefillDevelopmentOrigin = '';
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+    this.registerRequiredCSS(originMapStyles);
+    CrUXManager.CrUXManager.instance().getConfigSetting().addChangeListener(this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      mappings: this.#pullMappingsFromSetting(),
+      prefillDevelopmentOrigin: this.#prefillDevelopmentOrigin,
+      errorMessage: this.#errorMessage,
+      isCrUXEnabled: CrUXManager.CrUXManager.instance().isEnabled(),
+      getFieldDataForPage: (url: string) => CrUXManager.CrUXManager.instance().getFieldDataForPage(url),
+      onCommitEdit: this.#commitEdit.bind(this),
+      onRemoveItemRequested: this.#removeItemRequested.bind(this),
+      onCreate: this.#onCreate.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 
   #pullMappingsFromSetting(): ListItem[] {
@@ -85,21 +174,6 @@ export class OriginMap extends UI.Widget.WidgetElement<UI.Widget.Widget> impleme
     setting.set(settingCopy);
   }
 
-  #updateListFromSetting(): void {
-    const mappings = this.#pullMappingsFromSetting();
-    this.#list.clear();
-    this.#list.appendItem(
-        {
-          developmentOrigin: i18nString(UIStrings.developmentOrigin),
-          productionOrigin: i18nString(UIStrings.productionOrigin),
-          isTitleRow: true,
-        },
-        false);
-    for (const originMapping of mappings) {
-      this.#list.appendItem(originMapping, true);
-    }
-  }
-
   #getOrigin(url: string): string|null {
     try {
       return new URL(url).origin;
@@ -108,173 +182,116 @@ export class OriginMap extends UI.Widget.WidgetElement<UI.Widget.Widget> impleme
     }
   }
 
-  #renderOriginWarning(url: string): Promise<Lit.LitTemplate> {
-    return RenderCoordinator.write(async () => {
-      if (!CrUXManager.CrUXManager.instance().isEnabled()) {
-        return Lit.nothing;
-      }
-
-      const cruxManager = CrUXManager.CrUXManager.instance();
-      const result = await cruxManager.getFieldDataForPage(url);
-
-      const hasFieldData = Object.entries(result).some(([key, value]) => {
-        if (key === 'warnings') {
-          return false;
-        }
-        return Boolean(value);
-      });
-      if (hasFieldData) {
-        return Lit.nothing;
-      }
-
-      return html`
-        <devtools-icon
-          class="origin-warning-icon"
-          name="warning-filled"
-          title=${i18nString(UIStrings.pageHasNoData)}
-        ></devtools-icon>
-      `;
-    });
-  }
-
   startCreation(): void {
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const inspectedURL = targetManager.inspectedURL();
     const currentOrigin = this.#getOrigin(inspectedURL) || '';
-
-    this.#list.addNewItem(-1, {
-      developmentOrigin: currentOrigin,
-      productionOrigin: '',
-    });
+    this.#prefillDevelopmentOrigin = currentOrigin;
+    this.requestUpdate();
   }
 
-  renderItem(originMapping: ListItem): Element {
-    const element = document.createElement('div');
-    element.classList.add('origin-mapping-row');
-    element.role = 'row';
-
-    let cellRole: 'columnheader'|'cell';
-    let warningIcon;
-    if (originMapping.isTitleRow) {
-      element.classList.add('header');
-      cellRole = 'columnheader';
-      warningIcon = Lit.nothing;
-    } else {
-      cellRole = 'cell';
-      warningIcon = Lit.Directives.until(this.#renderOriginWarning(originMapping.productionOrigin));
+  #removeItemRequested(event: CustomEvent): void {
+    const target = event.currentTarget as HTMLElement;
+    const index = Number.parseInt(target.dataset.index ?? '-1', 10);
+    if (index < 0) {
+      return;
     }
 
-    // clang-format off
-    Lit.render(html`
-      <div class="origin-mapping-cell development-origin" role=${cellRole}>
-        <div class="origin" title=${originMapping.developmentOrigin}>${originMapping.developmentOrigin}</div>
-      </div>
-      <div class="origin-mapping-cell production-origin" role=${cellRole}>
-        ${warningIcon}
-        <div class="origin" title=${originMapping.productionOrigin}>${originMapping.productionOrigin}</div>
-      </div>
-    `, element, {host: this});
-    // clang-format on
-    return element;
-  }
-
-  removeItemRequested(_item: ListItem, index: number): void {
     const mappings = this.#pullMappingsFromSetting();
-
-    // `index` will be 1-indexed due to the header row
-    mappings.splice(index - 1, 1);
-
+    mappings.splice(index, 1);
     this.#pushMappingsToSetting(mappings);
   }
 
-  commitEdit(originMapping: ListItem, editor: UI.ListWidget.Editor<ListItem>, isNew: boolean): void {
-    originMapping.developmentOrigin = this.#getOrigin(editor.control(DEV_ORIGIN_CONTROL).value) || '';
-    originMapping.productionOrigin = this.#getOrigin(editor.control(PROD_ORIGIN_CONTROL).value) || '';
+  #commitEdit(event: CustomEvent<{columnId: string, valueBeforeEditing: string, newText: string}>): void {
+    const target = event.currentTarget as HTMLElement;
+    const index = Number.parseInt(target.dataset.index ?? '-1', 10);
+    if (index < 0) {
+      return;
+    }
 
     const mappings = this.#pullMappingsFromSetting();
-    if (isNew) {
-      mappings.push(originMapping);
+    const originMapping = mappings[index];
+    const isDevOrigin = event.detail.columnId === DEV_ORIGIN_CONTROL;
+
+    let errorMessage = null;
+    if (isDevOrigin) {
+      errorMessage = this.#developmentValidator(event.detail.newText, index);
+    } else {
+      errorMessage = this.#productionValidator(event.detail.newText);
     }
-    this.#pushMappingsToSetting(mappings);
-  }
 
-  beginEdit(originMapping: ListItem): UI.ListWidget.Editor<ListItem> {
-    const editor = this.#createEditor();
-    editor.control(DEV_ORIGIN_CONTROL).value = originMapping.developmentOrigin;
-    editor.control(PROD_ORIGIN_CONTROL).value = originMapping.productionOrigin;
-    return editor;
-  }
+    if (errorMessage) {
+      this.#errorMessage = errorMessage;
+      this.requestUpdate();
+      return;
+    }
+    this.#errorMessage = '';
 
-  #developmentValidator(_item: ListItem, index: number, input: UI.ListWidget.EditorControl):
-      UI.ListWidget.ValidatorResult {
-    const origin = this.#getOrigin(input.value);
+    if (isDevOrigin) {
+      originMapping.developmentOrigin = this.#getOrigin(event.detail.newText) || '';
+    } else {
+      originMapping.productionOrigin = this.#getOrigin(event.detail.newText) || '';
+    }
+    this.#pushMappingsToSetting(mappings);
+  }
 
+  #developmentValidator(value: string, indexToIgnore?: number): string|null {
+    const origin = this.#getOrigin(value);
     if (!origin) {
-      return {valid: false, errorMessage: i18nString(UIStrings.invalidOrigin, {PH1: input.value})};
+      return i18nString(UIStrings.invalidOrigin, {PH1: value});
     }
 
     const mappings = this.#pullMappingsFromSetting();
     for (let i = 0; i < mappings.length; ++i) {
-      // `index` will be 1-indexed due to the header row
-      if (i === index - 1) {
+      if (i === indexToIgnore) {
         continue;
       }
-
       const mapping = mappings[i];
       if (mapping.developmentOrigin === origin) {
-        return {valid: true, errorMessage: i18nString(UIStrings.alreadyMapped, {PH1: origin})};
+        return i18nString(UIStrings.alreadyMapped, {PH1: origin});
       }
     }
 
-    return {valid: true};
+    return null;
   }
 
-  #productionValidator(_item: ListItem, _index: number, input: UI.ListWidget.EditorControl):
-      UI.ListWidget.ValidatorResult {
-    const origin = this.#getOrigin(input.value);
-
+  #productionValidator(value: string): string|null {
+    const origin = this.#getOrigin(value);
     if (!origin) {
-      return {valid: false, errorMessage: i18nString(UIStrings.invalidOrigin, {PH1: input.value})};
+      return i18nString(UIStrings.invalidOrigin, {PH1: value});
     }
 
-    return {valid: true};
+    return null;
   }
 
-  #createEditor(): UI.ListWidget.Editor<ListItem> {
-    if (this.#editor) {
-      return this.#editor;
+  #onCreate(event: CustomEvent<{developmentOrigin?: string, productionOrigin?: string}>): void {
+    const devOrigin = event.detail[DEV_ORIGIN_CONTROL as keyof typeof event.detail] ?? '';
+    const prodOrigin = event.detail[PROD_ORIGIN_CONTROL as keyof typeof event.detail] ?? '';
+
+    // Ignore empty row selection/deselection or if they didn't change the prefilled values
+    if ((!devOrigin && !prodOrigin) || (devOrigin === this.#prefillDevelopmentOrigin && !prodOrigin)) {
+      this.#prefillDevelopmentOrigin = '';
+      this.#errorMessage = '';
+      this.requestUpdate();
+      return;
     }
 
-    const editor = new UI.ListWidget.Editor<ListItem>();
-    this.#editor = editor;
-    const content = editor.contentElement().createChild('div', 'origin-mapping-editor');
-
-    const devInput = editor.createInput(
-        DEV_ORIGIN_CONTROL, 'text', i18nString(UIStrings.developmentOrigin), this.#developmentValidator.bind(this));
-    const prodInput = editor.createInput(
-        PROD_ORIGIN_CONTROL, 'text', i18nString(UIStrings.productionOrigin), this.#productionValidator.bind(this));
-
-    // clang-format off
-    Lit.render(html`
-      <label class="development-origin-input">
-        ${i18nString(UIStrings.developmentOrigin)}
-        ${devInput}
-      </label>
-      <label class="production-origin-input">
-        ${i18nString(UIStrings.productionOrigin)}
-        ${prodInput}
-      </label>
-    `, content, {host: this});
-    // clang-format on
-
-    return editor;
-  }
-}
+    const errors = [this.#developmentValidator(devOrigin), this.#productionValidator(prodOrigin)].filter(Boolean);
+    if (errors.length > 0) {
+      this.#errorMessage = errors.join('\n');
+      this.requestUpdate();
+      return;
+    }
+
+    this.#errorMessage = '';
 
-customElements.define('devtools-origin-map', OriginMap);
+    this.#prefillDevelopmentOrigin = '';
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-origin-map': OriginMap;
+    const mappings = this.#pullMappingsFromSetting();
+    mappings.push({
+      developmentOrigin: this.#getOrigin(devOrigin) || '',
+      productionOrigin: this.#getOrigin(prodOrigin) || '',
+    });
+    this.#pushMappingsToSetting(mappings);
   }
 }

package/front_end/panels/timeline/components/originMap.css

@@ -4,38 +4,6 @@
  * found in the LICENSE file.
  */
 
-.list {
-  max-height: 200px;
-}
-
-.list-item:has(.origin-mapping-row.header) {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--sys-color-cdt-base-container);
-}
-
-.origin-mapping-row {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  /* Needs to be 30px because list items have a min height of 30px */
-  height: 30px;
-}
-
-.origin-mapping-row.header {
-  font-weight: var(--ref-typeface-weight-medium);
-  border-bottom: 1px solid var(--sys-color-divider);
-}
-
-.origin-mapping-cell {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 4px;
-  border-right: 1px solid var(--sys-color-divider);
-}
-
 .origin-warning-icon {
   width: 16px;
   height: 16px;
@@ -48,24 +16,9 @@
   overflow-x: hidden;
 }
 
-.origin-mapping-cell:last-child {
-  border: none;
-}
-
-.origin-mapping-editor {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  padding: 12px 8px;
-  gap: 12px;
-}
-
-.origin-mapping-editor label {
-  flex: 1;
+.error-message {
+  color: var(--sys-color-error);
+  margin-top: 8px;
   font-weight: var(--ref-typeface-weight-medium);
-}
-
-.origin-mapping-editor input {
-  margin-top: 4px;
-  width: 100%;
+  white-space: pre-wrap;
 }

package/front_end/panels/timeline/thirdPartyTreeView.css

@@ -85,6 +85,12 @@ devtools-performance-third-party-tree-view {
     border-left: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
+  &[max-rows] .widget.vbox.timeline-tree-view {
+    /* 21px for header + max-rows * 22px rows */
+    max-height: calc(21px + (var(--max-rows) * 22px));
+    padding: var(--sys-size-3);
+  }
+
   /* While timeline treeview name-container uses flexbox to layout, it's overkill for this table's purposes.
      By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
  .timeline-tree-view .data-grid .name-container {

package/front_end/panels/timeline/timeline-meta.ts

@@ -390,3 +390,14 @@ Common.Revealer.registerRevealer({
     return new Timeline.TimelinePanel.CoreVitalsRevealer();
   },
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return maybeRetrieveContextTypes(Timeline => [Timeline.Utils.Helpers.RevealableTimeRange]);
+  },
+  destination: Common.Revealer.RevealerDestination.TIMELINE_PANEL,
+  async loadRevealer() {
+    const Timeline = await loadTimelineModule();
+    return new Timeline.TimelinePanel.TimeRangeRevealer();
+  },
+});

package/front_end/panels/timeline/utils/Helpers.ts

@@ -3,35 +3,10 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../../models/trace/trace.js';
 
 const MAX_ORIGIN_LENGTH = 60;
 
-export function getThrottlingRecommendations(): {
-  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null,
-  networkConditions: SDK.NetworkManager.Conditions|null,
-} {
-  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
-      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
-  if (cpuOption.rate() === 0) {
-    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
-  }
-
-  let networkConditions = null;
-  const response = CrUXManager.CrUXManager.instance().getSelectedFieldMetricData('round_trip_time');
-  if (response?.percentiles) {
-    const rtt = Number(response.percentiles.p75);
-    networkConditions = SDK.NetworkManager.getRecommendedNetworkPreset(rtt);
-  }
-
-  return {
-    cpuOption,
-    networkConditions,
-  };
-}
-
 function createTrimmedUrlSearch(url: URL): string {
   const maxSearchValueLength = 8;
   let search = '';
@@ -156,3 +131,8 @@ export class RevealableCoreVitals {
   constructor(public insightSetKey: string) {
   }
 }
+
+export class RevealableTimeRange {
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro) {
+  }
+}

package/front_end/third_party/acorn/README.chromium

@@ -3,6 +3,7 @@ Short Name: acorn
 URL: https://github.com/acornjs/acorn
 Version: 8.10.0
 Revision: 8da1fdd1918c9a9a5748501017262ce18bb2f2cc
+Update Mechanism: Manual
 License: MIT
 License File: package/LICENSE
 Security Critical: no

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: aa77dd6403cb353f69e8c1f0d680779491996ce0
+Revision: 0eb4855bda702feaaa8b899336664f97e3df88b8
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/{list → lists}/List.ts

@@ -21,7 +21,7 @@ const UIStrings = {
   remove: 'Remove',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('ui/components/list/List.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('ui/components/lists/List.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ListItemEventDetail {

package/front_end/ui/components/{list → lists}/list.css

@@ -30,7 +30,6 @@ li {
   align-items: center;
   position: relative;
   overflow: hidden;
-  padding-left: var(--sys-size-11);
   border-radius: var(--sys-shape-corner-extra-small);
 
   &:hover {

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -550,11 +550,11 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     }
     const cell = this.createTD(columnId);
     cell.setAttribute('part', `${columnId}-column`);
-    if (this.isCreationNode) {
-      return cell;
-    }
     const configCells = [...this.#configElement.children].filter(c => c.tagName === 'TD') as HTMLTableCellElement[];
     const configCell = configCells[index];
+    if (this.isCreationNode && !configCell) {
+      return cell;
+    }
     if (!configCell) {
       throw new Error(`Column ${columnId} not found in the data grid`);
     }

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1602543"
+  "version": "1.0.1603822"
 }