chrome-devtools-frontend 1.0.1032471 → 1.0.1033423

package/front_end/third_party/codemirror.next/codemirror.next.d.ts

@@ -2525,10 +2525,11 @@ declare class EditorView {
     */
     get compositionStarted(): boolean;
     private _dispatch;
+    private _root;
     /**
     The document or shadow root that the view lives in.
     */
-    readonly root: DocumentOrShadowRoot;
+    get root(): DocumentOrShadowRoot;
     /**
     The DOM element that wraps the entire editor view.
     */
@@ -2630,13 +2631,14 @@ declare class EditorView {
     /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
-    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height: number): BlockInfo;
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height: number): BlockInfo;
     /**
@@ -2799,6 +2801,11 @@ declare class EditorView {
     */
     focus(): void;
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root: Document | ShadowRoot): void;
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after

package/front_end/third_party/codemirror.next/package.json

@@ -20,7 +20,7 @@
     "@codemirror/legacy-modes": "6.1.0",
     "@codemirror/search": "6.0.1",
     "@codemirror/state": "6.1.1",
-    "@codemirror/view": "6.1.4",
+    "@codemirror/view": "6.2.0",
     "@lezer/common": "1.0.0",
     "@lezer/highlight": "1.0.0",
     "@lezer/lr": "1.2.1",

package/front_end/ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts

@@ -0,0 +1,129 @@
+// Copyright (c) 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
+import * as IconButton from '../icon_button/icon_button.js';
+
+import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList.css.js';
+
+const UIStrings = {
+  /**
+  *@description Tooltip text that appears when hovering over a 'jump-to-highlight-button' button that is on the left side of a 'highlight-chip' chip.
+  */
+  jumpToAddress: 'Jump to highlighted memory',
+  /**
+   *@description Tooltip text that appears when hovering over a 'remove-highlight-button' button that is on the right end of a 'highlight-chip' chip.
+   */
+  deleteHighlight: 'Delete memory highlight',
+};
+const str_ =
+    i18n.i18n.registerUIStrings('ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html} = LitHtml;
+
+export interface LinearMemoryHighlightChipListData {
+  highlightInfos: Array<HighlightInfo>;
+}
+
+export class DeleteMemoryHighlightEvent extends Event {
+  static readonly eventName = 'deletememoryhighlight';
+  data: HighlightInfo;
+
+  constructor(highlightInfo: HighlightInfo) {
+    super(DeleteMemoryHighlightEvent.eventName, {bubbles: true, composed: true});
+    this.data = highlightInfo;
+  }
+}
+
+export class JumpToHighlightedMemoryEvent extends Event {
+  static readonly eventName = 'jumptohighlightedmemory';
+  data: number;
+
+  constructor(address: number) {
+    super(JumpToHighlightedMemoryEvent.eventName);
+    this.data = address;
+  }
+}
+
+export class LinearMemoryHighlightChipList extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-linear-memory-highlight-chip-list`;
+
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #highlightedAreas: HighlightInfo[] = [];
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [linearMemoryHighlightChipListStyles];
+  }
+
+  set data(data: LinearMemoryHighlightChipListData) {
+    this.#highlightedAreas = data.highlightInfos;
+    this.#render();
+  }
+
+  #render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    const chips = [];
+    for (const highlightInfo of this.#highlightedAreas) {
+      chips.push(this.#createChip(highlightInfo));
+    }
+    const result = html`
+            <div class="highlight-chip-list">
+              ${chips}
+            </div>
+        `;
+    render(result, this.#shadow, { host: this });
+    // clang-format on
+  }
+
+  #createChip(highlightInfo: HighlightInfo): LitHtml.TemplateResult {
+    const expressionName = highlightInfo.name || '<anonymous>';
+    const expressionType = highlightInfo.type;
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <div class="highlight-chip">
+        <button class="jump-to-highlight-button" title=${
+            i18nString(UIStrings.jumpToAddress)}
+            @click=${():void => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>
+          <span class="source-code">
+            <span class="value">${expressionName}</span><span class="separator">: </span><span>${expressionType}</span>
+          </span>
+        </button>
+        <button class="delete-highlight-button" title=${
+            i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
+          <${IconButton.Icon.Icon.litTagName} .data=${{
+            iconName: 'close-icon',
+            color: 'black',
+            width: '7px',
+            } as IconButton.Icon.IconData}>
+          </${IconButton.Icon.Icon.litTagName}>
+        </button>
+      </div>
+    `;
+    // clang-format off
+  }
+
+  #onJumpToHighlightClick(startAddress: number): void {
+    this.dispatchEvent(new JumpToHighlightedMemoryEvent(startAddress));
+  }
+
+  #onDeleteHighlightClick(highlight:HighlightInfo): void {
+    this.dispatchEvent(new DeleteMemoryHighlightEvent(highlight));
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent(
+    'devtools-linear-memory-highlight-chip-list', LinearMemoryHighlightChipList);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-linear-memory-highlight-chip-list': LinearMemoryHighlightChipList;
+  }
+}

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspector.ts

@@ -41,6 +41,12 @@ import {
   type LinearMemoryViewerData,
   type ResizeEvent,
 } from './LinearMemoryViewer.js';
+import {
+  LinearMemoryHighlightChipList,
+  type LinearMemoryHighlightChipListData,
+  type DeleteMemoryHighlightEvent,
+  type JumpToHighlightedMemoryEvent,
+} from './LinearMemoryHighlightChipList.js';
 import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -195,6 +201,8 @@ export class LinearMemoryInspector extends HTMLElement {
 
     const canGoBackInHistory = this.#history.canRollback();
     const canGoForwardInHistory = this.#history.canRollover();
+
+    const highlightedMemoryAreas = this.#highlightInfo ? [this.#highlightInfo] : [];
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -205,6 +213,11 @@ export class LinearMemoryInspector extends HTMLElement {
           @addressinputchanged=${this.#onAddressChange}
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
+          <${LinearMemoryHighlightChipList.litTagName}
+          .data=${{highlightInfos: highlightedMemoryAreas} as LinearMemoryHighlightChipListData}
+          @jumptohighlightedmemory=${this.#onJumpToAddress}
+          @>
+          </${LinearMemoryHighlightChipList.litTagName}>
         <${LinearMemoryViewer.litTagName}
           .data=${{
             memory: this.#memory.slice(start - this.#memoryOffset,
@@ -227,7 +240,7 @@ export class LinearMemoryInspector extends HTMLElement {
           @valuetypetoggled=${this.#onValueTypeToggled}
           @valuetypemodechanged=${this.#onValueTypeModeChanged}
           @endiannesschanged=${this.#onEndiannessChanged}
-          @jumptopointeraddress=${this.#onJumpToPointerAddress}
+          @jumptopointeraddress=${this.#onJumpToAddress}
           >
         </${LinearMemoryValueInterpreter.litTagName}/>
       </div>
@@ -237,7 +250,7 @@ export class LinearMemoryInspector extends HTMLElement {
     // clang-format on
   }
 
-  #onJumpToPointerAddress(e: JumpToPointerAddressEvent): void {
+  #onJumpToAddress(e: JumpToPointerAddressEvent|JumpToHighlightedMemoryEvent): void {
     // Stop event from bubbling up, since no element further up needs the event.
     e.stopPropagation();
     this.#currentNavigatorMode = Mode.Submitted;
@@ -375,5 +388,6 @@ declare global {
     'memoryrequest': MemoryRequestEvent;
     'addresschanged': AddressChangedEvent;
     'settingschanged': SettingsChangedEvent;
+    'deletememoryhighlight': DeleteMemoryHighlightEvent;
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -198,7 +198,14 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return this.#bufferIdToHighlightInfo.get(bufferId);
   }
 
-  #setHighlightInfo(bufferId: string, highlightInfo: HighlightInfo): void {
+  removeHighlight(bufferId: string, highlightInfo: HighlightInfo): void {
+    const currentHighlight = this.getHighlightInfo(bufferId);
+    if (currentHighlight === highlightInfo) {
+      this.#bufferIdToHighlightInfo.delete(bufferId);
+    }
+  }
+
+  setHighlightInfo(bufferId: string, highlightInfo: HighlightInfo): void {
     this.#bufferIdToHighlightInfo.set(bufferId, highlightInfo);
   }
 
@@ -333,7 +340,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     const memory = memoryProperty?.value;
     const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, expression);
     if (highlightInfo) {
-      this.#setHighlightInfo(id, highlightInfo);
+      this.setHighlightInfo(id, highlightInfo);
     } else {
       this.#resetHighlightInfo(id);
     }
@@ -428,7 +435,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     if (!newHighlightInfo || !this.#pointToSameMemoryObject(newHighlightInfo, oldHighlightInfo)) {
       this.#resetHighlightInfo(bufferId);
     } else {
-      this.#setHighlightInfo(bufferId, newHighlightInfo);
+      this.setHighlightInfo(bufferId, newHighlightInfo);
     }
   }
 

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -7,15 +7,16 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../legacy/legacy.js';
 
 import {
+  AddressChangedEvent,
   LinearMemoryInspector,
-  type AddressChangedEvent,
-  type MemoryRequestEvent,
+  MemoryRequestEvent,
+  SettingsChangedEvent,
   type Settings,
-  type SettingsChangedEvent,
 } from './LinearMemoryInspector.js';
 
 import {LinearMemoryInspectorController, type LazyUint8Array} from './LinearMemoryInspectorController.js';
 import {type HighlightInfo} from './LinearMemoryViewerUtils.js';
+import {DeleteMemoryHighlightEvent} from './LinearMemoryHighlightChipList.js';
 
 const UIStrings = {
   /**
@@ -147,17 +148,21 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#address = address;
     this.#tabId = tabId;
     this.#inspector = new LinearMemoryInspector();
-    this.#inspector.addEventListener('memoryrequest', (event: MemoryRequestEvent) => {
+    this.#inspector.addEventListener(MemoryRequestEvent.eventName, (event: MemoryRequestEvent) => {
       this.#memoryRequested(event);
     });
-    this.#inspector.addEventListener('addresschanged', (event: AddressChangedEvent) => {
+    this.#inspector.addEventListener(AddressChangedEvent.eventName, (event: AddressChangedEvent) => {
       this.updateAddress(event.data);
     });
-    this.#inspector.addEventListener('settingschanged', (event: SettingsChangedEvent) => {
+    this.#inspector.addEventListener(SettingsChangedEvent.eventName, (event: SettingsChangedEvent) => {
       // Stop event from bubbling up, since no element further up needs the event.
       event.stopPropagation();
       this.saveSettings(event.data);
     });
+    this.#inspector.addEventListener(DeleteMemoryHighlightEvent.eventName, (event: DeleteMemoryHighlightEvent) => {
+      LinearMemoryInspectorController.instance().removeHighlight(this.#tabId, event.data);
+      this.refreshData();
+    });
     this.contentElement.appendChild(this.#inspector);
     this.firstTimeOpen = true;
   }

package/front_end/ui/components/linear_memory_inspector/linearMemoryHighlightChipList.css

@@ -0,0 +1,92 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.highlight-chip-list {
+  min-height: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: center;
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
+}
+
+.highlight-chip {
+  background: transparent;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-background-elevation-2);
+  height: 15px;
+  margin-right: 5px;
+  padding: 1px;
+  border-radius: 4px;
+  margin-bottom: 1px;
+  display: flex;
+}
+
+.highlight-chip:hover {
+  background-color: var(--color-background-elevation-1);
+}
+
+.delete-highlight-button {
+  width: 15px;
+  height: 15px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: none;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 2px;
+}
+
+.delete-highlight-button:hover {
+  background-color: var(--color-details-hairline);
+}
+
+.highlight-chip > .delete-highlight-button {
+  visibility: hidden;
+}
+
+.highlight-chip:hover > .delete-highlight-button {
+  visibility: visible;
+}
+
+.jump-to-highlight-button {
+  cursor: pointer;
+  padding: 0 0 0 4px;
+  border: none;
+  background: none;
+  display: flex;
+  align-items: center;
+}
+
+.jump-to-highlight-button:hover {
+  color: var(--color-text-primary);
+}
+
+.delete-highlight-button devtools-icon {
+  --icon-color: var(--color-text-primary);
+}
+
+.source-code {
+  font-family: var(--source-code-font-family);
+  font-size: var(--source-code-font-size);
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.value {
+  color: var(--color-syntax-2);
+}
+
+.separator {
+  white-space: pre;
+  flex-shrink: 0;
+}

package/front_end/ui/components/linear_memory_inspector/linear_memory_inspector.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as LinearMemoryHighlightChipList from './LinearMemoryHighlightChipList.js';
 import * as LinearMemoryInspector from './LinearMemoryInspector.js';
 import * as LinearMemoryInspectorController from './LinearMemoryInspectorController.js';
 import * as LinearMemoryInspectorPane from './LinearMemoryInspectorPane.js';
@@ -15,6 +16,7 @@ import * as ValueInterpreterDisplayUtils from './ValueInterpreterDisplayUtils.js
 import * as ValueInterpreterSettings from './ValueInterpreterSettings.js';
 
 export {
+  LinearMemoryHighlightChipList,
   LinearMemoryInspector,
   LinearMemoryInspectorController,
   LinearMemoryInspectorPane,

package/package.json

@@ -56,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1032471"
+  "version": "1.0.1033423"
 }