chrome-devtools-frontend 1.0.1522585 → 1.0.1525561

package/front_end/ui/legacy/components/source_frame/StreamingContentHexView.ts

@@ -16,20 +16,22 @@ const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
  * known upfront.
  */
 class LinearMemoryInspectorView extends UI.Widget.VBox {
-  #memory = new Uint8Array([0]);
+  #memory: Uint8Array = new Uint8Array([0]);
   #address = 0;
   #inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
 
   constructor() {
     super();
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        this.#memoryRequested.bind(this));
-    this.#inspector.addEventListener(
-        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName, event => {
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
+            this.#memoryRequested(event));
+    this.#inspector.contentElement.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
           this.#address = event.data;
         });
-    this.contentElement.appendChild(this.#inspector);
+    this.#inspector.show(this.contentElement);
   }
 
   override wasShown(): void {
@@ -51,13 +53,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const memoryChunkStart = Math.max(0, this.#address - MEMORY_TRANSFER_MIN_CHUNK_SIZE / 2);
     const memoryChunkEnd = memoryChunkStart + MEMORY_TRANSFER_MIN_CHUNK_SIZE;
     const memory = this.#memory.slice(memoryChunkStart, memoryChunkEnd);
-    this.#inspector.data = {
-      memory,
-      address: this.#address,
-      memoryOffset: memoryChunkStart,
-      outerMemoryLength: this.#memory.length,
-      hideValueInspector: true,
-    };
+    this.#inspector.memory = memory;
+    this.#inspector.address = this.#address;
+    this.#inspector.memoryOffset = memoryChunkStart;
+    this.#inspector.outerMemoryLength = this.#memory.length;
+    this.#inspector.hideValueInspector = true;
   }
 
   #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
@@ -80,13 +80,11 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const chunkEnd = Math.max(end, start + MEMORY_TRANSFER_MIN_CHUNK_SIZE);
     const memory = this.#memory.slice(start, chunkEnd);
 
-    this.#inspector.data = {
-      memory,
-      address,
-      memoryOffset: start,
-      outerMemoryLength: this.#memory.length,
-      hideValueInspector: true,
-    };
+    this.#inspector.memory = memory;
+    this.#inspector.address = address;
+    this.#inspector.memoryOffset = start;
+    this.#inspector.outerMemoryLength = this.#memory.length;
+    this.#inspector.hideValueInspector = true;
   }
 }
 

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../components/highlighting/highlighting.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
@@ -113,38 +115,41 @@ interface ViewInput {
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  function highlight(node: XMLTreeViewNode, closeTag: boolean): ReturnType<typeof Lit.Directives.ref> {
+  function highlight(node: XMLTreeViewNode, closeTag: boolean): {highlights: string, selected: string} {
+    let highlights = '';
+    let selected = '';
     if (!input.search) {
-      return Lit.nothing;
+      return {highlights, selected};
     }
     const entries = input.search.getResults(node);
-    const highlights = [];
-    let selected = undefined;
     for (const entry of entries ?? []) {
       if (entry.isPostOrderMatch === closeTag) {
         const range = new TextUtils.TextRange.SourceRange(entry.match.index, entry.match[0].length);
         if (entry === input.jumpToNextSearchResult) {
-          selected = range;
+          selected = `${range.offset},${range.length}`;
         } else {
-          highlights.push(range);
+          highlights += `${range.offset},${range.length} `;
         }
       }
     }
-    return UI.TreeOutline.TreeSearch.highlight(highlights, selected);
+    return {highlights, selected};
   }
 
   function layOutNode(node: XMLTreeViewNode, populateSubtrees = false): Lit.LitTemplate {
     const onExpand = (event: UI.TreeOutline.TreeViewElement.ExpandEvent): void =>
         input.onExpand(node, event.detail.expanded);
+    const {highlights, selected} = highlight(node, /* closeTag=*/ false);
 
     // clang-format off
     return html`
-      <li ${highlight(node, /* closeTag=*/ false)} role="treeitem"
+      <li role="treeitem"
           ?selected=${input.jumpToNextSearchResult?.node === node}
           @expand=${onExpand}>
-        ${htmlView(node)}
+        <devtools-highlight ranges=${highlights} current-range=${selected}>
+          ${htmlView(node)}
+        </devtools-highlight>
         ${node.children().length ? html`
-          <ul role="group" ?hidden=${!node.expanded}>
+          <ul role="group" ?hidden=${!node.expanded && input.jumpToNextSearchResult?.node !== node}>
             ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
           </ul>` : Lit.nothing}
       </li>`;
@@ -156,15 +161,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     if (children.length === 0) {
       return Lit.nothing;
     }
+    const {highlights, selected} = highlight(treeNode, /* closeTag=*/ true);
     // clang-format off
     return html`
       ${children.map(child => layOutNode(child, treeNode.expanded))}
-      ${treeNode.node instanceof Element
-          ? html`<li
-                  ${highlight(treeNode, /* closeTag=*/ true)}
-                  role="treeitem"><span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span
-                 ></li>`
-          : Lit.nothing}`;
+      ${treeNode.node instanceof Element ? html`
+        <li role="treeitem">
+          <devtools-highlight ranges=${highlights} current-range=${selected}>
+            <span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span>
+          </devtools-highlight>
+        </li>` : Lit.nothing}`;
     // clang-format on
   }
 

package/front_end/ui/legacy/components/source_frame/xmlView.css

@@ -4,10 +4,8 @@
  * found in the LICENSE file.
  */
 
-@scope to (devtools-widget > *) {
 .shadow-xml-view {
   user-select: text;
   overflow: auto;
   padding: 0;
 }
-}

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -1107,10 +1107,12 @@ interface LinkDisplayOptions {
   revealBreakpoint?: boolean;
 }
 
-// The filter function for the openResourceHandlers. Returns true if the `url`
-// should be considered for a particular handler. `specificSchemeHandlers`
-// is the set of all schemes handled by all registered DevTools extensions
-// (that specify a particular scheme).
+/**
+ * The filter function for the openResourceHandlers. Returns true if the `url`
+ * should be considered for a particular handler. `specificSchemeHandlers`
+ * is the set of all schemes handled by all registered DevTools extensions
+ * (that specify a particular scheme).
+ **/
 export type LinkHandlerPredicate = (url: Platform.DevToolsPath.UrlString, specificSchemeHandlers: Set<string>) =>
     boolean;
 

package/front_end/ui/visual_logging/Debugging.ts

@@ -709,10 +709,12 @@ export function processStartLoggingForDebugging(): void {
   }
 }
 
-// Compares the 'actual' log entry against the 'expected'.
-// For impressions events to match, all expected impressions need to be present
-// in the actual event. Unexpected impressions in the actual event are ignored.
-// Interaction events need to match exactly.
+/**
+ * Compares the 'actual' log entry against the 'expected'.
+ * For impressions events to match, all expected impressions need to be present
+ * in the actual event. Unexpected impressions in the actual event are ignored.
+ * Interaction events need to match exactly.
+ **/
 function compareVeEvents(actual: TestLogEntry, expected: TestLogEntry): boolean {
   if ('interaction' in expected && 'interaction' in actual) {
     const actualString = formatInteraction(actual);
@@ -778,8 +780,10 @@ function formatVeEvents(events: TestLogEntry[]): string {
       .join('\n');
 }
 
-// Verifies that VE events contains all the expected events in given order.
-// Unexpected VE events are ignored.
+/**
+ * Verifies that VE events contains all the expected events in given order.
+ * Unexpected VE events are ignored.
+ **/
 export async function expectVeEvents(expectedEvents: TestLogEntry[]): Promise<void> {
   if (pendingEventExpectation) {
     throw new Error('VE events expectation already set. Cannot set another one until the previous is resolved');

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3648,6 +3648,7 @@ export const knownContextValues = new Set([
   'take-screenshot',
   'target',
   'target-crashed',
+  'target-current',
   'target-selector',
   'targets',
   'task-duration',
@@ -4107,9 +4108,6 @@ export const knownContextValues = new Set([
   'webauthn.export-credential',
   'webauthn.remove-authenticator',
   'webauthn.remove-credential',
-  'webbundle',
-  'webbundle-explainer',
-  'webbundle-request',
   'webgl-error-fired',
   'webgl-warning-fired',
   'webp-format-disabled',

package/inspector_overlay/common.ts

@@ -47,9 +47,11 @@ export interface ResetData {
   scrollY: number;
 }
 
-// Overlay class should be used to implement various tools and provide
-// access to globals via the window object it receives in the constructor.
-// Old logic is kept temporarily while the tools are being migrated.
+/**
+ * Overlay class should be used to implement various tools and provide
+ * access to globals via the window object it receives in the constructor.
+ * Old logic is kept temporarily while the tools are being migrated.
+ **/
 export class Overlay {
   protected viewportSize = {width: 800, height: 600};
   protected viewportSizeForMediaQueries?: ViewportSize;

package/inspector_overlay/highlight_grid_common.ts

@@ -6,7 +6,7 @@ import type {AreaBounds, Bounds} from './common.js';
 import {drawGridLabels, type GridLabelState, isHorizontalWritingMode} from './css_grid_label_helpers.js';
 import {applyMatrixToPoint, buildPath, emptyBounds, hatchFillPath} from './highlight_common.js';
 
-// TODO(alexrudenko): Grid label unit tests depend on this style so it cannot be extracted yet.
+/** TODO(alexrudenko): Grid label unit tests depend on this style so it cannot be extracted yet. **/
 export const gridStyle = `
 /* Grid row and column labels */
 .grid-label-content {

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1522585"
+  "version": "1.0.1525561"
 }

package/front_end/Images/src/bundle.svg

@@ -1,3 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3 16.5V7.917C2.68067 7.81967 2.434 7.639 2.26 7.375C2.08667 7.111 2 6.81933 2 6.5V3.5C2 3.08333 2.146 2.72933 2.438 2.438C2.72933 2.146 3.08333 2 3.5 2H16.5C16.9167 2 17.2707 2.146 17.562 2.438C17.854 2.72933 18 3.08333 18 3.5V6.5C18 6.81933 17.9133 7.111 17.74 7.375C17.566 7.639 17.3193 7.81967 17 7.917V16.5C17 16.9167 16.854 17.2707 16.562 17.562C16.2707 17.854 15.9167 18 15.5 18H4.5C4.08333 18 3.72933 17.854 3.438 17.562C3.146 17.2707 3 16.9167 3 16.5ZM4.5 8V16.5H15.5V8H4.5ZM16.5 6.5V3.5H3.5V6.5H16.5ZM8 11.5H12V10H8V11.5Z" fill="black"/>
-</svg>

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

@@ -1,27 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-:host {
-  --icon-padding: 4px;
-
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.header {
-  display: flex;
-  font-weight: bold;
-  padding: calc(2 * var(--icon-padding)) var(--icon-padding);
-  line-height: 20px;
-}
-
-.icon {
-  margin: 0 var(--icon-padding);
-}
-
-devtools-data-grid {
-  height: 100%;
-}

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

@@ -1,95 +0,0 @@
-// Copyright 2018 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 rulesdir/no-lit-render-outside-of-view */
-
-import '../../../ui/legacy/components/data_grid/data_grid.js';
-import '../../../ui/components/icon_button/icon_button.js';
-
-import * as Common from '../../../core/common/common.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
-import {PanelUtils} from '../../../panels/utils/utils.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import {html, render} from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-
-import webBundleInfoViewStyles from './WebBundleInfoView.css.js';
-
-const {mimeFromURL, fromMimeTypeOverride, fromMimeType} = Common.ResourceType.ResourceType;
-const {iconDataForResourceType} = PanelUtils;
-
-const UIStrings = {
-  /**
-   * @description Header for the column that contains URL of the resource in a web bundle.
-   */
-  bundledResource: 'Bundled resource',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/network/components/WebBundleInfoView.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class WebBundleInfoView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #webBundleInfo: Readonly<SDK.NetworkRequest.WebBundleInfo>;
-  #webBundleName: Readonly<string>;
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
-    const webBundleInfo = request.webBundleInfo();
-    if (!webBundleInfo) {
-      throw new Error('Trying to render a Web Bundle info without providing data');
-    }
-
-    this.#webBundleInfo = webBundleInfo;
-    this.#webBundleName = request.parsedURL.lastPathComponent;
-    this.setAttribute('jslog', `${VisualLogging.pane('webbundle').track({resize: true})}`);
-  }
-
-  override async render(): Promise<void> {
-    // clang-format off
-    render(html`
-      <style>${webBundleInfoViewStyles}</style>
-      <div class="header">
-        <devtools-icon name="bundle" class="icon extra-large">
-        </devtools-icon>
-        <span>${this.#webBundleName}</span>
-        <x-link href="https://web.dev/web-bundles/#explaining-web-bundles"
-          jslog=${VisualLogging.link('webbundle-explainer').track({
-          click: true,
-        })}>
-          <devtools-icon name="help" class="icon medium">
-          </devtools-icon>
-        </x-link>
-      </div>
-      <devtools-data-grid striped>
-        <table>
-          <tr>
-            <th id="url">${i18nString(UIStrings.bundledResource)}</th>
-          </tr>
-          ${this.#webBundleInfo.resourceUrls?.map(url => {
-            const mimeType = mimeFromURL(url) || null;
-            const resourceType = fromMimeTypeOverride(mimeType) || fromMimeType(mimeType);
-            const iconData = iconDataForResourceType(resourceType);
-            return html`<tr>
-              <td>
-                <div style="display: flex;">
-                  <devtools-icon class="icon extra-large" .data=${iconData} as IconData}>
-                  </devtools-icon>
-                  <span>${url}</span>
-                </div>
-              </td>
-            </tr>`;
-        })}
-        </table>
-      </devtools-data-grid>`,
-        this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-web-bundle-info', WebBundleInfoView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-web-bundle-info': WebBundleInfoView;
-  }
-}