chrome-devtools-frontend 1.0.1038685 → 1.0.1039140

package/front_end/core/i18n/locales/en-US.json

@@ -12165,10 +12165,10 @@
     "message": "Show Memory Inspector"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | deleteHighlight": {
-    "message": "Delete memory highlight"
+    "message": "Stop highlighting this memory"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | jumpToAddress": {
-    "message": "Jump to highlighted memory"
+    "message": "Jump to this memory"
   },
   "ui/components/linear_memory_inspector/LinearMemoryInspector.ts | addressHasToBeANumberBetweenSAnd": {
     "message": "Address has to be a number between {PH1} and {PH2}"

package/front_end/core/i18n/locales/en-XL.json

@@ -12165,10 +12165,10 @@
     "message": "Ŝh́ôẃ M̂ém̂ór̂ý Îńŝṕêćt̂ór̂"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | deleteHighlight": {
-    "message": "D̂él̂ét̂é m̂ém̂ór̂ý ĥíĝh́l̂íĝh́t̂"
+    "message": "Ŝt́ôṕ ĥíĝh́l̂íĝh́t̂ín̂ǵ t̂h́îś m̂ém̂ór̂ý"
   },
   "ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts | jumpToAddress": {
-    "message": "Ĵúm̂ṕ t̂ó ĥíĝh́l̂íĝh́t̂éd̂ ḿêḿôŕŷ"
+    "message": "Ĵúm̂ṕ t̂ó t̂h́îś m̂ém̂ór̂ý"
   },
   "ui/components/linear_memory_inspector/LinearMemoryInspector.ts | addressHasToBeANumberBetweenSAnd": {
     "message": "Âd́d̂ŕêśŝ h́âś t̂ó b̂é â ńûḿb̂ér̂ b́êt́ŵéêń {PH1} âńd̂ {PH2}"

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

@@ -12,13 +12,16 @@ import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList
 
 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.
+  *@description Tooltip text that appears when hovering over an inspected variable's button in the Linear Memory Highlight Chip List.
+  Clicking the button changes the displayed slice of computer memory in the Linear Memory Inspector to contain the inspected variable's bytes.
   */
-  jumpToAddress: 'Jump to highlighted memory',
+  jumpToAddress: 'Jump to this 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.
+   *@description Tooltip text that appears when hovering over an inspected variable's delete button in the Linear Memory Highlight Chip List.
+   Clicking the delete button stops highlighting the variable's memory in the Linear Memory Inspector.
+   'Memory' is a slice of bytes in the computer memory.
    */
-  deleteHighlight: 'Delete memory highlight',
+  deleteHighlight: 'Stop highlighting this memory',
 };
 const str_ =
     i18n.i18n.registerUIStrings('ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts', UIStrings);
@@ -27,6 +30,7 @@ const {render, html} = LitHtml;
 
 export interface LinearMemoryHighlightChipListData {
   highlightInfos: Array<HighlightInfo>;
+  focusedMemoryHighlight?: HighlightInfo;
 }
 
 export class DeleteMemoryHighlightEvent extends Event {
@@ -54,6 +58,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #highlightedAreas: HighlightInfo[] = [];
+  #focusedMemoryHighlight?: HighlightInfo;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [linearMemoryHighlightChipListStyles];
@@ -61,6 +66,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
 
   set data(data: LinearMemoryHighlightChipListData) {
     this.#highlightedAreas = data.highlightInfos;
+    this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
     this.#render();
   }
 
@@ -83,11 +89,15 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
   #createChip(highlightInfo: HighlightInfo): LitHtml.TemplateResult {
     const expressionName = highlightInfo.name || '<anonymous>';
     const expressionType = highlightInfo.type;
-
+    const isFocused = highlightInfo === this.#focusedMemoryHighlight;
+    const classMap = {
+      focused: isFocused,
+      'highlight-chip': true,
+    };
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="highlight-chip">
+      <div class=${LitHtml.Directives.classMap(classMap)}>
         <button class="jump-to-highlight-button" title=${
             i18nString(UIStrings.jumpToAddress)}
             @click=${():void => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>

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

@@ -203,6 +203,7 @@ export class LinearMemoryInspector extends HTMLElement {
     const canGoForwardInHistory = this.#history.canRollover();
 
     const highlightedMemoryAreas = this.#highlightInfo ? [this.#highlightInfo] : [];
+    const focusedMemoryHighlight = this.#getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas, this.#address);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -214,9 +215,8 @@ export class LinearMemoryInspector extends HTMLElement {
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></${LinearMemoryNavigator.litTagName}>
           <${LinearMemoryHighlightChipList.litTagName}
-          .data=${{highlightInfos: highlightedMemoryAreas} as LinearMemoryHighlightChipListData}
-          @jumptohighlightedmemory=${this.#onJumpToAddress}
-          @>
+          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight: focusedMemoryHighlight } as LinearMemoryHighlightChipListData}
+          @jumptohighlightedmemory=${this.#onJumpToAddress}>
           </${LinearMemoryHighlightChipList.litTagName}>
         <${LinearMemoryViewer.litTagName}
           .data=${{
@@ -224,7 +224,8 @@ export class LinearMemoryInspector extends HTMLElement {
             end - this.#memoryOffset),
             address: this.#address, memoryOffset: start,
             focus: this.#currentNavigatorMode === Mode.Submitted,
-            highlightInfo: this.#highlightInfo } as LinearMemoryViewerData}
+            highlightInfo: this.#highlightInfo,
+            focusedMemoryHighlight: focusedMemoryHighlight } as LinearMemoryViewerData}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </${LinearMemoryViewer.litTagName}>
@@ -375,6 +376,29 @@ export class LinearMemoryInspector extends HTMLElement {
     this.#address = address;
     this.dispatchEvent(new AddressChangedEvent(this.#address));
   }
+
+  // Returns the highlightInfo with the smallest size property that encloses the provided address.
+  // If there are multiple smallest enclosing highlights, we pick the one appearing the earliest in highlightedMemoryAreas.
+  // If no such highlightInfo exists, it returns undefined.
+  //
+  // Selecting the smallest enclosing memory highlight is a heuristic that aims to pick the
+  // most specific highlight given a provided address. This way, objects contained in other objects are
+  // potentially still accessible.
+  #getSmallestEnclosingMemoryHighlight(highlightedMemoryAreas: HighlightInfo[], address: number): HighlightInfo
+      |undefined {
+    let smallestEnclosingHighlight;
+    for (const highlightedMemory of highlightedMemoryAreas) {
+      if (highlightedMemory.startAddress <= address &&
+          address < highlightedMemory.startAddress + highlightedMemory.size) {
+        if (!smallestEnclosingHighlight) {
+          smallestEnclosingHighlight = highlightedMemory;
+        } else if (highlightedMemory.size < smallestEnclosingHighlight.size) {
+          smallestEnclosingHighlight = highlightedMemory;
+        }
+      }
+    }
+    return smallestEnclosingHighlight;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-inspector', LinearMemoryInspector);

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

@@ -16,6 +16,7 @@ export interface LinearMemoryViewerData {
   memoryOffset: number;
   focus: boolean;
   highlightInfo?: HighlightInfo;
+  focusedMemoryHighlight?: HighlightInfo;
 }
 
 export class ByteSelectedEvent extends Event {
@@ -53,6 +54,7 @@ export class LinearMemoryViewer extends HTMLElement {
   #address = 0;
   #memoryOffset = 0;
   #highlightInfo?: HighlightInfo;
+  #focusedMemoryHighlight?: HighlightInfo;
 
   #numRows = 1;
   #numBytesInRow = BYTE_GROUP_SIZE;
@@ -73,6 +75,7 @@ export class LinearMemoryViewer extends HTMLElement {
     this.#memory = data.memory;
     this.#address = data.address;
     this.#highlightInfo = data.highlightInfo;
+    this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
     this.#memoryOffset = data.memoryOffset;
     this.#focusOnByte = data.focus;
     this.#update();
@@ -239,12 +242,14 @@ export class LinearMemoryViewer extends HTMLElement {
       const addMargin = i !== startIndex && (i - startIndex) % BYTE_GROUP_SIZE === 0;
       const selected = i === this.#address - this.#memoryOffset;
       const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
+      const focusedMemoryArea = this.#isFocusedArea(actualIndex);
       const classMap = {
         'cell': true,
         'byte-cell': true,
         'byte-group-margin': addMargin,
         selected,
         'highlight-area': shouldBeHighlighted,
+        'focused-area': focusedMemoryArea,
       };
       const isSelectableCell = i < this.#memory.length;
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
@@ -259,11 +264,13 @@ export class LinearMemoryViewer extends HTMLElement {
     for (let i = startIndex; i < endIndex; ++i) {
       const actualIndex = i + this.#memoryOffset;
       const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
+      const focusedMemoryArea = this.#isFocusedArea(actualIndex);
       const classMap = {
         'cell': true,
         'text-cell': true,
         selected: this.#address - this.#memoryOffset === i,
         'highlight-area': shouldBeHighlighted,
+        'focused-area': focusedMemoryArea,
       };
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
@@ -291,6 +298,14 @@ export class LinearMemoryViewer extends HTMLElement {
     return this.#highlightInfo.startAddress <= index
     && index < this.#highlightInfo.startAddress + this.#highlightInfo.size;
   }
+
+  #isFocusedArea(index: number): boolean {
+    if (!this.#focusedMemoryHighlight) {
+      return false;
+    }
+    return this.#focusedMemoryHighlight.startAddress <= index
+    && index < this.#focusedMemoryHighlight.startAddress + this.#focusedMemoryHighlight.size;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-viewer', LinearMemoryViewer);

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

@@ -59,18 +59,6 @@
   border-radius: 50%;
 }
 
-.highlight-chip:hover > .delete-highlight-container {
-  display: flex;
-  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
-  background: linear-gradient(90deg, transparent 0%, rgb(241 243 244) 25%); /* stylelint-disable-line plugin/use_theme_colors */
-}
-
-:host-context(.-theme-with-dark-background) .highlight-chip:hover > .delete-highlight-container {
-  display: flex;
-  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
-  background: linear-gradient(90deg, transparent 0%, rgb(41 42 45) 25%); /* stylelint-disable-line plugin/use_theme_colors */
-}
-
 .jump-to-highlight-button {
   cursor: pointer;
   padding: 0;
@@ -108,3 +96,30 @@
   white-space: pre;
   flex-shrink: 0;
 }
+
+.highlight-chip.focused {
+  border-color: var(--color-primary);
+  background-color: var(--color-button-secondary-background-hovering);
+}
+
+.highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(241 243 244) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+.highlight-chip.focused:hover > .delete-highlight-container {
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(231 241 253) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+:host-context(.-theme-with-dark-background) .highlight-chip:hover > .delete-highlight-container {
+  display: flex;
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(41 42 45) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+:host-context(.-theme-with-dark-background) .highlight-chip.focused:hover > .delete-highlight-container {
+  /* To avoid issues with stacking semi-transparent colors, we use a hardcoded solid color here. */
+  background: linear-gradient(90deg, transparent 0%, rgb(48 55 68) 25%); /* stylelint-disable-line plugin/use_theme_colors */
+}

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

@@ -36,10 +36,6 @@
   background-color: var(--legacy-item-selection-bg-color);
 }
 
-.highlight-area {
-  background-color: var(--legacy-item-selection-bg-color);
-}
-
 .byte-cell {
   min-width: 21px;
   color: var(--color-text-primary);
@@ -69,3 +65,22 @@
   background-color: var(--color-details-hairline);
   margin: 0 4px;
 }
+
+.highlight-area {
+  background-color: var(--color-background-elevation-2);
+}
+
+.cell.focused-area {
+  background-color: var(--color-primary-variant);
+  color: var(--color-button-primary-text);
+}
+
+.cell.focused-area.selected {
+  background: rgb(1 74 195); /* stylelint-disable-line plugin/use_theme_colors */
+  border-color: var(--color-button-outline-focus);
+}
+
+:host-context(.-theme-with-dark-background) .cell.focused-area.selected {
+  background: rgb(192 216 255); /* stylelint-disable-line plugin/use_theme_colors */
+  border-color: var(--color-button-outline-focus);
+}

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.1038685"
+  "version": "1.0.1039140"
 }