chrome-devtools-frontend 1.0.1035409 → 1.0.1036726

package/front_end/panels/sources/components/HeadersView.ts

@@ -9,6 +9,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../../generated/protocol.js';
 
 import HeadersViewStyles from './HeadersView.css.js';
 
@@ -81,23 +82,8 @@ export class HeadersView extends UI.View.SimpleView {
       parsingError = true;
     }
 
-    // Header overrides are stored as the key-value pairs of a JSON object on
-    // disk. For the editor we want them as an array instead, so that we can
-    // access/add/remove entries by their index.
-    const arrayOfHeaderOverrideArrays: HeaderOverride[] = headerOverrides.map(headerOverride => {
-      return {
-        applyTo: headerOverride.applyTo,
-        headers: Object.entries(headerOverride.headers).map(([headerName, headerValue]) => {
-          return {
-            name: headerName,
-            value: headerValue,
-          };
-        }),
-      };
-    });
-
     this.#headersViewComponent.data = {
-      headerOverrides: arrayOfHeaderOverrideArrays,
+      headerOverrides,
       uiSourceCode: this.#uiSourceCode,
       parsingError,
     };
@@ -128,18 +114,8 @@ export class HeadersView extends UI.View.SimpleView {
   }
 }
 
-type Header = {
-  name: string,
-  value: string,
-};
-
-type HeaderOverride = {
-  applyTo: string,
-  headers: Header[],
-};
-
 export interface HeadersViewComponentData {
-  headerOverrides: HeaderOverride[];
+  headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode;
   parsingError: boolean;
 }
@@ -148,7 +124,7 @@ export class HeadersViewComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #headerOverrides: HeaderOverride[] = [];
+  #headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   #parsingError = false;
   #focusElement: {blockIndex: number, headerIndex?: number}|null = null;
@@ -213,7 +189,7 @@ export class HeadersViewComponent extends HTMLElement {
     selection?.removeAllRanges();
   }
 
-  #generateNextHeaderName(headers: Header[]): string {
+  #generateNextHeaderName(headers: Protocol.Fetch.HeaderEntry[]): string {
     const takenNames = new Set<string>(headers.map(header => header.name));
     let idx = 1;
     while (takenNames.has('headerName' + idx)) {
@@ -270,17 +246,7 @@ export class HeadersViewComponent extends HTMLElement {
   }
 
   #onHeadersChanged(): void {
-    // In the editor header overrides are represented by items in an array, so
-    // that we can access/add/remove entries by their index. On disk, they are
-    // stored as key-value pairs of a JSON object instead.
-    const arrayOfHeaderOverrideObjects: Persistence.NetworkPersistenceManager.HeaderOverride[] =
-        this.#headerOverrides.map(headerOverride => {
-          return {
-            applyTo: headerOverride.applyTo,
-            headers: headerOverride.headers.reduce((a, v) => ({...a, [v.name]: v.value}), {}),
-          };
-        });
-    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(arrayOfHeaderOverrideObjects, null, 2));
+    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(this.#headerOverrides, null, 2));
   }
 
   #render(): void {
@@ -355,7 +321,8 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderHeaderRow(header: Header, blockIndex: number, headerIndex: number): LitHtml.TemplateResult {
+  #renderHeaderRow(header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number):
+      LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}>

package/front_end/panels/sources/components/breakpointsView.css

@@ -0,0 +1,95 @@
+/*
+ * 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.
+ */
+
+:host {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.divider {
+  height: 1px;
+  width: inherit;
+  background-color: var(--color-details-hairline);
+}
+
+.code-snippet {
+  width: 100%;
+  padding-left: 6px;
+  font-family: var(--source-code-font-family);
+  font-size: var(--source-code-font-size);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-shrink: 100;
+}
+
+input {
+  height: 12px;
+  width: 12px;
+  flex-shrink: 0;
+  margin: 3px 0;
+}
+
+.triangle {
+  margin-left: 6px;
+  margin-right: 4px;
+  display: inline-block;
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
+  -webkit-mask-size: 32px 24px;
+  -webkit-mask-position: 0 0;
+  background-color: var(--color-text-primary);
+  height: 12px;
+  width: 8px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  height: 18px;
+}
+
+.expanded > .group-header > .triangle {
+  -webkit-mask-position: -16px 0;
+}
+
+.group-header-title {
+  margin-left: 4px;
+  font-weight: 500;
+  font-size: var(--source-code-font-size);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.breakpoint-item {
+  display: flex;
+  align-items: center;
+  line-height: 13px;
+  height: 18px;
+}
+
+.breakpoint-item:hover {
+  background-color: var(--color-background-elevation-1);
+}
+
+.breakpoint-item.hit {
+  --override-breakpoint-hit-background: rgb(255 255 194);
+
+  background-color: var(--override-breakpoint-hit-background);
+}
+
+.checkbox-label {
+  padding-left: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.location {
+  line-height: 14px;
+  margin: 0 8px;
+}

package/front_end/panels/sources/components/components.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as BreakpointsView from './BreakpointsView.js';
 import * as HeadersView from './HeadersView.js';
 
 export {
+  BreakpointsView,
   HeadersView,
 };

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

@@ -95,15 +95,17 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
             <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 class="delete-highlight-container">
+          <button class="delete-highlight-button" title=${
+              i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
+            <${IconButton.Icon.Icon.litTagName} .data=${{
+              iconName: 'close-icon',
+              color: 'var(--color-text-primary)',
+              width: '7px',
+              } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+          </button>
+        </div>
       </div>
     `;
     // clang-format off

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

@@ -5,81 +5,99 @@
  */
 
 .highlight-chip-list {
-  min-height: 24px;
+  min-height: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   align-items: center;
   background-color: var(--color-background);
-  color: var(--color-text-primary);
+  margin: 8px 0;
+  gap: 8px;
+  row-gap: 6px;
 }
 
 .highlight-chip {
-  background: transparent;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-background-elevation-2);
-  height: 15px;
-  margin-right: 5px;
-  padding: 1px;
+  background: var(--color-background);
+  border: 1px solid var(--color-button-secondary-border);
+  height: 18px;
   border-radius: 4px;
-  margin-bottom: 1px;
-  display: flex;
+  flex: 0 0 auto;
+  max-width: 250px;
+  position: relative;
+  padding: 0 6px;
 }
 
 .highlight-chip:hover {
   background-color: var(--color-background-elevation-1);
 }
 
+.delete-highlight-container {
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  border-radius: 4px;
+  width: 24px;
+  align-items: center;
+  justify-content: center;
+}
+
 .delete-highlight-button {
-  width: 15px;
-  height: 15px;
-  border: none;
-  padding: 0;
   cursor: pointer;
-  background: none;
-  border-radius: 50%;
+  width: 13px;
+  height: 13px;
+  border: none;
+  background-color: transparent;
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin: 0 2px;
+  justify-content: center;
 }
 
 .delete-highlight-button:hover {
   background-color: var(--color-details-hairline);
+  border-radius: 50%;
 }
 
-.highlight-chip > .delete-highlight-button {
-  visibility: hidden;
+.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:hover > .delete-highlight-button {
-  visibility: visible;
+: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 0 0 4px;
+  padding: 0;
   border: none;
   background: none;
-  display: flex;
+  height: 100%;
   align-items: center;
-}
-
-.jump-to-highlight-button:hover {
-  color: var(--color-text-primary);
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .delete-highlight-button devtools-icon {
-  --icon-color: var(--color-text-primary);
+  width: 13px;
+  height: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
 }
 
 .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;
+  color: var(--color-text-primary);
 }
 
 .value {

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -396,7 +396,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         value, wasThrown, showPreview, parentElement, linkifier, variableName);
   }
 
-  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject, variableName?: string): void {
+  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject, expression?: string): void {
     // We show the memory icon only on ArrayBuffer, WebAssembly.Memory and DWARF memory instances.
     // TypedArrays DataViews are also supported, but showing the icon next to their
     // previews is quite a significant visual overhead, and users can easily get to
@@ -419,7 +419,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const controller =
           LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
       Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
-      void controller.openInspectorView(obj, undefined /* address */, variableName);
+      void controller.openInspectorView(obj, /* address */ undefined, expression);
     };
 
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');

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.1035409"
+  "version": "1.0.1036726"
 }