chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/network/RequestInitiatorView.ts

@@ -8,11 +8,15 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Components from '../../ui/legacy/components/utils/utils.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';
 
 import requestInitiatorViewStyles from './requestInitiatorView.css.js';
 import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
+const {html, render, nothing} = Lit;
+const {widgetConfig} = UI.Widget;
+
 const UIStrings = {
   /**
    * @description Text in Request Initiator View of the Network panel if the request has no initiator data
@@ -29,21 +33,143 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export interface ViewInput {
+  initiatorGraph: Logs.NetworkLog.InitiatorGraph;
+  hasStackTrace: boolean;
+  request: SDK.NetworkRequest.NetworkRequest;
+  linkifier: Components.Linkifier.Linkifier;
+  target?: SDK.Target.Target;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const hasInitiatorData =
+      input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1 || input.hasStackTrace;
+
+  if (!hasInitiatorData) {
+    render(
+        html`
+      <div class="empty-view" style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--sys-color-token-subtle);">
+        ${i18nString(UIStrings.noInitiator)}
+      </div>
+    `,
+        target);
+    return;
+  }
+
+  const renderStackTraceSection = (): Lit.TemplateResult => {
+    return html`
+      <li role="treeitem" class="request-initiator-view-section-title" aria-expanded="true">
+        ${i18nString(UIStrings.requestCallStack)}
+        <ul role="group">
+          <li role="treeitem">
+            <devtools-widget .widgetConfig=${widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
+      target: input.target,
+      linkifier: input.linkifier,
+      options: {runtimeStackTrace: input.request.initiator()?.stack, tabStops: true}
+    })}></devtools-widget>
+          </li>
+        </ul>
+      </li>
+    `;
+  };
+
+  const renderInitiatorNodes = (initiators: SDK.NetworkRequest.NetworkRequest[], index: number,
+                                initiated: Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>,
+                                visited: Set<SDK.NetworkRequest.NetworkRequest>): Lit.TemplateResult => {
+    if (index >= initiators.length) {
+      return html`${nothing}`;
+    }
+    const request = initiators[index];
+    const isCurrentRequest = (index === initiators.length - 1);
+
+    return html`
+      <li role="treeitem" ?selected=${isCurrentRequest} aria-expanded="true">
+        <span style=${isCurrentRequest ? 'font-weight: bold' : ''}>${request.url()}</span>
+        <ul role="group">
+          ${renderInitiatorNodes(initiators, index + 1, initiated, visited)}
+          ${isCurrentRequest ? renderInitiatedNodes(initiated, request, visited) : nothing}
+        </ul>
+      </li>
+    `;
+  };
+
+  const renderInitiatedNodes = (initiated: Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>,
+                                parentRequest: SDK.NetworkRequest.NetworkRequest,
+                                visited: Set<SDK.NetworkRequest.NetworkRequest>): Lit.TemplateResult => {
+    const children = [];
+    for (const [request, initiator] of initiated) {
+      if (initiator === parentRequest) {
+        children.push(request);
+      }
+    }
+    if (children.length === 0) {
+      return html`${nothing}`;
+    }
+    return html`
+      ${children.map(child => {
+      const shouldRecurse = !visited.has(child);
+      if (shouldRecurse) {
+        visited.add(child);
+      }
+      return html`
+        <li role="treeitem" aria-expanded="true">
+          <span>${child.url()}</span>
+          ${shouldRecurse ? html`<ul>${renderInitiatedNodes(initiated, child, visited)}</ul>` : nothing}
+        </li>
+      `;
+    })}
+    `;
+  };
+
+  const renderInitiatorChain = (initiatorGraph: Logs.NetworkLog.InitiatorGraph): Lit.TemplateResult => {
+    const initiators = Array.from(initiatorGraph.initiators).reverse();
+    const visited = new Set<SDK.NetworkRequest.NetworkRequest>();
+    visited.add(input.request);
+    return html`
+      <li role="treeitem" class="request-initiator-view-section-title" aria-expanded="true">
+        ${i18nString(UIStrings.requestInitiatorChain)}
+        <ul role="group">
+          ${renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
+        </ul>
+      </li>
+    `;
+  };
+
+  render(
+      html`
+    <div class="request-initiator-view-tree" jslog=${VisualLogging.tree('initiator-tree')}>
+      <devtools-tree .template=${
+          html`
+        <style>
+          ${requestInitiatorViewTreeStyles}
+        </style>
+        <ul role="tree">
+           ${input.hasStackTrace ? renderStackTraceSection() : Lit.nothing}
+           ${
+              (input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1) ?
+                  renderInitiatorChain(input.initiatorGraph) :
+                  Lit.nothing}
+        </ul>
+      `}></devtools-tree>
+    </div>
+  `,
+      target);
+};
+
+type View = typeof DEFAULT_VIEW;
+
 export class RequestInitiatorView extends UI.Widget.VBox {
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly request: SDK.NetworkRequest.NetworkRequest;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
-  private hasShown: boolean;
+  #view: View;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('initiator').track({resize: true})}`});
 
     this.element.classList.add('request-initiator-view');
     this.linkifier = new Components.Linkifier.Linkifier();
     this.request = request;
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noInitiator), '');
-    this.emptyWidget.show(this.element);
-    this.hasShown = false;
+    this.#view = view;
   }
 
   static createStackTracePreview(
@@ -59,119 +185,26 @@ export class RequestInitiatorView extends UI.Widget.VBox {
         undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
   }
 
-  private createTree(): UI.TreeOutline.TreeOutlineInShadow {
-    const treeOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    treeOutline.registerRequiredCSS(requestInitiatorViewTreeStyles);
-    treeOutline.contentElement.classList.add('request-initiator-view-tree');
-    treeOutline.contentElement.setAttribute('jslog', `${VisualLogging.tree('initiator-tree')}`);
-
-    return treeOutline;
-  }
-
-  private buildRequestChainTree(
-      initiatorGraph: Logs.NetworkLog.InitiatorGraph, title: string,
-      tree: UI.TreeOutline.TreeOutlineInShadow): UI.TreeOutline.TreeElement {
-    const root = new UI.TreeOutline.TreeElement(title);
-
-    tree.appendChild(root);
-
-    if (root.titleElement instanceof HTMLElement) {
-      root.titleElement.classList.add('request-initiator-view-section-title');
-    }
-
-    const initiators = initiatorGraph.initiators;
-    let parent: UI.TreeOutline.TreeElement = root;
-    for (const request of Array.from(initiators).reverse()) {
-      const treeElement = new UI.TreeOutline.TreeElement(request.url());
-      parent.appendChild(treeElement);
-      parent.expand();
-      parent = treeElement;
-    }
-
-    root.expand();
-    parent.select();
-    const titleElement = parent.titleElement;
-    if (titleElement instanceof HTMLElement) {
-      titleElement.style.fontWeight = 'bold';
-    }
-
-    const initiated = initiatorGraph.initiated;
-    this.depthFirstSearchTreeBuilder(initiated, parent, this.request);
-    return root;
-  }
-
-  private depthFirstSearchTreeBuilder(
-      initiated: Map<SDK.NetworkRequest.NetworkRequest, SDK.NetworkRequest.NetworkRequest>,
-      parentElement: UI.TreeOutline.TreeElement, parentRequest: SDK.NetworkRequest.NetworkRequest): void {
-    const visited = new Set<SDK.NetworkRequest.NetworkRequest>();
-    // this.request should be already in the tree when build initiator part
-    visited.add(this.request);
-    for (const request of initiated.keys()) {
-      if (initiated.get(request) === parentRequest) {
-        const treeElement = new UI.TreeOutline.TreeElement(request.url());
-        parentElement.appendChild(treeElement);
-        parentElement.expand();
-        // only do dfs when we haven't done one
-        if (!visited.has(request)) {
-          visited.add(request);
-          this.depthFirstSearchTreeBuilder(initiated, treeElement, request);
-        }
-      }
-    }
-  }
-
-  private buildStackTraceSection(
-      stackTracePreview: Components.JSPresentationUtils.StackTracePreviewContent, title: string,
-      tree: UI.TreeOutline.TreeOutlineInShadow): void {
-    const root = new UI.TreeOutline.TreeElement(title);
-    tree.appendChild(root);
-
-    if (root.titleElement instanceof HTMLElement) {
-      root.titleElement.classList.add('request-initiator-view-section-title');
-    }
+  override performUpdate(): void {
+    const initiatorGraph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.request);
+    const hasStackTrace = !!this.request.initiator()?.stack;
+    const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.request);
+    const target = networkManager ? networkManager.target() : undefined;
 
-    const contentElement = new UI.TreeOutline.TreeElement(undefined, false);
-    contentElement.selectable = false;
-    stackTracePreview.markAsRoot();
-    stackTracePreview.show(contentElement.listItemElement);
+    const viewInput: ViewInput = {
+      initiatorGraph,
+      hasStackTrace,
+      request: this.request,
+      linkifier: this.linkifier,
+      target: target || undefined,
+    };
 
-    root.appendChild(contentElement);
-    root.expand();
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    if (this.hasShown) {
-      return;
-    }
     this.registerRequiredCSS(requestInitiatorViewStyles);
-    let initiatorDataPresent = false;
-    const containerTree = this.createTree();
-
-    const stackTracePreview = RequestInitiatorView.createStackTracePreview(this.request, this.linkifier, true);
-
-    if (stackTracePreview) {
-      initiatorDataPresent = true;
-      this.buildStackTraceSection(stackTracePreview, i18nString(UIStrings.requestCallStack), containerTree);
-    }
-
-    const initiatorGraph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.request);
-
-    if (initiatorGraph.initiators.size > 1 || initiatorGraph.initiated.size > 1) {
-      initiatorDataPresent = true;
-      this.buildRequestChainTree(initiatorGraph, i18nString(UIStrings.requestInitiatorChain), containerTree);
-    }
-
-    const firstChild = containerTree.firstChild();
-
-    if (firstChild) {
-      firstChild.select(true);
-    }
-
-    if (initiatorDataPresent) {
-      this.element.appendChild(containerTree.element);
-      this.emptyWidget.hideWidget();
-    }
-    this.hasShown = true;
+    this.requestUpdate();
   }
 }

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -127,7 +127,7 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
       const errorMessagesCategory = new Category(root, i18nString(UIStrings.errors));
       for (const error of signedExchangeInfo.errors) {
         const fragment = document.createDocumentFragment();
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('prompt-icon', 'small');
         fragment.appendChild(icon);

package/front_end/panels/network/components/RequestHeaderSection.css

@@ -3,66 +3,67 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+@scope to (devtools-widget > *) {
+  :scope {
+    display: block;
+  }
 
-:host {
-  display: block;
-}
-
-devtools-header-section-row:last-of-type {
-  margin-bottom: 10px;
-}
+  devtools-header-section-row:last-of-type {
+    margin-bottom: 10px;
+  }
 
-devtools-header-section-row:first-of-type {
-  margin-top: 2px;
-}
+  devtools-header-section-row:first-of-type {
+    margin-top: 2px;
+  }
 
-.call-to-action {
-  background-color: var(--sys-color-neutral-container);
-  padding: 8px;
-  border-radius: 5px;
-  margin: 4px;
-}
+  .call-to-action {
+    background-color: var(--sys-color-neutral-container);
+    padding: 8px;
+    border-radius: 5px;
+    margin: 4px;
+  }
 
-.call-to-action-body {
-  padding: 6px 0;
-  margin-left: 9.5px;
-  border-left: 2px solid var(--issue-color-yellow);
-  padding-left: 18px;
-  line-height: 20px;
-}
+  .call-to-action-body {
+    padding: 6px 0;
+    margin-left: 9.5px;
+    border-left: 2px solid var(--issue-color-yellow);
+    padding-left: 18px;
+    line-height: 20px;
+  }
 
-.call-to-action .explanation {
-  font-weight: bold;
-}
+  .call-to-action .explanation {
+    font-weight: bold;
+  }
 
-.call-to-action code {
-  font-size: 90%;
-}
+  .call-to-action code {
+    font-size: 90%;
+  }
 
-.call-to-action .example .comment::before {
-  content: " — ";
-}
+  .call-to-action .example .comment::before {
+    content: " — ";
+  }
 
-.link,
-.devtools-link {
-  color: var(--sys-color-primary);
-  text-decoration: underline;
-  cursor: pointer;
-  outline-offset: 2px;
-}
+  .link,
+  .devtools-link {
+    color: var(--sys-color-primary);
+    text-decoration: underline;
+    cursor: pointer;
+    outline-offset: 2px;
+  }
 
-.explanation .link {
-  font-weight: normal;
-}
+  .explanation .link {
+    font-weight: normal;
+  }
 
-.inline-icon {
-  vertical-align: middle;
-}
+  .inline-icon {
+    vertical-align: middle;
+  }
 
-@media (forced-colors: active) {
-  .link,
-  .devtools-link {
-    color: linktext;
-    text-decoration-color: linktext;
+  @media (forced-colors: active) {
+    .link,
+    .devtools-link {
+      color: linktext;
+      text-decoration-color: linktext;
+    }
   }
 }

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -1,13 +1,11 @@
 // 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.
-/* 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 type * as SDK from '../../../core/sdk/sdk.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';
 import * as NetworkForward from '../forward/forward.js';
@@ -40,89 +38,101 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeaderSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface RequestHeaderSectionData {
-  request: SDK.NetworkRequest.NetworkRequest;
-  toReveal?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string};
+export interface ViewInput {
+  headers: HeaderDescriptor[];
+  isProvisionalHeaders: boolean;
+  isRequestCached: boolean;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const headers = input.headers;
+
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${requestHeaderSectionStyles}</style>
+    ${input.isProvisionalHeaders ? renderProvisionalHeadersWarning(input.isRequestCached) : Lit.nothing}
+    ${headers.map(header => html`
+      <devtools-header-section-row
+        .data=${{ header }}
+        jslog=${VisualLogging.item('request-header')}
+      ></devtools-header-section-row>
+    `)}
+  `, target);
+  // clang-format on
+};
+
+function renderProvisionalHeadersWarning(isRequestCached: boolean): Lit.LitTemplate {
+  let cautionText;
+  let cautionTitle = '';
+  if (isRequestCached) {
+    cautionText = i18nString(UIStrings.provisionalHeadersAreShownDisableCache);
+    cautionTitle = i18nString(UIStrings.onlyProvisionalHeadersAre);
+  } else {
+    cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
+  }
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  return html`
+    <div class="call-to-action">
+      <div class="call-to-action-body">
+        <div class="explanation" title=${cautionTitle}>
+          <devtools-icon class="inline-icon medium" name='warning-filled'>
+          </devtools-icon>
+          ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
+        </div>
+      </div>
+    </div>
+  `;
+  // clang-format on
 }
 
-export class RequestHeaderSection extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
+export class RequestHeaderSection extends UI.Widget.Widget {
+  #request: Readonly<SDK.NetworkRequest.NetworkRequest>|null = null;
   #headers: HeaderDescriptor[] = [];
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-  set data(data: RequestHeaderSectionData) {
-    this.#request = data.request;
+  set toReveal(toReveal: {section: NetworkForward.UIRequestLocation.UIHeaderSection, header?: string}|undefined) {
+    if (!toReveal) {
+      return;
+    }
+    if (toReveal.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST) {
+      this.#headers.filter(header => header.name === toReveal.header?.toLowerCase()).forEach(header => {
+        header.highlight = true;
+      });
+    }
+
+    this.requestUpdate();
+  }
 
+  set request(request: Readonly<SDK.NetworkRequest.NetworkRequest>) {
+    this.#request = request;
     this.#headers = this.#request.requestHeaders().map(header => ({
                                                          name: Platform.StringUtilities.toLowerCaseString(header.name),
                                                          value: header.value,
                                                          valueEditable: EditingAllowedStatus.FORBIDDEN,
                                                        }));
     this.#headers.sort((a, b) => Platform.StringUtilities.compare(a.name, b.name));
-
-    if (data.toReveal?.section === NetworkForward.UIRequestLocation.UIHeaderSection.REQUEST) {
-      this.#headers.filter(header => header.name === data.toReveal?.header?.toLowerCase()).forEach(header => {
-        header.highlight = true;
-      });
-    }
-
-    this.#render();
+    this.requestUpdate();
   }
 
-  #render(): void {
+  override performUpdate(): void {
     if (!this.#request) {
       return;
     }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${requestHeaderSectionStyles}</style>
-      ${this.#maybeRenderProvisionalHeadersWarning()}
-      ${this.#headers.map(header => html`
-        <devtools-header-section-row
-          .data=${{header}}
-          jslog=${VisualLogging.item('request-header')}
-        ></devtools-header-section-row>
-      `)}
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #maybeRenderProvisionalHeadersWarning(): Lit.LitTemplate {
-    if (!this.#request || this.#request.requestHeadersText() !== undefined) {
-      return Lit.nothing;
-    }
-
-    let cautionText;
-    let cautionTitle = '';
-    if (this.#request.cachedInMemory() || this.#request.cached()) {
-      cautionText = i18nString(UIStrings.provisionalHeadersAreShownDisableCache);
-      cautionTitle = i18nString(UIStrings.onlyProvisionalHeadersAre);
-    } else {
-      cautionText = i18nString(UIStrings.provisionalHeadersAreShown);
-    }
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <div class="call-to-action">
-        <div class="call-to-action-body">
-          <div class="explanation" title=${cautionTitle}>
-            <devtools-icon class="inline-icon medium" name='warning-filled'>
-            </devtools-icon>
-            ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
-          </div>
-        </div>
-      </div>
-    `;
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-request-header-section', RequestHeaderSection);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-request-header-section': RequestHeaderSection;
+    this.#view(
+        {
+          headers: this.#headers,
+          isProvisionalHeaders: this.#request.requestHeadersText() === undefined,
+          isRequestCached: this.#request.cached() || this.#request.cachedInMemory(),
+        },
+        undefined, this.contentElement);
   }
 }

package/front_end/panels/network/components/RequestHeadersView.css

@@ -87,7 +87,7 @@ div.raw-headers-row {
 .green-circle::before,
 .red-circle::before,
 .yellow-circle::before {
-  content: "";
+  content: '';
   display: inline-block;
   width: 12px;
   height: 12px;