chrome-devtools-frontend 1.0.939144 → 1.0.940714

package/front_end/panels/settings/components/SyncSection.ts

@@ -8,6 +8,7 @@ import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as Settings from '../../../ui/components/settings/settings.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
@@ -81,21 +82,31 @@ export class SyncSection extends HTMLElement {
   }
 }
 
+/* x-link doesn't work with custom click/keydown handlers */
+/* eslint-disable rulesdir/ban_a_tags_in_lit_html */
+
 function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
   if (!syncInfo.isSyncActive) {
+    const link = 'chrome://settings/syncSetup';
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)} <x-link href="chrome://settings/syncSetup" class="link">${
-        i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.syncDisabled)} <a href="${link}" class="link" target="_blank"
+          @click=${(e: Event): void => openSettingsTab(link, e)}
+          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
+    // clang-format on
   }
   if (!syncInfo.arePreferencesSynced) {
+    const link = 'chrome://settings/syncSetup/advanced';
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
       <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)} <x-link href="chrome://settings/syncSetup/advanced" class="link">${
-        i18nString(UIStrings.settings)}</x-link>
+        ${i18nString(UIStrings.preferencesSyncDisabled)} <a href="${link}" class="link" target="_blank"
+          @click=${(e: Event): void => openSettingsTab(link, e)}
+          @keydown=${(e: Event): void => openSettingsTab(link, e)}>${i18nString(UIStrings.settings)}</x-link>
       </span>`;
     // clang-format on
   }
@@ -109,6 +120,16 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
     </div>`;
 }
 
+// Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
+// there using CDP.
+function openSettingsTab(url: string, event: Event): void {
+  if (event.type === 'click' || (event.type === 'keydown' && self.isEnterOrSpaceKey(event))) {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    mainTarget && mainTarget.targetAgent().invoke_createTarget({url});
+    event.consume(true);
+  }
+}
+
 ComponentHelpers.CustomElements.defineComponent('devtools-sync-section', SyncSection);
 
 declare global {

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -191,13 +191,20 @@ export class DebuggerPausedMessage {
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
       let eventNameForUI = '';
       if (details.auxData) {
-        eventNameForUI =
-            SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle((details.auxData as {
-              directiveText: string,
-              eventName: string,
-              targetName: string,
-              webglErrorName: string,
-            }));
+        const maybeNonDomEventNameForUI =
+            SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpointTitle(
+                (details.auxData as {eventName: string}));
+        if (maybeNonDomEventNameForUI) {
+          eventNameForUI = maybeNonDomEventNameForUI;
+        } else {
+          eventNameForUI = SDK.DOMDebuggerModel.DOMDebuggerManager.instance().resolveEventListenerBreakpointTitle(
+              (details.auxData as {
+                directiveText: string,
+                eventName: string,
+                targetName: string,
+                webglErrorName: string,
+              }));
+        }
       }
       messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnEventListener), eventNameForUI);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {

package/front_end/third_party/codemirror.next/bundle-tsconfig.json

@@ -16,6 +16,6 @@
     "chunk/php.js",
     "chunk/python.js",
     "chunk/wast.js",
-    "chunk/xml.js",
+    "chunk/xml.js"
   ]
 }

package/front_end/ui/components/buttons/Button.ts

@@ -30,6 +30,7 @@ interface ButtonState {
   variant?: Variant;
   size?: Size;
   disabled: boolean;
+  active: boolean;
 }
 
 export type ButtonData = {
@@ -37,11 +38,13 @@ export type ButtonData = {
   iconUrl: string,
   size?: Size,
   disabled?: boolean,
+  active?: boolean,
 }|{
   variant: Variant.PRIMARY | Variant.SECONDARY,
   iconUrl?: string,
   size?: Size,
   disabled?: boolean,
+  active?: boolean,
 };
 
 export class Button extends HTMLElement {
@@ -52,6 +55,7 @@ export class Button extends HTMLElement {
   private readonly props: ButtonState = {
     size: Size.MEDIUM,
     disabled: false,
+    active: false,
   };
   private isEmpty = true;
 
@@ -69,6 +73,7 @@ export class Button extends HTMLElement {
     this.props.variant = data.variant;
     this.props.iconUrl = data.iconUrl;
     this.props.size = data.size || Size.MEDIUM;
+    this.props.active = Boolean(data.active);
     this.setDisabledProperty(data.disabled || false);
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
@@ -93,6 +98,11 @@ export class Button extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
   }
 
+  set active(active: boolean) {
+    this.props.active = active;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.boundRender);
+  }
+
   private setDisabledProperty(disabled: boolean): void {
     this.props.disabled = disabled;
     this.toggleAttribute('disabled', disabled);
@@ -140,6 +150,7 @@ export class Button extends HTMLElement {
       'text-with-icon': Boolean(this.props.iconUrl) && !this.isEmpty,
       'only-icon': Boolean(this.props.iconUrl) && this.isEmpty,
       small: Boolean(this.props.size === Size.SMALL),
+      active: this.props.active,
     };
     // clang-format off
     LitHtml.render(

package/front_end/ui/components/buttons/button.css

@@ -80,6 +80,7 @@ button.primary:hover {
   border: 1px solid var(--color-button-primary-background-hovering);
 }
 
+button.primary.active,
 button.primary:active {
   background: var(--color-button-primary-background-pressed);
   border: 1px solid var(--color-button-primary-background-pressed);
@@ -103,6 +104,7 @@ button.secondary:hover {
   background: var(--color-button-secondary-background-hovering);
 }
 
+button.secondary.active,
 button.secondary:active {
   background: var(--color-button-secondary-background-pressed);
   border: 1px solid var(--color-button-secondary-background-pressed);
@@ -120,6 +122,7 @@ button.secondary:disabled:hover {
   cursor: not-allowed;
 }
 
+button.secondary.active:focus-visible,
 button.secondary:active:focus-visible {
   border: 1px solid var(--color-button-secondary-background-pressed);
 }
@@ -128,6 +131,7 @@ button.toolbar:hover {
   background-color: var(--color-button-secondary-background-hovering);
 }
 
+button.toolbar.active,
 button.toolbar:active {
   background-color: var(--color-button-secondary-background-pressed);
 }

package/front_end/ui/components/docs/button/basic.ts

@@ -32,6 +32,16 @@ primaryButton.innerText = 'Click me';
 primaryButton.onclick = () => alert('clicked');
 appendButton(primaryButton);
 
+// Primary (forced active)
+const forcedActive = new Buttons.Button.Button();
+forcedActive.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  active: true,
+};
+forcedActive.innerText = 'Forced active';
+forcedActive.onclick = () => alert('clicked');
+appendButton(forcedActive);
+
 // Secondary
 const secondaryButton = new Buttons.Button.Button();
 secondaryButton.innerText = 'Click me';

package/package.json

@@ -31,7 +31,7 @@
     "check-external-links": "third_party/node/node.py --output scripts/check_external_links.js",
     "check-gn": "third_party/node/node.py --output scripts/check_gn.js",
     "check-json": "third_party/node/node.py --output scripts/json_validator/validate_module_json.js",
-    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.js && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
+    "check-lint": "third_party/node/node.py --output scripts/test/run_lint_check_js.mjs && third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "check-lint-css": "third_party/node/node.py --output scripts/test/run_lint_check_css.js",
     "collect-strings": "third_party/node/node.py --output third_party/i18n/collect-strings.js front_end",
     "components-server": "third_party/node/node.py --output scripts/component_server/server.js",
@@ -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.939144"
+  "version": "1.0.940714"
 }

package/scripts/eslint_rules/lib/check_component_naming.js

@@ -44,7 +44,7 @@ module.exports = {
 
     function findComponentTagNameFromStaticProperty(classBodyNode) {
       return classBodyNode.body.find(node => {
-        return node.type === 'ClassProperty' && node.key.name === 'litTagName';
+        return node.type === 'PropertyDefinition' && node.key.name === 'litTagName';
       });
     }
 

package/scripts/eslint_rules/lib/enforce_custom_event_names.js

@@ -73,7 +73,7 @@ module.exports = {
 
         // If the reference is right, let's find the value of the static eventName property and make sure it is valid.
         const eventNameProperty = node.body.body.find(classBodyPart => {
-          return classBodyPart.type === 'ClassProperty' && classBodyPart.key.name === 'eventName';
+          return classBodyPart.type === 'PropertyDefinition' && classBodyPart.key.name === 'eventName';
         });
 
         // This should always exist because we checked for its existence

package/scripts/eslint_rules/lib/l10n_no_i18nString_calls_module_instantiation.js

@@ -7,7 +7,7 @@
 // One of these AST nodes must be an ancestor of an i18nString call.
 const REQUIRED_ANCESTOR = new Set([
   'ArrowFunctionExpression',
-  'ClassProperty',
+  'PropertyDefinition',
   'FunctionDeclaration',
   'FunctionExpression',
   'MethodDefinition',

package/scripts/eslint_rules/lib/no_underscored_properties.js

@@ -49,7 +49,7 @@ module.exports = {
   },
   create: function(context) {
     return {
-      ClassProperty(node) {
+      PropertyDefinition(node) {
         checkNodeForUnderscoredProperties(context, node, 'property');
       },
       MethodDefinition(node) {

package/front_end/entrypoints/main/module.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": [
-    "ui/legacy"
-  ]
-}