npm - chrome-devtools-frontend - Versions diffs - 1.0.925655 → 1.0.927419 - Mend

chrome-devtools-frontend 1.0.925655 → 1.0.927419

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/front_end/ui/legacy/themeColors.css CHANGED Viewed

@@ -129,6 +129,37 @@
   --color-ic-file-stylesheet: rgb(174 82 255);
   --color-ic-file-webbundle: rgb(128 134 139);
   --color-ic-file-default: rgb(128 134 139);
+  /* Code highlighting colors */
+  --color-token-variable: inherit;
+  --color-token-property: inherit;
+  --color-token-type: rgb(0 136 119);
+  --color-token-definition: var(--color-token-attribute-value);
+  --color-token-variable-special: rgb(0 85 170);
+  --color-token-builtin: rgb(50 0 170);
+  --color-token-keyword: rgb(171 13 144);
+  --color-token-number: rgb(50 0 255);
+  --color-token-string: rgb(170 17 17);
+  --color-token-string-special: rgb(200 0 0);
+  --color-token-atom: rgb(34 17 153);
+  --color-token-tag: rgb(136 18 128);
+  --color-token-attribute: rgb(153 69 0);
+  --color-token-attribute-value: rgb(26 26 168);
+  --color-token-comment: rgb(0 117 0);
+  --color-token-meta: rgb(85 85 85);
+  --color-token-deleted: rgb(221 68 68);
+  --color-token-inserted: rgb(34 153 34);
+  /* Colors used by the code editor */
+  --color-secondary-cursor: #c0c0c0;
+  --color-line-number: hsl(0deg 0% 46%);
+  --color-matching-bracket-underline: rgb(0 0 0 / 50%);
+  --color-matching-bracket-background: rgb(0 0 0 / 7%);
+  --color-nonmatching-bracket-underline: rgb(255 0 0 / 50%);
+  --color-nonmatching-bracket-background: rgb(255 0 0 / 7%);
+  --color-editor-selection: #cfe8fc;
+  --color-editor-selection-blurred: #e0e0e0;
+  --color-highlighted-line: rgb(255 255 0 / 50%);
 }
 .-theme-with-dark-background {
@@ -215,4 +246,33 @@
   --color-ic-file-stylesheet: rgb(161 66 244);
   --color-ic-file-webbundle: rgb(128 134 139);
   --color-ic-file-default: rgb(128 134 139);
+  /* Code highlighting colors */
+  --color-token-variable: rgb(217 217 217);
+  --color-token-property: rgb(210 192 87);
+  --color-token-type: var(--color-token-tag);
+  --color-token-definition: var(--color-token-tag);
+  --color-token-builtin: rgb(159 180 214);
+  --color-token-variable-special: rgb(0 85 170);
+  --color-token-keyword: rgb(154 127 213);
+  --color-token-number: var(--color-token-number);
+  --color-token-string: rgb(242 139 84);
+  --color-token-string-special: var(--color-token-string);
+  --color-token-atom: rgb(161 247 181);
+  --color-token-comment: rgb(137 137 137);
+  --color-token-tag: rgb(93 176 215);
+  --color-token-attribute: rgb(155 187 220);
+  --color-token-attribute-value: rgb(1 200 1);
+  --color-token-meta: rgb(221 251 85);
+  /* Colors used by the code editor */
+  --color-secondary-cursor: rgb(63 63 63);
+  --color-line-number: rgb(138 138 138);
+  --color-matching-bracket-underline: rgb(217 217 217);
+  --color-matching-bracket-background: initial;
+  --color-nonmatching-bracket-underline: rgb(255 26 26);
+  --color-nonmatching-bracket-background: initial;
+  --color-editor-selection: hsl(207deg 88% 22%);
+  --color-editor-selection-blurred: #454545;
+  --color-highlighted-line: hsl(133deg 100% 30% / 50%);
 }

package/inspector_overlay/debug/tool_persistent_isolated_element.html ADDED Viewed

@@ -0,0 +1,75 @@
+<!--
+Copyright 2021 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.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Debug</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <script type="module" src="/out/Default/resources/inspector_overlay/main.js"></script>
+</head>
+<body>
+  <script type="module">
+    const viewportWidth = document.documentElement.clientWidth;
+    const viewportHeight = document.documentElement.clientHeight;
+    dispatch(["setPlatform", "other"]);
+    dispatch(["setOverlay", "persistent"]);
+    dispatch(["reset", {
+      viewportSize: {
+        width: viewportWidth,
+        height: viewportHeight,
+      },
+      deviceScaleFactor: 1,
+      pageScaleFactor: 1,
+      pageZoomFactor: 1,
+      emulationScaleFactor: 1,
+      scrollX: 0,
+      scrollY: 0,
+    }]);
+    dispatch(["drawIsolatedElementHighlight", {
+      "draggableWidthBorder": [
+        "M",
+        300,
+        100,
+        "L",
+        350,
+        100,
+        "L",
+        350,
+        300,
+        "L",
+        300,
+        300,
+        "Z"
+      ],
+      "draggableHeightBorder": [
+        "M",
+        100,
+        300,
+        "L",
+        300,
+        300,
+        "L",
+        300,
+        350,
+        "L",
+        100,
+        350,
+        "Z"
+      ],
+      "currentWidth": 200,
+      "currentHeight": 200,
+      "currentX": 100,
+      "currentY": 100,
+      "highlightIndex": 1,
+    }]);
+  </script>
+</body>
+</html>

package/inspector_overlay/drag_resize_handler.ts ADDED Viewed

@@ -0,0 +1,142 @@
+// Copyright 2021 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.
+export const enum ResizerType {
+  WIDTH = 'width',
+  HEIGHT = 'height',
+  BIDIRECTION = 'bidirection',
+}
+export interface Draggable {
+  type: ResizerType;
+  initialWidth?: number;
+  initialHeight?: number;
+  update({width, height}: {width?: number, height?: number}): void;
+}
+export interface Delegate {
+  getDraggable(x: number, y: number): Draggable|undefined;
+}
+const cursorByResizerType = new Map([
+  [ResizerType.WIDTH, 'ew-resize'],
+  [ResizerType.HEIGHT, 'ns-resize'],
+  [ResizerType.BIDIRECTION, 'nwse-resize'],
+]);
+type OriginInfo = {
+  coord: number,
+  value: number,
+};
+export class DragResizeHandler {
+  private document: Document;
+  private delegate: Delegate;
+  private originX?: OriginInfo;
+  private originY?: OriginInfo;
+  private boundMousemove: (event: MouseEvent) => void;
+  private boundMousedown: (event: MouseEvent) => void;
+  constructor(document: Document, delegate: Delegate) {
+    this.document = document;
+    this.delegate = delegate;
+    this.boundMousemove = this.onMousemove.bind(this);
+    this.boundMousedown = this.onMousedown.bind(this);
+  }
+  install() {
+    this.document.body.addEventListener('mousemove', this.boundMousemove);
+    this.document.body.addEventListener('mousedown', this.boundMousedown);
+  }
+  uninstall() {
+    this.document.body.removeEventListener('mousemove', this.boundMousemove);
+    this.document.body.removeEventListener('mousedown', this.boundMousedown);
+  }
+  /**
+   * Updates the cursor style of the mouse is hovered over a resizeable area.
+   */
+  private onMousemove(event: MouseEvent) {
+    const match = this.delegate.getDraggable(event.clientX, event.clientY);
+    if (!match) {
+      this.document.body.style.cursor = 'default';
+      return;
+    }
+    this.document.body.style.cursor = cursorByResizerType.get(match.type) || 'default';
+  }
+  /**
+   * Starts dragging
+   */
+  private onMousedown(event: MouseEvent) {
+    const match = this.delegate.getDraggable(event.clientX, event.clientY);
+    if (!match) {
+      return;
+    }
+    const boundOnDrag = this.onDrag.bind(this, match);
+    event.stopPropagation();
+    event.preventDefault();
+    if (match.initialWidth !== undefined &&
+        (match.type === ResizerType.WIDTH || match.type === ResizerType.BIDIRECTION)) {
+      this.originX = {
+        coord: Math.round(event.clientX),
+        value: match.initialWidth,
+      };
+    }
+    if (match.initialHeight !== undefined &&
+        (match.type === ResizerType.HEIGHT || match.type === ResizerType.BIDIRECTION)) {
+      this.originY = {
+        coord: Math.round(event.clientY),
+        value: match.initialHeight,
+      };
+    }
+    this.document.body.removeEventListener('mousemove', this.boundMousemove);
+    this.document.body.style.cursor = cursorByResizerType.get(match.type) || 'default';
+    const endDrag = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.originX = undefined;
+      this.originY = undefined;
+      this.document.body.style.cursor = 'default';
+      this.document.body.removeEventListener('mousemove', boundOnDrag);
+      this.document.body.addEventListener('mousemove', this.boundMousemove);
+    };
+    this.document.body.addEventListener('mouseup', endDrag, {once: true});
+    window.addEventListener('mouseout', endDrag, {once: true});
+    this.document.body.addEventListener('mousemove', boundOnDrag);
+  }
+  /**
+   * Computes the new value while the cursor is being dragged and calls InspectorOverlayHost with the new value.
+   */
+  private onDrag(match: Draggable, e: MouseEvent) {
+    if (!this.originX && !this.originY) {
+      return;
+    }
+    let width: number|undefined;
+    let height: number|undefined;
+    if (this.originX) {
+      const delta = this.originX.coord - e.clientX;
+      width = Math.round(this.originX.value - delta);
+    }
+    if (this.originY) {
+      const delta = this.originY.coord - e.clientY;
+      height = Math.round(this.originY.value - delta);
+    }
+    match.update({width, height});
+  }
+}

package/inspector_overlay/highlight_isolated_element.ts ADDED Viewed

@@ -0,0 +1,62 @@
+// Copyright 2021 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 type {PathCommands} from './common.js';
+import {buildPath, emptyBounds, fillPathWithBoxStyle} from './highlight_common.js';
+export interface IsolatedElementHighlight {
+  widthResizerBorder: PathCommands;
+  heightResizerBorder: PathCommands;
+  bidirectionResizerBorder: PathCommands;
+  currentX: number;
+  currentY: number;
+  currentWidth: number;
+  currentHeight: number;
+  highlightIndex: number;
+  isolationModeHighlightConfig: {
+    resizerColor: string,
+    resizerHandleColor: string,
+    maskColor: string,
+  };
+}
+export function drawIsolatedElementHighlight(
+    highlight: IsolatedElementHighlight, context: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number,
+    emulationScaleFactor: number) {
+  const {currentX, currentY, currentWidth, currentHeight, highlightIndex} = highlight;
+  // Draw a mask covering other area of the canvas.
+  context.save();
+  context.fillStyle = highlight.isolationModeHighlightConfig.maskColor;
+  context.fillRect(0, 0, canvasWidth, canvasHeight);
+  context.clearRect(currentX, currentY, currentWidth, currentHeight);
+  context.restore();
+  // Draw the width resizer with handle bars.
+  const bounds = emptyBounds();
+  const widthPath = buildPath(highlight.widthResizerBorder, bounds, emulationScaleFactor);
+  fillPathWithBoxStyle(context, widthPath, bounds, 0 /* angle */, {
+    fillColor: highlight.isolationModeHighlightConfig.resizerColor,
+  });
+  // Draw the height resizer with handle bars.
+  const heightPath = buildPath(highlight.heightResizerBorder, bounds, emulationScaleFactor);
+  fillPathWithBoxStyle(context, heightPath, bounds, 0 /* angle */, {
+    fillColor: highlight.isolationModeHighlightConfig.resizerColor,
+  });
+  // Draw the bidirection resizer with handle bars.
+  const bidirectionPath = buildPath(highlight.bidirectionResizerBorder, bounds, emulationScaleFactor);
+  fillPathWithBoxStyle(context, bidirectionPath, bounds, 0 /* angle */, {
+    fillColor: highlight.isolationModeHighlightConfig.resizerColor,
+  });
+  return {
+    widthPath,
+    heightPath,
+    bidirectionPath,
+    currentWidth,
+    currentHeight,
+    highlightIndex,
+  };
+}

package/inspector_overlay/main.ts CHANGED Viewed

@@ -14,11 +14,14 @@ import highlightStyle from './tool_highlight.css'; // eslint-disable-line rulesd
 import {HighlightOverlay} from './tool_highlight.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import pausedStyle from './tool_paused.css'; // eslint-disable-line rulesdir/es_modules_import
+import type {PausedToolMessage} from './tool_paused.js';
 import {PausedOverlay} from './tool_paused.js';
+import type {PersistentToolMessage} from './tool_persistent.js';
 import {PersistentOverlay} from './tool_persistent.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import screenshotStyle from './tool_screenshot.css'; // eslint-disable-line rulesdir/es_modules_import
 import {ScreenshotOverlay} from './tool_screenshot.js';
+import type {ScreenshotToolMessage} from './tool_screenshot.js';
 // @ts-ignore Importing CSS is handled in Rollup.
 import sourceOrderStyle from './tool_source_order.css'; // eslint-disable-line rulesdir/es_modules_import
 import {SourceOrderOverlay} from './tool_source_order.js';
@@ -28,7 +31,7 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    InspectorOverlayHost: {send(data: string): void};
+    InspectorOverlayHost: {send(data: PausedToolMessage|PersistentToolMessage|ScreenshotToolMessage|string): void};
   }
 }

package/inspector_overlay/tool_highlight.ts CHANGED Viewed

@@ -41,6 +41,7 @@ import {drawLayoutGridHighlight} from './highlight_grid_common.js';
 import type {ScrollSnapHighlight} from './highlight_scroll_snap.js';
 import type {ContainerQueryHighlight} from './highlight_container_query.js';
 import {drawContainerQueryHighlight} from './highlight_container_query.js';
+import type {IsolatedElementHighlight} from './highlight_isolated_element.js';
 import {PersistentOverlay} from './tool_persistent.js';
 interface Path {
@@ -85,6 +86,7 @@ interface Highlight {
   flexInfo: FlexContainerHighlight[];
   flexItemInfo: FlexItemHighlight[];
   containerQueryInfo: ContainerQueryHighlight[];
+  isolatedElementInfo: IsolatedElementHighlight[];
 }
 export class HighlightOverlay extends Overlay {
@@ -245,6 +247,10 @@ export class HighlightOverlay extends Overlay {
     this.persistentOverlay?.drawContainerQueryHighlight(highlight);
   }
+  drawIsolatedElementHighlight(highlight: IsolatedElementHighlight) {
+    this.persistentOverlay?.drawIsolatedElementHighlight(highlight);
+  }
   private drawAxis(context: CanvasRenderingContext2D, rulerAtRight: boolean, rulerAtBottom: boolean) {
     context.save();

package/inspector_overlay/tool_paused.ts CHANGED Viewed

@@ -4,6 +4,8 @@
 import {Overlay} from './common.js';
+export type PausedToolMessage = 'resume'|'stepOver';
 export class PausedOverlay extends Overlay {
   private container!: HTMLElement;

package/inspector_overlay/tool_persistent.ts CHANGED Viewed

@@ -30,19 +30,74 @@
 import type {ResetData} from './common.js';
 import {Overlay} from './common.js';
+import type {Delegate} from './drag_resize_handler.js';
+import {DragResizeHandler, ResizerType} from './drag_resize_handler.js';
 import type {ContainerQueryHighlight} from './highlight_container_query.js';
 import {drawContainerQueryHighlight} from './highlight_container_query.js';
 import type {FlexContainerHighlight} from './highlight_flex_common.js';
 import {drawLayoutFlexContainerHighlight} from './highlight_flex_common.js';
 import type {GridHighlight} from './highlight_grid_common.js';
 import {drawLayoutGridHighlight} from './highlight_grid_common.js';
+import type {IsolatedElementHighlight} from './highlight_isolated_element.js';
+import {drawIsolatedElementHighlight} from './highlight_isolated_element.js';
 import type {ScrollSnapHighlight} from './highlight_scroll_snap.js';
 import {drawScrollSnapHighlight} from './highlight_scroll_snap.js';
+export type PersistentToolMessage = {
+  highlightType: string,
+  highlightIndex: number,
+  newWidth: string,
+  newHeight: string,
+  resizerType: ResizerType,
+};
+interface DraggableMetadata {
+  type: ResizerType;
+  highlightIndex: number;
+  initialWidth?: number;
+  initialHeight?: number;
+}
+function makeDraggableDelegate(overlay: PersistentOverlay): Delegate {
+  return {
+    getDraggable: (x, y) => {
+      const result = overlay.isPointInDraggablePath(x, y);
+      if (!result) {
+        return;
+      }
+      return {
+        type: result.type,
+        initialWidth: result.initialWidth,
+        initialHeight: result.initialHeight,
+        id: result.highlightIndex,
+        update: ({width, height}: {width?: number, height?: number}) => {
+          window.InspectorOverlayHost.send({
+            highlightType: 'isolatedElement',
+            highlightIndex: result.highlightIndex,
+            newWidth: `${width}px`,
+            newHeight: `${height}px`,
+            resizerType: result.type,
+          });
+        },
+      };
+    },
+  };
+}
 export class PersistentOverlay extends Overlay {
   private gridLabelState = {gridLayerCounter: 0};
   private gridLabels!: HTMLElement;
+  private draggableBorders: Map<number, {
+    widthPath: Path2D,
+    heightPath: Path2D,
+    bidirectionPath: Path2D,
+    highlightIndex: number,
+    initialWidth: number,
+    initialHeight: number,
+  }> = new Map();
+  private dragHandler?: DragResizeHandler;
   reset(data: ResetData) {
     super.reset(data);
@@ -70,12 +125,15 @@ export class PersistentOverlay extends Overlay {
     this.setCanvas(canvas);
     super.install();
+    this.dragHandler?.install();
   }
   uninstall() {
     this.document.body.classList.remove('fill');
     this.document.body.innerHTML = '';
+    this.draggableBorders = new Map();
     super.uninstall();
+    this.dragHandler?.uninstall();
   }
   drawGridHighlight(highlight: GridHighlight) {
@@ -105,4 +163,56 @@ export class PersistentOverlay extends Overlay {
     drawContainerQueryHighlight(highlight, this.context, this.emulationScaleFactor);
     this.context.restore();
   }
+  drawIsolatedElementHighlight(highlight: IsolatedElementHighlight) {
+    if (!this.dragHandler) {
+      this.dragHandler = new DragResizeHandler(this.document, makeDraggableDelegate(this));
+      this.dragHandler.install();
+    }
+    this.context.save();
+    const {widthPath, heightPath, bidirectionPath, currentWidth, currentHeight, highlightIndex} =
+        drawIsolatedElementHighlight(
+            highlight, this.context, this.canvasWidth, this.canvasHeight, this.emulationScaleFactor);
+    this.draggableBorders.set(highlightIndex, {
+      widthPath,
+      heightPath,
+      bidirectionPath,
+      highlightIndex,
+      initialWidth: currentWidth,
+      initialHeight: currentHeight,
+    });
+    this.context.restore();
+  }
+  isPointInDraggablePath(x: number, y: number): DraggableMetadata|undefined {
+    for (const {widthPath, heightPath, bidirectionPath, highlightIndex, initialWidth, initialHeight} of this
+             .draggableBorders.values()) {
+      if (this.context.isPointInPath(widthPath, x, y)) {
+        return {
+          type: ResizerType.WIDTH,
+          highlightIndex,
+          initialWidth,
+        };
+      }
+      if (this.context.isPointInPath(heightPath, x, y)) {
+        return {
+          type: ResizerType.HEIGHT,
+          highlightIndex,
+          initialHeight,
+        };
+      }
+      if (this.context.isPointInPath(bidirectionPath, x, y)) {
+        return {
+          type: ResizerType.BIDIRECTION,
+          highlightIndex,
+          initialWidth,
+          initialHeight,
+        };
+      }
+    }
+    return;
+  }
 }

package/inspector_overlay/tool_screenshot.ts CHANGED Viewed

@@ -4,6 +4,13 @@
 import {Overlay} from './common.js';
+export type ScreenshotToolMessage = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
 let anchor: {x: number, y: number}|null = null;
 let position: {x: number, y: number}|null = null;
@@ -56,7 +63,7 @@ export class ScreenshotOverlay extends Overlay {
     if (anchor && position) {
       const rect = currentRect();
       if (rect.width >= 5 && rect.height >= 5) {
-        this.window.InspectorOverlayHost.send(JSON.stringify(rect));
+        this.window.InspectorOverlayHost.send(rect);
       }
     }
     cancel();

package/package.json CHANGED Viewed

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.925655"
+  "version": "1.0.927419"
 }

package/front_end/panels/application/components/ReportingApiView.ts DELETED Viewed

@@ -1,24 +0,0 @@
-// Copyright 2021 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 i18n from '../../../core/i18n/i18n.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-const UIStrings = {
-  /**
-  *@description Placeholder text when there are no Reporting API reports.
-  *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
-  */
-  noReportsToDisplay: 'No reports to display',
-};
-const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportingApiView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export class ReportingApiView extends UI.Widget.VBox {
-  constructor() {
-    super();
-    const emptyView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noReportsToDisplay));
-    emptyView.show(this.contentElement);
-  }
-}