chrome-devtools-frontend 1.0.953165 → 1.0.954163

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -8,6 +8,7 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 import * as IconButton from '../icon_button/icon_button.js';
 
+import * as Input from '../input/input.js';
 import previewToggleStyles from './previewToggle.css.js';
 
 const {render, html, nothing} = LitHtml;
@@ -41,7 +42,7 @@ export class PreviewToggle extends HTMLElement {
   #onChangeCallback?: (checked: boolean) => void;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [previewToggleStyles];
+    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, previewToggleStyles];
   }
 
   set data(data: PreviewToggleData) {

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -6,6 +6,7 @@ import type * as Common from '../../../core/common/common.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
+import * as Input from '../input/input.js';
 import settingCheckboxStyles from './settingCheckbox.css.js';
 
 export interface SettingCheckboxData {
@@ -29,7 +30,7 @@ export class SettingCheckbox extends HTMLElement {
   #changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [settingCheckboxStyles];
+    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, settingCheckboxStyles];
   }
 
   set data(data: SettingCheckboxData) {

package/front_end/ui/components/settings/settingCheckbox.css

@@ -24,8 +24,3 @@ label {
 p {
   margin: 12px 0;
 }
-
-/* Preserve look of legacy checkboxes in dark mode */
-:host-context(.-theme-with-dark-background) input[type="checkbox"]:not(.-theme-preserve) {
-  accent-color: var(--color-checkbox-accent-color);
-}

package/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -7,10 +7,16 @@ import * as i18n from '../../core/i18n/i18n.js';
 import {Dialog} from './Dialog.js';
 import {SizeBehavior} from './GlassPane.js';
 import remoteDebuggingTerminatedScreenStyles from './remoteDebuggingTerminatedScreen.css.legacy.js';
-import {createTextButton, formatLocalized} from './UIUtils.js';
+import {createTextButton} from './UIUtils.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
+  /**
+   * @description Text in a dialog box in DevTools stating why remote debugging has been terminated.
+   * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
+   * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
+   */
+  debuggingConnectionWasClosed: 'Debugging connection was closed. Reason: ',
   /**
    * @description Text in a dialog box showing how to reconnect to DevTools when remote debugging has been terminated.
    * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
@@ -33,9 +39,10 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
     super(true);
     this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
     const message = this.contentElement.createChild('div', 'message');
-    const reasonElement = message.createChild('span', 'reason');
+    const span = message.createChild('span');
+    span.append(i18nString(UIStrings.debuggingConnectionWasClosed));
+    const reasonElement = span.createChild('span', 'reason');
     reasonElement.textContent = reason;
-    message.appendChild(formatLocalized('Debugging connection was closed. Reason: %s', [reasonElement]));
     this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.reconnectWhenReadyByReopening);
     const button = createTextButton(i18nString(UIStrings.reconnectDevtools), () => window.location.reload());
     this.contentElement.createChild('div', 'button').appendChild(button);

package/front_end/ui/legacy/UIUtils.ts

@@ -583,18 +583,6 @@ export function handleElementValueModifications(
   return false;
 }
 
-export function formatLocalized<U>(format: string, substitutions: ArrayLike<U>|null): Element {
-  const formatters = {
-    s: (substitution: unknown): unknown => substitution,
-  };
-  function append(a: Element, b: string|Element): Element {
-    a.appendChild(typeof b === 'string' ? document.createTextNode(b) : b as Element);
-    return a;
-  }
-  return Platform.StringUtilities.format(format, substitutions, formatters, document.createElement('span'), append)
-      .formattedResult;
-}
-
 export function openLinkExternallyLabel(): string {
   return i18nString(UIStrings.openInNewTab);
 }

package/front_end/ui/legacy/themeColors.css

@@ -25,7 +25,7 @@
   --color-background-elevation-2: rgb(222 225 230);
   /** Used when the elevation is visible only on dark theme */
   --color-background-elevation-dark-only: var(--color-background);
-  --color-background-highlight: rgb(202 205 209);
+  --color-background-highlight: rgb(218 220 224);
   /** To draw grid lines behind elements */
   --divider-line: rgb(0 0 0 / 10%);
   /**
@@ -108,6 +108,7 @@
   --color-error-text: #f00;
   --color-error-border: hsl(0deg 100% 92%);
   --color-error-background: hsl(0deg 100% 97%);
+  --color-checkbox-accent-color: var(--color-primary);
   --color-image-preview-background: rgb(255 255 255);
 
   /* Colors for styling inputs */
@@ -202,7 +203,7 @@
   --color-background-elevation-1: rgb(41 42 45);
   --color-background-elevation-2: rgb(53 54 58);
   --color-background-elevation-dark-only: var(--color-background-elevation-1);
-  --color-background-highlight: rgb(75 76 79);
+  --color-background-highlight: rgb(69 69 69);
   --divider-line: rgb(255 255 255 / 10%);
   --color-background-hover-overlay: rgb(56 121 217 / 10%);
   --color-selection-highlight: rgb(251 202 70 / 20%);

package/front_end/ui/legacy/treeoutline.css

@@ -56,7 +56,7 @@
 }
 
 .tree-outline:not(.hide-selection-when-blurred) li.in-clipboard .highlight {
-  outline: 1px dotted var(--color-background-highlight);
+  outline: 1px dotted var(--color-details-hairline);
 }
 
 ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus .selection {

package/inspector_overlay/main.ts

@@ -80,17 +80,10 @@ type MessageLookup = {
   drawingFinished: '',
 };
 
-let queue: unknown[][] = [];
-let prevQueue: string = '';
-
 const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLookup[K]]) => {
   const functionName = message[0];
   if (functionName === 'setOverlay') {
     const overlayName = message[1] as keyof Overlays;
-    // No need to swap overlays if it's the same overlay.
-    if (overlays[overlayName] === currentOverlay) {
-      return;
-    }
     if (currentOverlay) {
       currentOverlay.uninstall();
     }
@@ -104,16 +97,9 @@ const dispatch = <K extends keyof MessageLookup>(message: [a: K, b: MessageLooku
   } else if (functionName === 'setPlatform') {
     platformName = message[1];
   } else if (functionName === 'drawingFinished') {
-    const currentQueue = JSON.stringify(queue);
-    if (currentQueue !== prevQueue) {
-      for (const message of queue) {
-        currentOverlay.dispatch(message);
-      }
-    }
-    prevQueue = currentQueue;
-    queue = [];
+    // TODO The logic needs to be added here once the backend starts sending this event.
   } else {
-    queue.push(message);
+    currentOverlay.dispatch(message);
   }
 };
 

package/package.json

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

package/scripts/eslint_rules/lib/lit_html_host_this.js

@@ -3,16 +3,7 @@
 // found in the LICENSE file.
 'use strict';
 
-function isLitHtmlRenderCall(callExpressionNode) {
-  if (callExpressionNode.callee.type !== 'MemberExpression') {
-    return false;
-  }
-
-  // TODO: would miss cases where the render function is destructured. Should
-  // we support that case, or enforce that it's not done?
-  const {callee} = callExpressionNode;
-  return callee.object?.name === 'LitHtml' && callee.property?.name === 'render';
-}
+const {isLitHtmlRenderCall} = require('./utils.js');
 
 module.exports = {
   meta: {

package/scripts/eslint_rules/lib/utils.js

@@ -26,4 +26,23 @@ function isLitHtmlTemplateCall(taggedTemplateExpressionNode) {
   return isLitHtmlDotHtmlCall || isDestructuredHtmlCall;
 }
 
-module.exports = {isLitHtmlTemplateCall};
+/**
+ * @param callExpressionNode - a CallExpression node from the AST of the parsed code.
+ * @returns {boolean} - `true` if the code matches LitHtml.render() or render(), and false otherwise.
+*/
+function isLitHtmlRenderCall(callExpressionNode) {
+  if (callExpressionNode.type !== 'CallExpression') {
+    throw new Error('Node of type other than CallExpresson passed to isLitHtmlRenderCall.');
+  }
+
+  const {callee} = callExpressionNode;
+  const isDestructuredRenderCall = callee.type === 'Identifier' && callee.name === 'render';
+  const isLitHtmlDotRenderCall = callee.object?.name === 'LitHtml' && callee.property?.name === 'render';
+
+  return isDestructuredRenderCall || isLitHtmlDotRenderCall;
+}
+
+module.exports = {
+  isLitHtmlTemplateCall,
+  isLitHtmlRenderCall
+};

package/scripts/eslint_rules/tests/utils_test.js

@@ -37,4 +37,34 @@ describe('eslint utils', () => {
       assert.strictEqual(result, false);
     });
   });
+
+  describe('isLitHtmlRenderCall', () => {
+    it('returns true if the code is LitHtml.render()', () => {
+      const code = 'LitHtml.render(LitHtml.html``, this.#shadow)';
+      const parsed = parser.parse(code);
+      const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
+      assert.strictEqual(result, true);
+    });
+
+    it('returns true if the code is render()', () => {
+      const code = 'render(html``, this.#shadow)';
+      const parsed = parser.parse(code);
+      const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
+      assert.strictEqual(result, true);
+    });
+
+    it('returns false if the code is not render()', () => {
+      const code = 'notRender(html``, this.#shadow)';
+      const parsed = parser.parse(code);
+      const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
+      assert.strictEqual(result, false);
+    });
+
+    it('returns false if the code is LitHtml.notRender()', () => {
+      const code = 'LitHtml.notRender(html``, this.#shadow)';
+      const parsed = parser.parse(code);
+      const result = utils.isLitHtmlRenderCall(parsed.body[0].expression);
+      assert.strictEqual(result, false);
+    });
+  });
 });