chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -2,14 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './CSSAngleSwatch.js';
 import './CSSAngleEditor.js';
+import './CSSAngleSwatch.js';
 
 import * as LitHtml from '../../../lit-html/lit-html.js';
 
 import cssAngleStyles from './cssAngle.css.js';
-import type {CSSAngleEditorData} from './CSSAngleEditor.js';
-import type {CSSAngleSwatchData} from './CSSAngleSwatch.js';
 import {
   type Angle,
   AngleUnit,
@@ -61,7 +59,6 @@ const DefaultAngle = {
 };
 
 export class CSSAngle extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = DefaultAngle;
   private displayedAngle: Angle = DefaultAngle;
@@ -236,7 +233,7 @@ export class CSSAngle extends HTMLElement {
             @dblclick=${this.consume}
             .data=${{
               angle: this.angle,
-            } as CSSAngleSwatchData}>
+            }}>
           </devtools-css-angle-swatch><slot></slot></div>
         ${this.popoverOpen ? this.renderPopover() : null}
       </div>
@@ -264,10 +261,10 @@ export class CSSAngle extends HTMLElement {
           this.updateAngle(angle);
         },
         background: contextualBackground,
-      } as CSSAngleEditorData}
+      }}
     ></devtools-css-angle-editor>
     `;
-    // clang-format on
+        // clang-format on
   }
 }
 

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

@@ -28,7 +28,6 @@ export interface CSSAngleEditorData {
 }
 
 export class CSSAngleEditor extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-editor`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {
     value: 0,

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

@@ -17,7 +17,6 @@ export interface CSSAngleSwatchData {
 }
 
 export class CSSAngleSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-angle-swatch`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private angle: Angle = {

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

@@ -57,7 +57,6 @@ type CSSLengthData = {
 };
 
 export class CSSLength extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-length`;
 
   private readonly shadow = this.attachShadow({mode: 'open'});
   private readonly onDraggingValue = this.dragValue.bind(this);

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

@@ -20,7 +20,6 @@ export interface EventTypes {
 }
 
 export class ColorMixSwatch extends Common.ObjectWrapper.eventMixin<EventTypes, typeof HTMLElement>(HTMLElement) {
-  static readonly litTagName = LitHtml.literal`devtools-color-mix-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private colorMixText: string = '';     // color-mix(in srgb, hotpink, white)
   private firstColorText: string = '';   // hotpink

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

@@ -41,7 +41,6 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-color-swatch`;
   private readonly shadow = this.attachShadow({mode: 'open'});
   private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
   private color: Common.Color.Color|null = null;

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

@@ -30,7 +30,6 @@ interface BaseLinkSwatchRenderData {
 }
 
 class BaseLinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-base-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   protected onLinkActivate: (linkText: string, event: MouseEvent|KeyboardEvent) => void = () => undefined;
   #linkElement: HTMLSpanElement|undefined;
@@ -91,7 +90,6 @@ interface CSSVarSwatchRenderData {
 }
 
 export class CSSVarSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-var-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
   #link: BaseLinkSwatch|undefined;
 
@@ -150,7 +148,6 @@ export interface LinkSwatchRenderData {
 }
 
 export class LinkSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-link-swatch`;
   protected readonly shadow = this.attachShadow({mode: 'open'});
 
   set data(data: LinkSwatchRenderData) {

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

@@ -60,7 +60,6 @@ export class BezierSwatch extends HTMLSpanElement {
 }
 
 export class CSSShadowSwatch extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`css-shadow-swatch`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #icon: IconButton.Icon.Icon;
   readonly #model: CSSShadowModel;
@@ -76,7 +75,7 @@ export class CSSShadowSwatch extends HTMLElement {
         html`<devtools-icon name="shadow" class="shadow-swatch-icon"></devtools-icon><slot></slot>`, this.#shadow,
         {host: this});
 
-    this.#icon = this.#shadow.querySelector(IconButton.Icon.Icon.litTagName.value as string) as IconButton.Icon.Icon;
+    this.#icon = this.#shadow.querySelector('devtools-icon') as IconButton.Icon.Icon;
   }
 
   model(): CSSShadowModel {

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

@@ -127,7 +127,7 @@ const UIStrings = {
    * which are based on bytes and can be shown in a hexadecimal viewer.
    * Clicking on the button will display that object in the Memory inspector panel.
    */
-  revealInMemoryInpector: 'Reveal in Memory inspector panel',
+  openInMemoryInpector: 'Open in Memory inspector panel',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/object_ui/ObjectPropertiesSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -391,7 +391,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     });
     memoryIcon.setAttribute('jslog', `${VisualLogging.action('open-memory-inspector').track({click: true})}`);
 
-    const revealText = i18nString(UIStrings.revealInMemoryInpector);
+    const revealText = i18nString(UIStrings.openInMemoryInpector);
     UI.Tooltip.Tooltip.install(memoryIcon, revealText);
     UI.ARIAUtils.setLabel(memoryIcon, revealText);
 

package/front_end/ui/legacy/components/perf_ui/CanvasHelper.ts

@@ -3,16 +3,7 @@
 // found in the LICENSE file.
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
-import {ARROW_SIDE, type Legend} from './FlameChart.js';
-import {getFontFamilyForCanvas} from './Font.js';
-
-const LEGEND_SHAPE_DIMENSION = 8;
-const LEGEND_SHAPE_RADIUS = 2;
-const LEGEND_SHAPE_TEXT_GAP = 4;
-const LEGEND_ITEM_GAP = 12;
-
-// The DEFAULT_FONT_SIZE is 11px, the legends' font size should be slightly smaller.
-const LEGEND_FONT_SIZE = '8px';
+import {ARROW_SIDE} from './FlameChart.js';
 
 export function horizontalLine(context: CanvasRenderingContext2D, width: number, y: number): void {
   context.moveTo(0, y);
@@ -62,76 +53,3 @@ export function drawIcon(
   context.fill(p);
   context.restore();
 }
-
-export function drawLegends(context: CanvasRenderingContext2D, x: number, y: number, legends: Legend[]): void {
-  context.save();
-  context.translate(x, y);
-  let xForLegend = 0;
-  for (const legend of legends) {
-    xForLegend = drawOneLegend(context, xForLegend, 4, legend.color, legend.category);
-  }
-  context.restore();
-}
-
-/**
- * Draw a legend for the given color and category.
- *
- * @param color should be a string parsed as CSS <color> value
- * @returns the x offset of the current legend
- */
-function drawOneLegend(
-    context: CanvasRenderingContext2D, x: number, y: number, color: string, category: string): number {
-  context.save();
-
-  context.beginPath();
-  context.fillStyle = color;
-  drawRoundedRectangle(context, x, y, LEGEND_SHAPE_DIMENSION, LEGEND_SHAPE_DIMENSION, LEGEND_SHAPE_RADIUS);
-  context.fill();
-
-  context.textBaseline = 'top';
-  context.fillStyle = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
-  context.font = `${LEGEND_FONT_SIZE} ${getFontFamilyForCanvas()}`;
-  context.fillText(category, x + LEGEND_SHAPE_DIMENSION + LEGEND_SHAPE_TEXT_GAP, y);
-  const renderedTextWidth = context.measureText(category).width;
-  const endXPositionForEntry = x + LEGEND_SHAPE_DIMENSION + LEGEND_SHAPE_TEXT_GAP + renderedTextWidth;
-
-  context.restore();
-
-  return endXPositionForEntry + LEGEND_ITEM_GAP;
-}
-
-function drawRoundedRectangle(
-    context: CanvasRenderingContext2D, startX: number, startY: number, width: number, height: number,
-    borderRadius: number): void {
-  context.save();
-  const endY = startY + height;
-  const endX = startX + width;
-
-  const bezierCurveHandlerAmount = borderRadius * 0.25;
-
-  context.beginPath();
-  // Start at the top left, and draw a line to the top right.
-  context.moveTo(startX + borderRadius, startY);
-  context.lineTo(endX - borderRadius, startY);
-  // Curve from top right corner round and down
-  context.bezierCurveTo(
-      endX - bezierCurveHandlerAmount, startY, endX, startY + bezierCurveHandlerAmount, endX, startY + borderRadius);
-  // Draw down to bottom right corner
-  context.lineTo(endX, endY - borderRadius);
-  // Curve from bottom right corner round to face the bottom left corner
-  context.bezierCurveTo(
-      endX, endY - bezierCurveHandlerAmount, endX - bezierCurveHandlerAmount, endY, endX - borderRadius, endY);
-  // Draw line to bottom left corner
-  context.lineTo(startX + borderRadius, endY);
-  // Curve round and up from bottom left corner
-  context.bezierCurveTo(
-      startX + bezierCurveHandlerAmount, endY, startX, endY - bezierCurveHandlerAmount, startX, endY - borderRadius);
-  // Draw line up to top left corner
-  context.lineTo(startX, startY + borderRadius);
-  // Curve from top left corner round to meet the line we first drew.
-  context.bezierCurveTo(
-      startX, startY + bezierCurveHandlerAmount, startX + bezierCurveHandlerAmount, startY, startX + borderRadius,
-      startY);
-  context.closePath();
-  context.restore();
-}

package/front_end/ui/legacy/components/perf_ui/ChartViewport.ts

@@ -393,10 +393,11 @@ export class ChartViewport extends UI.Widget.VBox {
   }
 
   private handleZoomPanKeys(e: Event): void {
-    if (!UI.KeyboardShortcut.KeyboardShortcut.hasNoModifiers(e)) {
+    const keyboardEvent = (e as KeyboardEvent);
+    // Do not zoom if the key combination has any modifiers other than shift key
+    if (UI.KeyboardShortcut.KeyboardShortcut.hasAtLeastOneModifier(e) && !keyboardEvent.shiftKey) {
       return;
     }
-    const keyboardEvent = (e as KeyboardEvent);
     const zoomFactor = keyboardEvent.shiftKey ? 0.8 : 0.3;
     const panOffset = keyboardEvent.shiftKey ? 320 : 160;
     switch (keyboardEvent.code) {