chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -7,8 +7,8 @@ import * as CommentManager from '../../models/comment_manager/comment_manager.js
 
 import {
   type CommentThread,
+  computeVisibleRect,
   deepQuerySelectorAll,
-  isElementVisible,
   rematchCommentAnchor,
   resolveCommentAnchor,
   resolveCommentAnchorElement,
@@ -304,30 +304,30 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         this.#observedThreads.add(el);
       }
 
-      if (!isElementVisible(el)) {
+      const visibleRect = computeVisibleRect(el);
+      if (!visibleRect) {
         continue;
       }
 
-      const rect = el.getBoundingClientRect();
       const offsetIndex = elementPinCounts.get(el) || 0;
       elementPinCounts.set(el, offsetIndex + 1);
       // Offset by 26px vertically (24px pin icon height + 2px spacing) so multiple comment pins on the same element stack vertically without overlapping.
       const offsetY = offsetIndex * 26;
 
-      // Offset by -12px (half of the 24px pin diameter) so the pin icon is centered on the top-right corner of the target element.
+      // Offset by -12px (half of the 24px pin diameter) so the pin icon is centered on the top-right corner of the visible clipped area.
       newPins.push({
         id: thread.id,
-        top: scrollY + rect.top - 12 + offsetY,
-        left: scrollX + rect.right - 12,
+        top: scrollY + visibleRect.top - 12 + offsetY,
+        left: scrollX + visibleRect.right - 12,
         visible: true,
       });
 
       newHighlights.push({
         id: thread.id,
-        top: scrollY + rect.top,
-        left: scrollX + rect.left,
-        width: rect.width,
-        height: rect.height,
+        top: scrollY + visibleRect.top,
+        left: scrollX + visibleRect.left,
+        width: visibleRect.width,
+        height: visibleRect.height,
         visible: true,
       });
     }
@@ -457,32 +457,16 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       if (anchorEl) {
         const cmLine = target.closest('.cm-line');
         const highlightTarget = (cmLine && anchorEl.classList.contains('cm-editor')) ? cmLine : anchorEl;
-        const rect = highlightTarget.getBoundingClientRect();
-        let visibleLeft = rect.left;
-        let visibleRight = rect.right;
-        let visibleTop = rect.top;
-        let visibleBottom = rect.bottom;
-
-        if (anchorEl.classList.contains('cm-editor')) {
-          const scroller = anchorEl.querySelector('.cm-scroller') || anchorEl;
-          const scrollerRect = scroller.getBoundingClientRect();
-          visibleLeft = Math.max(visibleLeft, scrollerRect.left);
-          visibleRight = Math.min(visibleRight, scrollerRect.right);
-          visibleTop = Math.max(visibleTop, scrollerRect.top);
-          visibleBottom = Math.min(visibleBottom, scrollerRect.bottom);
-        }
-
-        const visibleWidth = Math.max(0, visibleRight - visibleLeft);
-        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        const visibleRect = computeVisibleRect(highlightTarget);
 
-        if (visibleWidth > 0 && visibleHeight > 0) {
+        if (visibleRect) {
           const scrollX = window.scrollX;
           const scrollY = window.scrollY;
           this.#setHoverHighlight({
-            top: scrollY + visibleTop,
-            left: scrollX + visibleLeft,
-            width: visibleWidth,
-            height: visibleHeight,
+            top: scrollY + visibleRect.top,
+            left: scrollX + visibleRect.left,
+            width: visibleRect.width,
+            height: visibleRect.height,
             visible: true,
           });
         } else {

package/front_end/ui/comments/commentsOverlay.css

@@ -10,7 +10,8 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    z-index: 999990;
+    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000) but below floating glass panes (which start at z-index 3000). */
+    z-index: 2500;
     overflow: hidden;
     width: 100vw;
     height: 100vh;
@@ -20,8 +21,8 @@
     position: absolute;
     pointer-events: auto;
     cursor: pointer;
-    font-size: 24px;
-    line-height: 24px;
+    font-size: var(--sys-typescale-headline1-size);
+    line-height: var(--sys-typescale-body1-line-height);
     filter: drop-shadow(0 2px 5px rgb(0 0 0 / 35%));
     user-select: none;
     transition: transform 0.1s ease;
@@ -34,7 +35,7 @@
   .comment-anchor-highlight {
     position: absolute;
     pointer-events: none;
-    border: 2px dashed var(--sys-color-primary);
+    border: var(--sys-size-2) dashed var(--sys-color-primary);
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 90%);
     box-sizing: border-box;
   }
@@ -42,7 +43,7 @@
   .comment-hover-highlight {
     position: absolute;
     pointer-events: none;
-    border: 2px solid var(--sys-color-primary);
+    border: var(--sys-size-2) solid var(--sys-color-primary);
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 85%);
     box-sizing: border-box;
   }

package/front_end/ui/components/adorners/Adorner.ts

@@ -39,7 +39,7 @@ export class Adorner extends HTMLElement {
     this.#render();
   }
 
-  static readonly observedAttributes = ['active', 'toggleable'];
+  static readonly observedAttributes: string[] = ['active', 'toggleable'];
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (oldValue === newValue) {
       return;

package/front_end/ui/components/adorners/adorner.css

@@ -15,13 +15,13 @@
 slot {
   display: inline-flex;
   box-sizing: border-box;
-  height: 14px;
+  height: var(--sys-size-7);
   line-height: 13px;
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
   font-size: var(--override-adorner-font-size, 8.5px);
   color: var(--override-adorner-text-color, var(--sys-color-primary));
   background-color: var(--override-adorner-background-color, var(--sys-color-cdt-base-container));
-  border: 1px solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
+  border: var(--sys-size-1) solid var(--override-adorner-border-color, var(--sys-color-tonal-outline));
   border-radius: 10px;
   position: relative;
 
@@ -46,15 +46,15 @@ slot {
 }
 
 :host(:focus-visible) slot {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
   z-index: 999;
 }
 
 :host([aria-pressed="true"]) slot {
   color: var(--override-adorner-active-text-color, var(--sys-color-on-primary));
   background-color: var(--override-adorner-active-background-color, var(--sys-color-primary));
-  border: 1px solid var(--override-adorner-active-background-color, var(--sys-color-primary));
+  border: var(--sys-size-1) solid var(--override-adorner-active-background-color, var(--sys-color-primary));
 
   &:hover::after {
     background-color: var(--sys-color-state-hover-on-prominent);

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -38,7 +38,7 @@ const {html, Directives: {classMap}} = Lit;
  *                      provided context.
  */
 export class FloatingButton extends HTMLElement {
-  static readonly observedAttributes = ['icon-name', 'jslogcontext', 'disabled'];
+  static readonly observedAttributes: string[] = ['icon-name', 'jslogcontext', 'disabled'];
 
   readonly #shadow = this.attachShadow({mode: 'open'});
 

package/front_end/ui/components/buttons/button.css

@@ -34,7 +34,7 @@
 button {
   --hover-layer-color: var(--sys-color-state-hover-on-subtle);
   --active-layer-color: var(--sys-color-state-ripple-neutral-on-subtle);
-  --button-border-size: 1px;
+  --button-border-size: var(--sys-size-1);
   --button-height: var(--sys-size-11);
   --button-width: fit-content;
 
@@ -130,7 +130,7 @@ button {
 
     devtools-icon.long-click {
       position: absolute;
-      top: 2px;
+      top: var(--sys-size-2);
       left: 3px;
     }
 
@@ -330,21 +330,21 @@ button {
 
 .spinner {
   display: block;
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
-  border: 2px solid var(--sys-color-cdt-base-container);
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  border-radius: var(--sys-size-4);
+  border: var(--sys-size-2) solid var(--sys-color-cdt-base-container);
   animation: spinner-animation 1s linear infinite;
   border-right-color: transparent;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 
   &.outlined {
-    border: 2px solid var(--sys-color-primary);
+    border: var(--sys-size-2) solid var(--sys-color-primary);
     border-right-color: transparent;
   }
 
   &.disabled {
-    border: 2px solid var(--sys-color-state-disabled);
+    border: var(--sys-size-2) solid var(--sys-color-state-disabled);
     border-right-color: transparent;
   }
 }

package/front_end/ui/components/buttons/floatingButton.css

@@ -64,8 +64,8 @@ button {
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
-    outline-offset: 2px;
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: var(--sys-size-2);
   }
 
   &:disabled > devtools-icon {

package/front_end/ui/components/buttons/textButton.css

@@ -5,13 +5,13 @@
  */
 
 .text-button {
-  margin: 2px;
-  height: 24px;
-  font-size: 12px;
+  margin: var(--sys-size-2);
+  height: var(--sys-size-11);
+  font-size: var(--sys-typescale-body4-size);
   font-family: var(--default-font-family);
-  border: 1px solid var(--sys-color-tonal-outline);
-  border-radius: 12px;
-  padding: 0 12px;
+  border: var(--sys-size-1) solid var(--sys-color-tonal-outline);
+  border-radius: var(--sys-shape-corner-medium-small);
+  padding: 0 var(--sys-size-6);
   font-weight: 500;
   color: var(--sys-color-primary);
   background-color: var(--sys-color-cdt-base-container);
@@ -30,7 +30,7 @@
 }
 
 .text-button:not(:disabled, .primary-button):focus-visible {
-  outline: 2px solid var(--sys-color-state-focus-ring);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   color: var(--sys-color-on-primary);
   background-color: var(--sys-color-cdt-base-container);
 }
@@ -47,7 +47,7 @@
   background: none;
   border: none;
   outline: none;
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
   margin: 0;
   padding: 0 !important; /* stylelint-disable-line declaration-no-important */
   font: inherit;
@@ -74,8 +74,8 @@
 
 .text-button.primary-button:not(:disabled):focus-visible {
   background-color: var(--sys-color-primary);
-  outline-offset: 2px;
-  outline: 2px solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   color: var(--sys-color-on-primary);
 }
 
@@ -99,7 +99,7 @@
     background-color: ButtonFace;
     color: Highlight !important; /* stylelint-disable-line declaration-no-important */
     border-color: Highlight;
-    outline: 2px solid ButtonText;
+    outline: var(--sys-size-2) solid ButtonText;
     box-shadow: var(--legacy-focus-ring-active-shadow);
   }
 
@@ -115,7 +115,7 @@
     forced-color-adjust: none;
     background-color: Highlight;
     color: HighlightText;
-    border: 1px solid Highlight;
+    border: var(--sys-size-1) solid Highlight;
   }
 
   .text-button.primary-button:not(:disabled):focus-visible {

package/front_end/ui/components/dialogs/Dialog.ts

@@ -51,7 +51,7 @@ export const DIALOG_VERTICAL_PADDING = 3;
  * remain clearly visible. This constant accounts for the padding of the dialog's
  * content (20 px) and a 5px gap left on each extreme of the dialog from the viewport.
  **/
-export const DIALOG_PADDING_FROM_WINDOW = 3 * CONNECTOR_HEIGHT;
+export const DIALOG_PADDING_FROM_WINDOW: number = 3 * CONNECTOR_HEIGHT;
 interface DialogData {
   /**
    * Position or point the dialog is shown relative to.

package/front_end/ui/components/dialogs/dialog.css

@@ -39,7 +39,7 @@ dialog:focus-visible {
 #content {
   min-width: var(--content-min-width);
   background: var(--color-background-elevation-dark-only);
-  border-radius: var(--sys-size-5);
+  border-radius: var(--sys-shape-corner-small);
   max-height: var(--dialog-max-height);
   max-width: var(--dialog-max-width);
   overflow: auto;

package/front_end/ui/components/diff_view/diffView.css

@@ -23,13 +23,13 @@
 
 .diff-line-marker {
   user-select: none;
-  border-right: 1px solid var(--sys-color-divider);
-  width: 20px;
+  border-right: var(--sys-size-1) solid var(--sys-color-divider);
+  width: var(--sys-size-9);
   text-align: center;
 }
 
 .diff-line-content {
-  padding: 0 4px;
+  padding: 0 var(--sys-size-3);
 }
 
 .diff-line-marker-addition,

package/front_end/ui/components/expandable_list/expandableList.css

@@ -14,19 +14,19 @@ div {
 
 .arrow-icon-button {
   cursor: pointer;
-  padding: 1px 0;
+  padding: var(--sys-size-1) 0;
   border: none;
   background: none;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .arrow-icon {
   display: inline-block;
   mask-image: var(--image-file-triangle-right);
   background-color: var(--icon-default);
-  margin-top: 2px;
-  height: 14px;
-  width: 14px;
+  margin-top: var(--sys-size-2);
+  height: var(--sys-size-7);
+  width: var(--sys-size-7);
   transition: transform 200ms;
 }
 
@@ -36,7 +36,7 @@ div {
 
 .expandable-list-container {
   display: flex;
-  margin-top: 4px;
+  margin-top: var(--sys-size-3);
 }
 
 .expandable-list-items {
@@ -48,14 +48,14 @@ div {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   border: none;
   background: none;
   font-family: inherit;
-  font-size: var(--sys-size-6);
+  font-size: var(--sys-typescale-body4-size);
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     outline-offset: 0;
     border-radius: var(--sys-shape-corner-extra-small);
   }

package/front_end/ui/components/highlighting/HighlightElement.ts

@@ -9,7 +9,7 @@ import {HighlightManager} from './HighlightManager.js';
 import {type HighlightChange, highlightRangesWithStyleClass, revertDomChanges} from './MarkupHighlight.js';
 
 export class HighlightElement extends HTMLElement {
-  static readonly observedAttributes = ['ranges', 'current-range', 'type'];
+  static readonly observedAttributes: string[] = ['ranges', 'current-range', 'type'];
   #ranges: TextUtils.TextRange.SourceRange[] = [];
   #currentRange: TextUtils.TextRange.SourceRange|undefined;
   #type = 'css';

package/front_end/ui/components/highlighting/HighlightManager.ts

@@ -112,6 +112,10 @@ export class HighlightManager {
   }
 
   static removeInstance(): void {
+    if (typeof CSS !== 'undefined' && CSS.highlights) {
+      CSS.highlights.delete(HIGHLIGHT_REGISTRY);
+      CSS.highlights.delete(CURRENT_HIGHLIGHT_REGISTRY);
+    }
     highlightManagerInstance = null;
   }
 

package/front_end/ui/components/icon_button/iconButton.css

@@ -13,8 +13,8 @@
 
 .icon-button {
   border: none;
-  margin-right: 2px;
-  margin-top: 4px;
+  margin-right: var(--sys-size-2);
+  margin-top: var(--sys-size-3);
   display: inline-flex;
   align-items: center;
   color: inherit;

package/front_end/ui/components/input/checkbox.css

@@ -5,8 +5,8 @@
  */
 
 input[type="checkbox"] {
-  width: 12px;
-  height: 12px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
   accent-color: var(--sys-color-primary-bright);
   color: var(--sys-color-on-primary);
   position: relative;
@@ -18,8 +18,8 @@ input[type="checkbox"] {
   &:hover::after,
   &:active::before {
     content: "";
-    height: 24px;
-    width: 24px;
+    height: var(--sys-size-11);
+    width: var(--sys-size-11);
     border-radius: var(--sys-shape-corner-full);
     position: absolute;
   }
@@ -38,13 +38,13 @@ input[type="checkbox"] {
     width: 15px;
     border-radius: 5px;
     position: absolute;
-    border: 2px solid var(--sys-color-state-focus-ring);
+    border: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 
   &.small:hover::after,
   &.small:active::before {
-    height: 12px;
-    width: 12px;
-    border-radius: 2px;
+    height: var(--sys-size-6);
+    width: var(--sys-size-6);
+    border-radius: var(--sys-size-2);
   }
 }

package/front_end/ui/components/input/textInput.css

@@ -5,12 +5,12 @@
  */
 
 .devtools-text-input {
-  height: 32px;
+  height: var(--sys-size-13);
   width: 100%;
-  padding: 8px 11px;
+  padding: var(--sys-size-5) 11px;
   line-height: 1.16;
   letter-spacing: 0.015em;
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   color: var(--sys-color-on-surface);
   border-radius: 3px;
   background-color: var(--sys-color-cdt-base-container);

package/front_end/ui/components/issue_counter/issueLinkIcon.css

@@ -32,8 +32,8 @@ button {
 }
 
 devtools-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   vertical-align: middle;
 
   &[name="issue-cross-filled"] {

package/front_end/ui/components/linkifier/linkifierImpl.css

@@ -9,5 +9,5 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }

package/front_end/ui/components/markdown_view/MarkdownImagesMap.ts

@@ -37,7 +37,7 @@ export interface ImageData {
  * imported in any component, instead add image data in map and
  * use getMarkdownImage to get the appropriate image data.
  **/
-export const markdownImages = new Map<string, ImageData>([]);
+export const markdownImages: Map<string, ImageData> = new Map<string, ImageData>([]);
 
 export const getMarkdownImage = (key: string): ImageData => {
   const image = markdownImages.get(key);

package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts

@@ -14,7 +14,7 @@
  * imported in any component, instead add link in map and
  * use getMarkdownLink to get the appropriate link.
  **/
-export const markdownLinks = new Map<string, string>([
+export const markdownLinks: Map<string, string> = new Map<string, string>([
   ['issuesContrastWCAG21AA', 'https://www.w3.org/TR/WCAG21/#contrast-minimum'],
   ['issuesContrastWCAG21AAA', 'https://www.w3.org/TR/WCAG21/#contrast-enhanced'],
   ['issuesContrastSuggestColor', 'https://developers.google.com/web/updates/2020/08/devtools#accessible-color'],

package/front_end/ui/components/markdown_view/codeBlock.css

@@ -79,8 +79,8 @@
     cursor: pointer;
     outline-offset: var(--sys-size-2);
     border: none;
-    padding-bottom: 2px;
-    font-size: 11px;
+    padding-bottom: var(--sys-size-2);
+    font-size: var(--sys-typescale-body5-size);
     font-family: var(--default-font-family);
   }
 }

package/front_end/ui/components/markdown_view/markdownView.css

@@ -20,7 +20,7 @@
 
 devtools-link {
   color: var(--sys-color-primary);
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   text-decoration: underline;
 }
 
@@ -40,7 +40,7 @@ devtools-code-block.animating {
 
 .message {
   line-height: 18px;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   color: var(--sys-color-on-surface);
   user-select: text;
 }
@@ -50,7 +50,7 @@ devtools-code-block.animating {
 }
 
 .message p:not(:first-child) {
-  margin-block-start: 2px;
+  margin-block-start: var(--sys-size-2);
 }
 
 .message p:not(:last-child) {
@@ -67,7 +67,7 @@ devtools-code-block.animating {
 }
 
 .message li {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   display: list-item;
   list-style-type: disc;
 }
@@ -98,14 +98,14 @@ devtools-code-block.animating {
 .message code {
   color: var(--sys-color-on-surface);
   font-family: var(--monospace-font-family);
-  font-size: 11px;
+  font-size: var(--sys-typescale-monospace-size);
   user-select: text;
   cursor: text;
   /* This is still using design tokens because `--code-background-color` is defined with them by default */
   /* stylelint-disable-next-line plugin/use_theme_colors */
   background-color: var(--code-background-color);
-  border-radius: 2px;
-  padding: 1px 3px;
+  border-radius: var(--sys-size-2);
+  padding: var(--sys-size-1) 3px;
 }
 
 devtools-code-block {

package/front_end/ui/components/menus/menuGroup.css

@@ -5,8 +5,8 @@
  */
 
 .menu-group-label {
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
   position: relative;
   color: var(--sys-color-token-subtle);
   display: block;

package/front_end/ui/components/menus/menuItem.css

@@ -6,8 +6,8 @@
 
 .menu-item {
   padding: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
   position: relative;
   display: block;
   color: var(--sys-color-on-surface);

package/front_end/ui/components/menus/selectMenu.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   border-radius: var(--sys-shape-corner-extra-small);
   width: fit-content;
   display: flex;
@@ -29,7 +29,7 @@ button {
 }
 
 #side-button {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   border-radius: 3px 0 0 3px;
   border-right: none;
   height: 100%;