chrome-devtools-frontend 1.0.939066 → 1.0.940255

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.939066"
+  "version": "1.0.940255"
 }

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"
-  ]
-}