chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

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

@@ -0,0 +1,195 @@
+// 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 Platform from '../../../core/platform/platform.js';
+
+const SUMMARY_ELEMENT_SELECTOR = 'summary';
+
+const domNodeIsTree = (domNode: HTMLElement): boolean => {
+  return domNode.getAttribute('role') === 'tree';
+};
+
+const domNodeIsBreakpointItemNode = (domNode: HTMLElement): boolean => {
+  return domNode.getAttribute('role') === 'treeitem';
+};
+
+const domNodeIsPauseOnExceptionsNode = (domNode: HTMLElement): boolean => {
+  return domNode.getAttribute('data-first-pause') !== null || domNode.getAttribute('data-last-pause') !== null;
+};
+
+const domNodeIsSummaryNode = (domNode: HTMLElement): boolean => {
+  return !domNodeIsBreakpointItemNode(domNode);
+};
+
+const groupIsExpanded = (detailsElement: HTMLDetailsElement): boolean => {
+  return detailsElement.getAttribute('open') !== null;
+};
+
+const getFirstBreakpointItemInGroup = (detailsElement: HTMLDetailsElement): HTMLElement|null => {
+  return detailsElement.querySelector<HTMLElement>('[data-first-breakpoint]');
+};
+
+const getLastBreakpointItemInGroup = (detailsElement: HTMLDetailsElement): HTMLElement|null => {
+  return detailsElement.querySelector<HTMLDivElement>('[data-last-breakpoint]');
+};
+
+const getNextGroupsSummaryNode = (detailsElement: HTMLDetailsElement): HTMLElement|null => {
+  const nextDetailsElement = getNextDetailsElement(detailsElement);
+  if (nextDetailsElement && nextDetailsElement instanceof HTMLDetailsElement) {
+    return nextDetailsElement?.querySelector<HTMLElement>('summary');
+  }
+  return null;
+};
+
+const getCurrentSummaryNode = (detailsElement: HTMLDetailsElement): HTMLElement|null => {
+  return detailsElement.querySelector<HTMLElement>(SUMMARY_ELEMENT_SELECTOR);
+};
+
+const getNextDetailsElement = (detailsElement: HTMLDetailsElement): HTMLDetailsElement|null => {
+  const nextDetailsElement = detailsElement.nextElementSibling;
+  if (nextDetailsElement && nextDetailsElement instanceof HTMLDetailsElement) {
+    return nextDetailsElement;
+  }
+  return null;
+};
+
+const getPreviousDetailsElement = (detailsElement: HTMLDetailsElement): HTMLDetailsElement|null => {
+  const previousDetailsElement = detailsElement.previousElementSibling;
+  if (previousDetailsElement && previousDetailsElement instanceof HTMLDetailsElement) {
+    return previousDetailsElement;
+  }
+  return null;
+};
+
+function findNextNodeForPauseOnExceptions(target: HTMLElement, key: Platform.KeyboardUtilities.ArrowKey): HTMLElement|
+    null {
+  // Handle keyboard navigation on one of the pause on exceptions checkboxes.
+  console.assert(domNodeIsPauseOnExceptionsNode(target));
+  let nextNode: HTMLElement|null = null;
+  switch (key) {
+    case Platform.KeyboardUtilities.ArrowKey.UP: {
+      const previousElementSibling = target.previousElementSibling;
+      if (previousElementSibling instanceof HTMLElement) {
+        nextNode = previousElementSibling;
+        console.assert(domNodeIsPauseOnExceptionsNode(nextNode));
+      }
+      break;
+    }
+    case Platform.KeyboardUtilities.ArrowKey.DOWN: {
+      const nextElementSibling = target.nextElementSibling;
+      if (nextElementSibling instanceof HTMLElement) {
+        if (domNodeIsTree(nextElementSibling)) {
+          const detailsElement = nextElementSibling.querySelector<HTMLDetailsElement>('[data-first-group]');
+          if (detailsElement) {
+            nextNode = getCurrentSummaryNode(detailsElement);
+          }
+        } else {
+          nextNode = nextElementSibling;
+          console.assert(domNodeIsPauseOnExceptionsNode(nextNode));
+        }
+      }
+      break;
+    }
+    default:
+      break;
+  }
+
+  return nextNode;
+}
+
+export async function findNextNodeForKeyboardNavigation(
+    target: HTMLElement, key: Platform.KeyboardUtilities.ArrowKey,
+    setGroupExpandedStateCallback: (detailsElement: HTMLDetailsElement, expanded: boolean) =>
+        Promise<unknown>): Promise<HTMLElement|null> {
+  if (domNodeIsPauseOnExceptionsNode(target)) {
+    return findNextNodeForPauseOnExceptions(target, key);
+  }
+
+  // Handle keyboard navigation in the breakpoint tree.
+  const detailsElement = target.parentElement;
+  if (!detailsElement || !(detailsElement instanceof HTMLDetailsElement)) {
+    throw new Error('The selected nodes should be direct children of an HTMLDetails element.');
+  }
+
+  let nextNode: HTMLElement|null = null;
+  switch (key) {
+    case Platform.KeyboardUtilities.ArrowKey.LEFT: {
+      if (domNodeIsSummaryNode(target)) {
+        // On a summary node, collapse if group is expanded.
+        if (groupIsExpanded(detailsElement)) {
+          await setGroupExpandedStateCallback(detailsElement, false);
+        }
+      } else {
+        // On a breakpoint item node, navigate up to the summary node.
+        return getCurrentSummaryNode(detailsElement);
+      }
+      break;
+    }
+    case Platform.KeyboardUtilities.ArrowKey.RIGHT: {
+      if (domNodeIsSummaryNode(target)) {
+        // On a summary node, expand if group is collapsed, and otherwise navigate
+        // to the first breakpoint item in this group.
+        if (groupIsExpanded(detailsElement)) {
+          return getFirstBreakpointItemInGroup(detailsElement);
+        }
+        await setGroupExpandedStateCallback(detailsElement, true);
+      }
+      break;
+    }
+    case Platform.KeyboardUtilities.ArrowKey.DOWN: {
+      if (domNodeIsSummaryNode(target)) {
+        if (groupIsExpanded(detailsElement)) {
+          // If the current node is a summary node of an expanded group, navigating down
+          // should lead to the first breakpoint item within the group.
+          nextNode = getFirstBreakpointItemInGroup(detailsElement);
+        } else {
+          // If the current node is a summary node of a collapsed group, go to the next
+          // group's summary node if existent.
+          nextNode = getNextGroupsSummaryNode(detailsElement);
+        }
+      } else {
+        // If the current node is a breakpoint item, try to get the next
+        // breakpoint item if available, otherwise the next group's summary
+        // node.
+        const nextSibling = target.nextElementSibling;
+        if (nextSibling && nextSibling instanceof HTMLDivElement) {
+          nextNode = nextSibling;
+        } else {
+          nextNode = getNextGroupsSummaryNode(detailsElement);
+        }
+      }
+      break;
+    }
+    case Platform.KeyboardUtilities.ArrowKey.UP: {
+      // If the current node is a summary node, navigating upwards will either
+      // navigate to the last breakpoint item of the previous group (if expanded),
+      // and otherwise navigate to the previous group's summary node.
+      if (domNodeIsSummaryNode(target)) {
+        const previousDetailsElement = getPreviousDetailsElement(detailsElement);
+        if (previousDetailsElement) {
+          if (groupIsExpanded(previousDetailsElement)) {
+            nextNode = getLastBreakpointItemInGroup(previousDetailsElement);
+          } else {
+            nextNode = getCurrentSummaryNode(previousDetailsElement);
+          }
+        } else {
+          const pauseOnExceptions = detailsElement.parentElement?.previousElementSibling;
+          if (pauseOnExceptions instanceof HTMLElement) {
+            nextNode = pauseOnExceptions;
+          }
+        }
+      } else {
+        // If the current node is a breakpoint item, going up should get
+        // the previous sibling, which can be both a summary node or a
+        // a breakpoint item.
+        const previousSibling = target.previousElementSibling;
+        if (previousSibling instanceof HTMLElement) {
+          nextNode = previousSibling;
+        }
+      }
+      break;
+    }
+  }
+  return nextNode;
+}

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

@@ -21,7 +21,11 @@
 
 .row devtools-button {
   line-height: 1;
-  margin-left: 0.5em;
+  margin-left: 0.1em;
+}
+
+.row devtools-button:nth-of-type(1) {
+  margin-left: 0.8em;
 }
 
 .padded {

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

@@ -38,15 +38,15 @@ const UIStrings = {
   parsingErrorExplainer:
       'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
   /**
-  *@description Button text for a button which adds an additional header override.
+  *@description Button text for a button which adds an additional header override rule.
   */
-  addHeaderOverride: 'Add header override',
+  addOverrideRule: 'Add override rule',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const plusIconUrl = new URL('../../../Images/plus_icon.svg', import.meta.url).toString();
-const minusIconUrl = new URL('../../../Images/minus_icon.svg', import.meta.url).toString();
+const trashIconUrl = new URL('../../../Images/trash_bin_material_icon.svg', import.meta.url).toString();
 
 export class HeadersView extends UI.View.SimpleView {
   readonly #headersViewComponent = new HeadersViewComponent();
@@ -156,6 +156,7 @@ export class HeadersViewComponent extends HTMLElement {
     const target = event.target as HTMLElement;
     if (target.matches('.editable') && keyboardEvent.key === 'Enter') {
       event.preventDefault();
+      target.blur();
       this.#focusNext(target);
     }
   }
@@ -192,10 +193,10 @@ export class HeadersViewComponent extends HTMLElement {
   #generateNextHeaderName(headers: Protocol.Fetch.HeaderEntry[]): string {
     const takenNames = new Set<string>(headers.map(header => header.name));
     let idx = 1;
-    while (takenNames.has('headerName' + idx)) {
+    while (takenNames.has('header-name-' + idx)) {
       idx++;
     }
-    return 'headerName' + idx;
+    return 'header-name-' + idx;
   }
 
   #onClick(e: Event): void {
@@ -206,18 +207,18 @@ export class HeadersViewComponent extends HTMLElement {
     if (target.matches('.add-header')) {
       this.#headerOverrides[blockIndex].headers.splice(
           headerIndex + 1, 0,
-          {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+          {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'header value'});
       this.#focusElement = {blockIndex, headerIndex: headerIndex + 1};
       this.#onHeadersChanged();
     } else if (target.matches('.remove-header')) {
       this.#headerOverrides[blockIndex].headers.splice(headerIndex, 1);
       if (this.#headerOverrides[blockIndex].headers.length === 0) {
         this.#headerOverrides[blockIndex].headers.push(
-            {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'headerValue'});
+            {name: this.#generateNextHeaderName(this.#headerOverrides[blockIndex].headers), value: 'header value'});
       }
       this.#onHeadersChanged();
     } else if (target.matches('.add-block')) {
-      this.#headerOverrides.push({applyTo: '*', headers: [{name: 'headerName', value: 'headerValue'}]});
+      this.#headerOverrides.push({applyTo: '*', headers: [{name: 'header-name-1', value: 'header value'}]});
       this.#focusElement = {blockIndex: this.#headerOverrides.length - 1};
       this.#onHeadersChanged();
     } else if (target.matches('.remove-block')) {
@@ -282,7 +283,7 @@ export class HeadersViewComponent extends HTMLElement {
         `,
       )}
       <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.SECONDARY} class="add-block">
-        ${i18nString(UIStrings.addHeaderOverride)}
+        ${i18nString(UIStrings.addOverrideRule)}
       </${Buttons.Button.Button.litTagName}>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -312,7 +313,9 @@ export class HeadersViewComponent extends HTMLElement {
         <${Buttons.Button.Button.litTagName}
         title=${i18nString(UIStrings.removeBlock)}
         .size=${Buttons.Button.Size.SMALL}
-        .iconUrl=${minusIconUrl}
+        .iconUrl=${trashIconUrl}
+        .iconWidth=${'14px'}
+        .iconHeight=${'14px'}
         .variant=${Buttons.Button.Variant.ROUND}
         class="remove-block inline-button"
       ></${Buttons.Button.Button.litTagName}>
@@ -333,13 +336,17 @@ export class HeadersViewComponent extends HTMLElement {
           title=${i18nString(UIStrings.addHeader)}
           .size=${Buttons.Button.Size.SMALL}
           .iconUrl=${plusIconUrl}
+          .iconWidth=${'16px'}
+          .iconHeight=${'16px'}
           .variant=${Buttons.Button.Variant.ROUND}
           class="add-header inline-button"
         ></${Buttons.Button.Button.litTagName}>
         <${Buttons.Button.Button.litTagName}
           title=${i18nString(UIStrings.removeHeader)}
           .size=${Buttons.Button.Size.SMALL}
-          .iconUrl=${minusIconUrl}
+          .iconUrl=${trashIconUrl}
+          .iconWidth=${'14px'}
+          .iconHeight=${'14px'}
           .variant=${Buttons.Button.Variant.ROUND}
           class="remove-header inline-button"
         ></${Buttons.Button.Button.litTagName}>

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

@@ -10,15 +10,8 @@
   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);
@@ -26,6 +19,12 @@
   overflow: hidden;
   white-space: nowrap;
   flex-shrink: 100;
+  cursor: pointer;
+}
+
+.code-snippet:hover {
+  color: var(--color-text-primary);
+  text-decoration: underline;
 }
 
 input {
@@ -35,14 +34,27 @@ input {
   margin: 3px 0;
 }
 
+details {
+  border-top: 1px solid var(--color-details-hairline);
+}
+
+details:not(.active) {
+  background-color: var(--color-background-elevation-1);
+  opacity: 30%;
+}
+
 details > summary {
   height: 18px;
   list-style: none;
   display: flex;
-  padding: 0 4px 0 6px;
+  padding: 0 8px 0 6px;
   align-items: center;
 }
 
+details > summary:hover {
+  background-color: var(--color-background-elevation-1);
+}
+
 details > summary::before {
   display: block;
   user-select: none;
@@ -52,7 +64,7 @@ details > summary::before {
   background-color: var(--color-text-secondary);
   content: "";
   height: 12px;
-  width: 9px;
+  min-width: 9px;
   overflow: hidden;
 }
 
@@ -63,6 +75,9 @@ details[open] > summary::before {
 .group-header {
   display: inline-flex;
   align-items: center;
+  width: 100%;
+  padding-right: 8px;
+  overflow: hidden;
 }
 
 .group-header-title {
@@ -74,11 +89,65 @@ details[open] > summary::before {
   white-space: nowrap;
 }
 
+.group-hover-actions {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.breakpoint-item-location-or-actions {
+  min-width: 20px;
+  flex: 0 0 auto;
+  display: flex;
+  padding-left: 8px;
+  justify-content: right;
+}
+
+button {
+  cursor: pointer;
+  width: 13px;
+  height: 13px;
+  border: none;
+  background-color: transparent;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+button + span {
+  padding-left: 6px;
+}
+
+button + button {
+  padding-left: 11px;
+}
+
+summary:hover button {
+  display: flex;
+}
+
+button:hover devtools-icon {
+  --icon-color: var(--color-text-primary);
+}
+
+.type-indicator {
+  --override-color-conditional-breakpoint: #f29900;
+  --override-color-logpoint: #f439a0;
+
+  border-right: 4px solid;
+  border-radius: 0 2px 2px 0;
+  border-color: transparent;
+  height: 16px;
+}
+
 .breakpoint-item {
   display: flex;
   align-items: center;
   line-height: 13px;
   height: 18px;
+  padding-right: 8px;
 }
 
 .breakpoint-item:hover {
@@ -91,13 +160,69 @@ details[open] > summary::before {
   background-color: var(--override-breakpoint-hit-background);
 }
 
+.breakpoint-item.hit:focus {
+  background-color: var(--legacy-focus-bg-color);
+}
+
+.-theme-with-dark-background .type-indicator,
+:host-context(.-theme-with-dark-background) .type-indicator {
+  --override-color-conditional-breakpoint: #e9a33a;
+  --override-color-logpoint: #e54d9b;
+}
+
+.breakpoint-item.logpoint > label > .type-indicator {
+  border-color: var(--override-color-logpoint);
+}
+
+.breakpoint-item.conditional-breakpoint > label > .type-indicator {
+  border-color: var(--override-color-conditional-breakpoint);
+}
+
 .checkbox-label {
-  padding-left: 20px;
   display: flex;
   align-items: center;
 }
 
+.checkbox-label > input {
+  margin-left: 16px;
+  margin-right: 6px;
+}
+
 .location {
   line-height: 14px;
-  margin: 0 8px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.breakpoint-item:hover button {
+  display: flex;
+}
+
+.pause-on-exceptions {
+  margin-top: 3px;
+}
+
+.pause-on-exceptions > .checkbox-label > input {
+  margin-left: 6px;
+}
+
+.pause-on-caught-exceptions > .checkbox-label > input {
+  margin-left: 20px;
+}
+
+.pause-on-exceptions,
+.pause-on-caught-exceptions {
+  display: flex;
+  align-items: center;
+  line-height: 13px;
+  height: 18px;
+  padding-right: 8px;
+}
+
+details > summary:focus,
+.breakpoint-item:focus,
+.pause-on-exceptions:focus,
+.pause-on-caught-exceptions:focus {
+  background-color: var(--legacy-focus-bg-color);
+  outline-width: 0;
 }

package/front_end/panels/sources/sources-legacy.ts

@@ -79,11 +79,6 @@ Sources.JavaScriptBreakpointsSidebarPane =
 Sources.JavaScriptBreakpointsSidebarPane.retrieveLocationForElement =
     SourcesModule.JavaScriptBreakpointsSidebarPane.retrieveLocationForElement;
 
-/** @constructor */
-Sources.JavaScriptCompilerPlugin = SourcesModule.JavaScriptCompilerPlugin.JavaScriptCompilerPlugin;
-
-Sources.JavaScriptCompilerPlugin.CompileDelay = SourcesModule.JavaScriptCompilerPlugin.CompileDelay;
-
 /** @constructor */
 Sources.NavigatorView = SourcesModule.NavigatorView.NavigatorView;