chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -1,12 +1,10 @@
 // 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/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.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';
 
@@ -25,10 +23,6 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/ValueInterpreterSettings.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface ValueInterpreterSettingsData {
-  valueTypes: Set<ValueType>;
-}
-
 const enum ValueTypeGroup {
   INTEGER = 'Integer',
   FLOAT = 'Floating point',
@@ -52,69 +46,74 @@ function valueTypeGroupToLocalizedString(group: ValueTypeGroup): string {
   return group;
 }
 
-export class TypeToggleEvent extends Event {
-  static readonly eventName = 'typetoggle';
-  data: {type: ValueType, checked: boolean};
-
-  constructor(type: ValueType, checked: boolean) {
-    super(TypeToggleEvent.eventName);
-    this.data = {type, checked};
-  }
+export interface ViewInput {
+  valueTypes: Set<ValueType>;
+  onToggle: (type: ValueType, checked: boolean) => void;
 }
 
-export class ValueInterpreterSettings extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #valueTypes = new Set<ValueType>();
-
-  set data(data: ValueInterpreterSettingsData) {
-    this.#valueTypes = data.valueTypes;
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
     render(html`
       <style>${valueInterpreterSettingsStyles}</style>
       <div class="settings" jslog=${VisualLogging.pane('settings')}>
        ${[...GROUP_TO_TYPES.keys()].map(group => {
+        const types = GROUP_TO_TYPES.get(group) ?? [];
         return html`
           <div class="value-types-selection">
             <span class="group">${valueTypeGroupToLocalizedString(group)}</span>
-            ${this.#plotTypeSelections(group)}
+            ${types.map(type => {
+            return html`
+                <devtools-checkbox
+                  title=${valueTypeToLocalizedString(type)}
+                  ?checked=${input.valueTypes.has(type)}
+                  @change=${(e: Event) => {
+                    const checkbox = e.target as HTMLInputElement;
+                    input.onToggle(type, checkbox.checked);
+                  }} jslog=${VisualLogging.toggle().track({change: true}).context(Platform.StringUtilities.toKebabCase(type))}
+                  }>${valueTypeToLocalizedString(type)}</devtools-checkbox>
+         `;})}
           </div>
         `;})}
       </div>
-      `, this.#shadow, {host: this});
+      `, target);
+};
+// clang-format on
+
+export type View = typeof DEFAULT_VIEW;
+
+export class ValueInterpreterSettings extends UI.Widget.Widget {
+  #view: View;
+  #valueTypes = new Set<ValueType>();
+  #onToggle: (type: ValueType, checked: boolean) => void = () => {};
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  #plotTypeSelections(group: ValueTypeGroup): Lit.TemplateResult {
-    const types = GROUP_TO_TYPES.get(group);
-    if (!types) {
-      throw new Error(`Unknown group ${group}`);
-    }
-    return html`
-      ${types.map(type => {
-        return html`
-            <devtools-checkbox
-              title=${valueTypeToLocalizedString(type)}
-              ?checked=${this.#valueTypes.has(type)}
-              @change=${(e: Event) => this.#onTypeToggle(type, e)} jslog=${VisualLogging.toggle().track({change: true}).context(Platform.StringUtilities.toKebabCase(type))}
-              >${valueTypeToLocalizedString(type)}</devtools-checkbox>
-     `;})}`;
+  get valueTypes(): Set<ValueType> {
+    return this.#valueTypes;
   }
 
-  #onTypeToggle(type: ValueType, event: Event): void {
-    const checkbox = event.target as HTMLInputElement;
-    this.dispatchEvent(new TypeToggleEvent(type, checkbox.checked));
+  set valueTypes(value: Set<ValueType>) {
+    this.#valueTypes = value;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-linear-memory-inspector-interpreter-settings', ValueInterpreterSettings);
+  get onToggle(): (type: ValueType, checked: boolean) => void {
+    return this.#onToggle;
+  }
 
-declare global {
+  set onToggle(value: (type: ValueType, checked: boolean) => void) {
+    this.#onToggle = value;
+    this.requestUpdate();
+  }
 
-interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-interpreter-settings': ValueInterpreterSettings;
+  override performUpdate(): void {
+    const viewInput = {
+      valueTypes: this.#valueTypes,
+      onToggle: this.#onToggle,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

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

@@ -39,19 +39,6 @@
   grid-column: 1 / 3;
 }
 
-.jump-to-button {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  border: none;
-  padding: 0;
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--sys-color-cdt-base-container);
-}
-
 .signed-divider {
   width: 1px;
   height: 15px;

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

@@ -4,25 +4,27 @@
  * found in the LICENSE file.
  */
 
-:host {
-  flex: auto;
-  display: flex;
-  min-height: 20px;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    flex: auto;
+    display: flex;
+    min-height: 20px;
+  }
 
-.settings {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 12px 12px;
-  gap: 15px 45px;
-}
+  .settings {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 12px 12px;
+    gap: 15px 45px;
+  }
 
-.value-types-selection {
-  display: flex;
-  flex-direction: column;
-}
+  .value-types-selection {
+    display: flex;
+    flex-direction: column;
+  }
 
-.group {
-  font-weight: bold;
-  margin-bottom: var(--sys-size-6);
+  .group {
+    font-weight: bold;
+    margin-bottom: var(--sys-size-6);
+  }
 }

package/front_end/panels/mobile_throttling/CalibrationController.ts

@@ -1,7 +1,6 @@
 // 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 */
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -80,6 +79,8 @@ export class CalibrationController {
     this.#emulationModel = emulationModel;
     this.#originalUrl = primaryPageTarget.inspectedURL();
 
+    // The following functions runs in the inspected page so we don't use lit for rendering.
+    /* eslint-disable @devtools/no-imperative-dom-api */
     function setupTestPage(text: string): void {
       const textEl = document.createElement('span');
       textEl.textContent = text;
@@ -105,6 +106,7 @@ export class CalibrationController {
       moonEl.textContent = '🌑';
       moonEl.style.cssText = 'font-size: 5em';
     }
+    /* eslint-enable @devtools/no-imperative-dom-api */
 
     await primaryPageTarget.pageAgent().invoke_navigate({url: 'about:blank'});
 

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -969,14 +969,14 @@ export class NetworkRequestNode extends NetworkNode {
     return this.isFailed() && !this.isPrefetch();
   }
 
-  override createCells(element: Element): void {
+  override createCells(trElement: HTMLElement): void {
     this.initiatorCell = null;
 
-    element.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
-    element.classList.toggle('network-warning-row', this.isWarning());
-    element.classList.toggle('network-error-row', this.isError());
-    element.classList.toggle('network-navigation-row', this.isNavigationRequestInternal);
-    super.createCells(element);
+    trElement.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
+    trElement.classList.toggle('network-warning-row', this.isWarning());
+    trElement.classList.toggle('network-error-row', this.isError());
+    trElement.classList.toggle('network-navigation-row', this.isNavigationRequestInternal);
+    super.createCells(trElement);
     this.updateBackgroundColor();
   }
 
@@ -1143,6 +1143,14 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   override select(suppressSelectedEvent?: boolean): void {
+    const id = this.request()?.requestId();
+    if (id) {
+      const floatyHandled =
+          UI.Floaty.onFloatyClick({type: UI.Floaty.FloatyContextTypes.NETWORK_REQUEST, data: {requestId: id}});
+      if (floatyHandled) {
+        return;
+      }
+    }
     super.select(suppressSelectedEvent);
     this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }

package/front_end/panels/network/NetworkItemView.ts

@@ -9,7 +9,9 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -235,11 +237,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
         RequestTimingView.create(request, calculator), i18nString(UIStrings.requestAndResponseTimeline));
 
     if (request.trustTokenParams()) {
+      const trustTokensView = new NetworkComponents.RequestTrustTokensView.RequestTrustTokensView();
+      trustTokensView.request = request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, i18nString(UIStrings.trustTokens),
-          LegacyWrapper.LegacyWrapper.legacyWrapper(
-              UI.Widget.VBox, new NetworkComponents.RequestTrustTokensView.RequestTrustTokensView(request)),
-          i18nString(UIStrings.trustTokenOperationDetails));
+          trustTokensView, i18nString(UIStrings.trustTokenOperationDetails));
     }
 
     this.#initialTab = initialTab || this.#resourceViewTabSetting.get();
@@ -265,6 +267,15 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       this.#selectTab(this.#initialTab);
       this.#initialTab = undefined;
     }
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, this.resolveInitialState.bind(this),
+          this.element);
+
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS);
+    }
   }
 
   override willHide(): void {
@@ -336,6 +347,34 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
+  async resolveInitialState(
+      parentElement: Element, reveal: boolean, lookupId: string,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
+    const request = anchor as SDK.NetworkRequest.NetworkRequest;
+    if ((request && request !== this.request()) || (lookupId !== this.request().requestId())) {
+      return null;
+    }
+
+    if (!this.#headersViewComponent) {
+      return null;
+    }
+    await this.#headersViewComponent.render();
+
+    const element = this.#headersViewComponent.getHeaderElementById('request-url');
+    if (!element) {
+      return null;
+    }
+
+    const targetRect = element.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    // Adjust the anchor position slightly.
+    const adjustX = 15;
+    const adjustY = -19;
+    const relativeX = targetRect.x - parentRect.x + adjustX;
+    const relativeY = targetRect.y - parentRect.y + adjustY;
+    return {x: relativeX, y: relativeY};
+  }
+
   private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;

package/front_end/panels/network/NetworkLogView.ts

@@ -51,6 +51,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -982,6 +983,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return this.summaryToolbarInternal;
   }
 
+  getDataGrid(): DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>|null {
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      return this.dataGrid;
+    }
+
+    return null;
+  }
+
   modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
     // TODO(allada) Remove dependency on networkManager and instead use NetworkLog and PageLoad for needed data.
     const target = networkManager.target();
@@ -1716,11 +1725,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
 
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
-        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-          const submenu = contextMenu.footerSection().appendSubMenuItem(
-              action.title(), false, openAiAssistanceId,
-              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
+          const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
           submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainPurpose), 'What is the purpose of this request?',
@@ -1734,13 +1740,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessSecurityHeaders), 'Are there any security headers present?',
               openAiAssistanceId + '.security');
-        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-          contextMenu.footerSection().appendAction(
-              openAiAssistanceId, undefined, false, undefined,
-              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
-        } else {
-          contextMenu.footerSection().appendAction(openAiAssistanceId);
-        }
       }
       copyMenu.defaultSection().appendItem(
           i18nString(UIStrings.copyURL),

package/front_end/panels/network/NetworkPanel.ts

@@ -44,9 +44,10 @@ import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import type * as PanelCommon from '../../panels/common/common.js';
+import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -339,6 +340,14 @@ export class NetworkPanel extends UI.Panel.Panel implements
          HTMLElement);
     panel.element.appendChild(this.fileSelectorElement);
 
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      const dataGrid = this.networkLogView.getDataGrid();
+      if (dataGrid) {
+        PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+            Annotations.AnnotationType.NETWORK_REQUEST, this.resolveInitialState.bind(this), dataGrid.scrollContainer);
+      }
+    }
+
     this.detailsWidget = new UI.Widget.VBox();
     this.detailsWidget.element.classList.add('network-details-view');
     this.splitWidget.setMainWidget(this.detailsWidget);
@@ -652,6 +661,11 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     // Record the network tool load time after the panel has loaded.
     Host.userMetrics.panelLoaded('network', 'DevTools.Launch.Network');
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+          Annotations.AnnotationType.NETWORK_REQUEST);
+    }
   }
 
   override willHide(): void {
@@ -751,6 +765,47 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return this.networkItemView;
   }
 
+  async resolveInitialState(
+      parentElement: Element, reveal: boolean, lookupId: string,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
+    let request = anchor as SDK.NetworkRequest.NetworkRequest;
+    if (!this.isShowing()) {
+      return null;
+    }
+
+    if (!request) {
+      const networkManager =
+          SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(SDK.NetworkManager.NetworkManager);
+      if (!networkManager) {
+        return null;
+      }
+
+      const requests = Logs.NetworkLog.NetworkLog.instance().requestsForId(lookupId);
+      if (requests.length === 0) {
+        console.warn('Network Request list is empty');
+        return null;
+      }
+      request = requests[0];
+    }
+
+    if (reveal) {
+      await Common.Revealer.reveal(request);
+      await this.selectAndActivateRequest(request);
+    }
+
+    const requestNode = this.networkLogView?.nodeForRequest(request);
+    if (requestNode?.element()) {
+      const targetRect = requestNode.element().getBoundingClientRect();
+      const parentRect = parentElement.getBoundingClientRect();
+      const relativeX = 4;
+      const relativeY = targetRect.y - parentRect.y + parentElement.scrollTop;
+      return {x: relativeX, y: relativeY};
+    }
+
+    console.warn('Could not find element for request:', anchor);
+    return null;
+  }
+
   private updateUI(): void {
     if (this.detailsWidget) {
       this.detailsWidget.element.classList.toggle(
@@ -850,6 +905,13 @@ export class NetworkPanel extends UI.Panel.Panel implements
         Trace.Types.Timing.Milli(this.calculator.minimumBoundary() * 1000),
         Trace.Types.Timing.Milli(this.calculator.maximumBoundary() * 1000));
     this.networkOverview.updateRequest(request);
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      requestAnimationFrame(() => {
+        void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+            Annotations.AnnotationType.NETWORK_REQUEST);
+      });
+    }
   }
 
   resolveLocation(locationName: string): UI.View.ViewLocation|null {