chrome-devtools-frontend 1.0.1018569 → 1.0.1019968

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

@@ -4,6 +4,7 @@
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
+import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import {toHexString} from './LinearMemoryInspectorUtils.js';
 import linearMemoryViewerStyles from './linearMemoryViewer.css.js';
 
@@ -14,6 +15,7 @@ export interface LinearMemoryViewerData {
   address: number;
   memoryOffset: number;
   focus: boolean;
+  highlightInfo?: HighlightInfo;
 }
 
 export class ByteSelectedEvent extends Event {
@@ -50,6 +52,10 @@ export class LinearMemoryViewer extends HTMLElement {
   #memory = new Uint8Array();
   #address = 0;
   #memoryOffset = 0;
+  #highlightInfo: HighlightInfo = {
+    size: 0,
+    startAddress: 0,
+  };
 
   #numRows = 1;
   #numBytesInRow = BYTE_GROUP_SIZE;
@@ -69,6 +75,7 @@ export class LinearMemoryViewer extends HTMLElement {
 
     this.#memory = data.memory;
     this.#address = data.address;
+    this.#highlightInfo = data.highlightInfo || this.#highlightInfo;
     this.#memoryOffset = data.memoryOffset;
     this.#focusOnByte = data.focus;
     this.#update();
@@ -230,18 +237,20 @@ export class LinearMemoryViewer extends HTMLElement {
   #renderByteValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
+      const actualIndex = i + this.#memoryOffset;
       // Add margin after each group of bytes of size byteGroupSize.
       const addMargin = i !== startIndex && (i - startIndex) % BYTE_GROUP_SIZE === 0;
       const selected = i === this.#address - this.#memoryOffset;
+      const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
       const classMap = {
         'cell': true,
         'byte-cell': true,
         'byte-group-margin': addMargin,
         selected,
+        'highlight-area': shouldBeHighlighted,
       };
       const isSelectableCell = i < this.#memory.length;
       const byteValue = isSelectableCell ? html`${toHexString({number: this.#memory[i], pad: 2, prefix: false})}` : '';
-      const actualIndex = i + this.#memoryOffset;
       const onSelectedByte = isSelectableCell ? this.#onSelectedByte.bind(this, actualIndex) : '';
       cells.push(html`<span class=${LitHtml.Directives.classMap(classMap)} @click=${onSelectedByte}>${byteValue}</span>`);
     }
@@ -251,10 +260,13 @@ export class LinearMemoryViewer extends HTMLElement {
   #renderCharacterValues(startIndex: number, endIndex: number): LitHtml.TemplateResult {
     const cells = [];
     for (let i = startIndex; i < endIndex; ++i) {
+      const actualIndex = i + this.#memoryOffset;
+      const shouldBeHighlighted = this.#shouldBeHighlighted(actualIndex);
       const classMap = {
         'cell': true,
         'text-cell': true,
         selected: this.#address - this.#memoryOffset === i,
+        'highlight-area': shouldBeHighlighted,
       };
       const isSelectableCell = i < this.#memory.length;
       const value = isSelectableCell ? html`${this.#toAscii(this.#memory[i])}` : '';
@@ -274,6 +286,11 @@ export class LinearMemoryViewer extends HTMLElement {
   #onSelectedByte(index: number): void {
     this.dispatchEvent(new ByteSelectedEvent(index));
   }
+
+  #shouldBeHighlighted(index: number): boolean {
+    return this.#highlightInfo.startAddress <= index
+    && index < this.#highlightInfo.startAddress + this.#highlightInfo.size;
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-linear-memory-inspector-viewer', LinearMemoryViewer);

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

@@ -0,0 +1,8 @@
+// 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.
+
+export interface HighlightInfo {
+  startAddress: number;
+  size: number;
+}

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

@@ -36,6 +36,10 @@
   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);

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

@@ -9,6 +9,7 @@ import * as LinearMemoryInspectorUtils from './LinearMemoryInspectorUtils.js';
 import * as LinearMemoryNavigator from './LinearMemoryNavigator.js';
 import * as LinearMemoryValueInterpreter from './LinearMemoryValueInterpreter.js';
 import * as LinearMemoryViewer from './LinearMemoryViewer.js';
+import * as LinearMemoryViewerUtils from './LinearMemoryViewerUtils.js';
 import * as ValueInterpreterDisplay from './ValueInterpreterDisplay.js';
 import * as ValueInterpreterDisplayUtils from './ValueInterpreterDisplayUtils.js';
 import * as ValueInterpreterSettings from './ValueInterpreterSettings.js';
@@ -21,6 +22,7 @@ export {
   LinearMemoryNavigator,
   LinearMemoryValueInterpreter,
   LinearMemoryViewer,
+  LinearMemoryViewerUtils,
   ValueInterpreterDisplay,
   ValueInterpreterDisplayUtils,
   ValueInterpreterSettings,

package/front_end/ui/components/node_text/nodeText.css

@@ -7,21 +7,21 @@
 /* See: https://crbug.com/1227651 for details on changing these to --override pattern. */
 
 .node-label-name {
-  color: var(--override-node-text-label-color, --color-token-tag);
+  color: var(--override-node-text-label-color, var(--color-token-tag));
 }
 
 .node-label-class {
-  color: var(--override-node-text-class-color, --color-token-attribute);
+  color: var(--override-node-text-class-color, var(--color-token-attribute));
 }
 
 .node-label-id {
-  color: var(--override-node-text-id-color);
+  color: var(--override-node-text-id-color, var(--color-token-attribute));
 }
 
 .node-label-class.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, var(--color-token-attribute)));
 }
 
 .node-label-id.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, var(--color-token-attribute)));
 }

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -67,18 +67,11 @@ export class PreviewToggle extends HTMLElement {
 
   #render(): void {
     const checked = Root.Runtime.experiments.isEnabled(this.#experiment);
-    const hasLink = Boolean(this.#feedbackURL) || Boolean(this.#learnMoreURL);
-
-    const containerClasses = LitHtml.Directives.classMap({
-      'container': true,
-      'has-link': hasLink,
-    });
-
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
       html`
-      <div class=${containerClasses}>
+      <div class="container">
         <div class="checkbox-line">
           <label class="experiment-preview">
             <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>

package/front_end/ui/components/panel_feedback/previewToggle.css

@@ -33,16 +33,10 @@
   padding: 4px;
 }
 
-.container.has-link {
-  /* For x-link outline not to paint over the helper text
-  we need to have 2 * <padding>px additional line height */
-  line-height: calc(1em + 8px);
-}
-
 .x-link {
   color: var(--color-primary);
   text-decoration-line: underline;
-  padding: 4px;
+  margin: 4px;
 }
 
 .feedback .x-link {

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -38,6 +38,7 @@ li {
   height: 12px;
   width: 13px;
   overflow: hidden;
+  flex: none;
 }
 
 ul {

package/package.json

@@ -55,5 +55,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.1018569"
+  "version": "1.0.1019968"
 }