chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -481,8 +481,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.focusInternal();
   }
 
-  private onCloseBtnKeydown(event: Event): void {
-    if (isEscKey(event) || isEnterOrSpaceKey(event)) {
+  private onCloseBtnKeydown(event: KeyboardEvent): void {
+    if (Platform.KeyboardUtilities.isEscKey(event) || Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
       this.togglePalettePanel(false);
       event.consume(true);
     }
@@ -845,19 +845,18 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     }
   }
 
-  private onShadeColorKeydown(colorElement: HTMLElement, event: Event): void {
-    const keyboardEvent = event as KeyboardEvent;
-    const target = keyboardEvent.target as HTMLElement;
-    if (isEscKey(event) || keyboardEvent.key === 'Tab') {
+  private onShadeColorKeydown(colorElement: HTMLElement, event: KeyboardEvent): void {
+    const target = event.target as HTMLElement;
+    if (Platform.KeyboardUtilities.isEscKey(event) || event.key === 'Tab') {
       colorElement.focus();
       if (this.shadesCloseHandler) {
         this.shadesCloseHandler();
       }
       event.consume(true);
-    } else if (keyboardEvent.key === 'ArrowUp' && target.previousElementSibling) {
+    } else if (event.key === 'ArrowUp' && target.previousElementSibling) {
       (target.previousElementSibling as HTMLElement).focus();
       event.consume(true);
-    } else if (keyboardEvent.key === 'ArrowDown' && target.nextElementSibling) {
+    } else if (event.key === 'ArrowDown' && target.nextElementSibling) {
       (target.nextElementSibling as HTMLElement).focus();
       event.consume(true);
     }
@@ -867,8 +866,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.addColorToCustomPalette();
   }
 
-  private onAddColorKeydown(event: Event): void {
-    if (isEnterOrSpaceKey(event)) {
+  private onAddColorKeydown(event: KeyboardEvent): void {
+    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
       this.addColorToCustomPalette();
       event.consume(true);
     }

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -1551,7 +1551,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.scrollContainer === this.dataContainerInternal ? this.headerHeight() : 0;
   }
 
-  protected headerHeight(): number {
+  headerHeight(): number {
     return this.dataTableHeadInternal.offsetHeight;
   }
 

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -92,8 +92,8 @@
   display: table-row;
 }
 
-.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected):not(:hover),
-.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected):not(:hover) {
+.striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
+.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected) {
   background-color: var(--color-background-elevation-1);
 }
 
@@ -152,6 +152,7 @@
 
 .data-grid th .sort-order-icon-container {
   background-color: var(--color-background-elevation-1);
+  min-width: 0;
   position: absolute;
   top: 1px;
   right: 0;
@@ -307,8 +308,8 @@
     background-color: HighlightText;
   }
 
-  .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd),
-  .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even),
+  .striped-data-grid .revealed.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
+  .striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected),
   .request-cookies-view tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
   .cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
     background-color: canvas;
@@ -322,8 +323,8 @@
   .data-grid th.sortable:hover,
   .data-grid tbody tr.revealed:hover,
   .data-grid tbody tr.revealed.selected,
-  .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd),
-  .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even),
+  .striped-data-grid .revealed:hover.data-grid-data-grid-node:nth-child(odd):not(.dirty):not(.selected),
+  .striped-data-grid-starts-with-odd .revealed:hover.data-grid-data-grid-node:nth-child(even):not(.dirty):not(.selected),
   .request-cookies-view tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(2n),
   .cookies-table tr.revealed:hover.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
     forced-color-adjust: none;

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -118,8 +118,15 @@ export class CSSAngle extends HTMLElement {
     const miniIconBottom = this.swatchElement.getBoundingClientRect().bottom;
     const miniIconLeft = this.swatchElement.getBoundingClientRect().left;
     if (miniIconBottom && miniIconLeft) {
-      this.popoverStyleTop = `${miniIconBottom}px`;
-      this.popoverStyleLeft = `${miniIconLeft}px`;
+      // We offset mini icon's X and Y positions with the containing styles
+      // pane's positions because DevTools' root SplitWidget's
+      // insertion-point-sidebar slot, where most of the DevTools content lives,
+      // has an offset of positions, which makes all of its children's DOMRect
+      // positions to have this offset.
+      const offsetTop = this.containingPane.getBoundingClientRect().top;
+      const offsetLeft = this.containingPane.getBoundingClientRect().left;
+      this.popoverStyleTop = `${miniIconBottom - offsetTop}px`;
+      this.popoverStyleLeft = `${miniIconLeft - offsetLeft}px`;
     }
 
     this.popoverOpen = true;

package/front_end/ui/legacy/components/inline_editor/CSSLength.ts

@@ -9,7 +9,7 @@ import cssLengthStyles from './cssLength.css.js';
 import {LengthUnit, LENGTH_UNITS, parseText, type Length} from './CSSLengthUtils.js';
 import {ValueChangedEvent} from './InlineEditorUtils.js';
 
-const {render, html} = LitHtml;
+const {render, html, Directives: {classMap}} = LitHtml;
 
 export class DraggingFinishedEvent extends Event {
   static readonly eventName = 'draggingfinished';
@@ -20,6 +20,7 @@ export class DraggingFinishedEvent extends Event {
 
 export interface CSSLengthData {
   lengthText: string;
+  overloaded: boolean;
 }
 
 const DefaultLength = {
@@ -33,6 +34,7 @@ export class CSSLength extends HTMLElement {
   private readonly shadow = this.attachShadow({mode: 'open'});
   private readonly onDraggingValue = this.dragValue.bind(this);
   private length: Length = DefaultLength;
+  private overloaded: boolean = false;
   private isEditingSlot = false;
   private isDraggingValue = false;
   private currentMouseClientX = 0;
@@ -44,6 +46,7 @@ export class CSSLength extends HTMLElement {
       return;
     }
     this.length = parsedResult;
+    this.overloaded = data.overloaded;
     this.render();
   }
 
@@ -119,10 +122,15 @@ export class CSSLength extends HTMLElement {
   }
 
   private render(): void {
+    const classes = {
+      'css-length': true,
+      'overloaded': this.overloaded,
+    };
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <div class="css-length">
+      <div class=${classMap(classes)}>
         ${this.renderContent()}
       </div>
     `, this.shadow, {

package/front_end/ui/legacy/components/inline_editor/CSSVarSwatch.ts

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../../components/helpers/helpers.js';
 import * as LitHtml from '../../../lit-html/lit-html.js';
+
 import cssVarSwatchStyles from './cssVarSwatch.css.js';
 
 const UIStrings = {
@@ -18,7 +20,7 @@ const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/inline_editor/CSS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, Directives} = LitHtml;
 
-const VARIABLE_FUNCTION_REGEX = /(var\()(\s*--[^,)]+)(.*)/;
+const VARIABLE_FUNCTION_REGEX = /(^var\()\s*(--(?:[\s\w\P{ASCII}-]|\\.)+)(,?\s*.*)\s*(\))$/u;
 
 interface SwatchRenderData {
   text: string;
@@ -29,7 +31,8 @@ interface SwatchRenderData {
 
 interface ParsedVariableFunction {
   pre: string;
-  name: string;
+  variableName: string;
+  fallbackIncludeComma: string;
   post: string;
 }
 
@@ -68,7 +71,7 @@ export class CSSVarSwatch extends HTMLElement {
         return;
       }
 
-      if (event instanceof KeyboardEvent && !isEnterOrSpaceKey(event)) {
+      if (event instanceof KeyboardEvent && !Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         return;
       }
 
@@ -88,16 +91,25 @@ export class CSSVarSwatch extends HTMLElement {
     }
 
     return {
+      // Returns `var(`
       pre: result[1],
-      name: result[2],
-      post: result[3],
+
+      // Returns the CSS variable name, e.g. `--foo`
+      variableName: result[2],
+
+      // Returns the fallback value in the CSS variable, including a comma if
+      // one is present, e.g. `,50px`
+      fallbackIncludeComma: result[3],
+
+      // Returns `)`
+      post: result[4],
     };
   }
 
   private get variableName(): string {
-    const match = this.text.match(/--[^,)]+/);
+    const match = this.text.match(VARIABLE_FUNCTION_REGEX);
     if (match) {
-      return match[0];
+      return match[2];
     }
     return '';
   }
@@ -124,12 +136,13 @@ export class CSSVarSwatch extends HTMLElement {
       return;
     }
 
-    const link = this.renderLink(functionParts.name);
+    const variableNameLink = this.renderLink(functionParts.variableName);
+    const fallbackIncludeComma = functionParts.fallbackIncludeComma ? functionParts.fallbackIncludeComma : '';
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(
-      html`<span title=${this.computedValue || ''}>${functionParts.pre}${link}${functionParts.post}</span>`,
+      html`<span title=${this.computedValue || ''}>${functionParts.pre}${variableNameLink}${fallbackIncludeComma}${functionParts.post}</span>`,
       this.shadow, { host: this });
     // clang-format on
   }

package/front_end/ui/legacy/components/inline_editor/FontEditor.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UI from '../../legacy.js';
@@ -351,8 +352,8 @@ export class FontEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     deleteButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
       this.deleteFontSelector(fontSelectorObject.index);
     });
-    deleteButton.element.addEventListener('keydown', (event: Event) => {
-      if (isEnterOrSpaceKey(event)) {
+    deleteButton.element.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         this.deleteFontSelector(fontSelectorObject.index);
         event.consume();
       }

package/front_end/ui/legacy/components/inline_editor/cssLength.css

@@ -10,6 +10,10 @@
   outline: none;
 }
 
+.css-length.overloaded {
+  text-decoration: line-through;
+}
+
 .value {
   cursor: ew-resize;
 }

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

@@ -11,17 +11,27 @@ import {RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 export class JavaScriptREPL {
   static wrapObjectLiteral(code: string): string {
     // Only parenthesize what appears to be an object literal.
-    if (!(/^\s*\{/.test(code) && /\}\s*$/.test(code))) {
+    const result = /^\s*\{\s*(.*)\s*\}[\s;]*$/.exec(code);
+    if (result === null) {
       return code;
     }
+    const [, body] = result;
+    let level = 0;
+    for (const c of body) {
+      if (c === '{') {
+        level++;
+      } else if (c === '}' && --level < 0) {
+        return code;
+      }
+    }
 
     const parse = (async(): Promise<number> => 0).constructor;
     try {
-      // Check if the code can be interpreted as an expression.
-      parse('return ' + code + ';');
+      // Check if the body can be interpreted as an expression.
+      parse('return {' + body + '};');
 
       // No syntax error! Does it work parenthesized?
-      const wrappedCode = '(' + code + ')';
+      const wrappedCode = '({' + body + '})';
       parse(wrappedCode);
 
       return wrappedCode;
@@ -30,10 +40,6 @@ export class JavaScriptREPL {
     }
   }
 
-  static preprocessExpression(text: string): string {
-    return JavaScriptREPL.wrapObjectLiteral(text);
-  }
-
   static async evaluateAndBuildPreview(
       text: string, throwOnSideEffect: boolean, replMode: boolean, timeout?: number, allowErrors?: boolean,
       objectGroup?: string, awaitPromise: boolean = false, silent: boolean = false): Promise<{
@@ -46,7 +52,7 @@ export class JavaScriptREPL {
       return {preview: document.createDocumentFragment(), result: null};
     }
 
-    const expression = JavaScriptREPL.preprocessExpression(text);
+    const expression = JavaScriptREPL.wrapObjectLiteral(text);
     const options = {
       expression: expression,
       generatePreview: true,

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

@@ -43,7 +43,8 @@ export class RemoteObjectPreviewFormatter {
       if (property.name === InternalName.PromiseResult) {
         return 2;
       }
-      if (property.name === InternalName.GeneratorState || property.name === InternalName.PrimitiveValue) {
+      if (property.name === InternalName.GeneratorState || property.name === InternalName.PrimitiveValue ||
+          property.name === InternalName.WeakRefTarget) {
         return 3;
       }
       if (property.type !== Protocol.Runtime.PropertyPreviewType.Function && !property.name.startsWith('#')) {
@@ -138,6 +139,12 @@ export class RemoteObjectPreviewFormatter {
         parentElement.appendChild(this.renderDisplayName('<' + property.value + '>'));
       } else if (name === InternalName.PrimitiveValue) {
         parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property]));
+      } else if (name === InternalName.WeakRefTarget) {
+        if (property.type === Protocol.Runtime.PropertyPreviewType.Undefined) {
+          parentElement.appendChild(this.renderDisplayName('<cleared>'));
+        } else {
+          parentElement.appendChild(this.renderPropertyPreviewOrAccessor([property]));
+        }
       } else {
         parentElement.appendChild(this.renderDisplayName(name));
         UI.UIUtils.createTextChild(parentElement, ': ');
@@ -306,6 +313,7 @@ const enum InternalName {
   PrimitiveValue = '[[PrimitiveValue]]',
   PromiseState = '[[PromiseState]]',
   PromiseResult = '[[PromiseResult]]',
+  WeakRefTarget = '[[WeakRefTarget]]',
 }
 
 export const createSpansForNodeTitle = function(container: Element, nodeTitle: string): void {