chrome-devtools-frontend 1.0.953446 → 1.0.953776

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

@@ -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 */

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.953446"
+  "version": "1.0.953776"
 }

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);
+    });
+  });
 });