chrome-devtools-frontend 1.0.945579 → 1.0.945677

package/front_end/panels/animation/AnimationTimeline.ts

@@ -332,7 +332,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements SDK.TargetManag
       show: (popover: UI.GlassPane.GlassPane): Promise<boolean> => {
         let animGroup;
         for (const [group, previewUI] of this.#previewMap) {
-          if (previewUI.element === element.parentElement) {
+          if (previewUI.element === element || previewUI.element === element.parentElement) {
             animGroup = group;
           }
         }

package/front_end/panels/network/NetworkItemView.ts

@@ -270,7 +270,13 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
 
   private selectTabInternal(tabId: string): void {
     if (!this.selectTab(tabId)) {
-      this.selectTab('headers');
+      // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
+      // it makes sense to retry on the next tick
+      setTimeout(() => {
+        if (!this.selectTab(tabId)) {
+          this.selectTab('headers');
+        }
+      }, 0);
     }
   }
 

package/front_end/panels/profiler/heapProfiler.css

@@ -132,11 +132,8 @@
   }
 }
 
-.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag {
-  color: var(--color-text-secondary);
-}
-
-.heap-snapshot-view td.object-column span.grayed {
+.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
+.heap-snapshot-view tr:not(.selected) td.object-column span.grayed {
   color: var(--color-text-secondary);
 }
 

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -227,15 +227,15 @@ const PROTOCOL_AUTHENTICATOR_VALUES: Protocol.EnumerableEnum<typeof Protocol.Web
   U2f: Protocol.WebAuthn.AuthenticatorProtocol.U2f,
 };
 
-export class WebauthnPaneImpl extends UI.Widget.VBox {
-  private enabled: boolean;
-  private activeAuthId: Protocol.WebAuthn.AuthenticatorId|null;
-  private hasBeenEnabled: boolean;
-  private readonly dataGrids: Map<Protocol.WebAuthn.AuthenticatorId, DataGrid.DataGrid.DataGridImpl<DataGridNode>>;
-  // @ts-ignore
-  private enableCheckbox: UI.Toolbar.ToolbarCheckbox;
+export class WebauthnPaneImpl extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.WebAuthnModel.WebAuthnModel> {
+  private activeAuthId: Protocol.WebAuthn.AuthenticatorId|null = null;
+  private hasBeenEnabled = false;
+  private readonly dataGrids =
+      new Map<Protocol.WebAuthn.AuthenticatorId, DataGrid.DataGrid.DataGridImpl<DataGridNode>>();
+  private enableCheckbox!: UI.Toolbar.ToolbarCheckbox;
   private readonly availableAuthenticatorSetting: Common.Settings.Setting<AvailableAuthenticatorOptions[]>;
-  private model: SDK.WebAuthnModel.WebAuthnModel|null|undefined;
+  private model?: SDK.WebAuthnModel.WebAuthnModel;
   private authenticatorsView: HTMLElement;
   private topToolbarContainer: HTMLElement|undefined;
   private topToolbar: UI.Toolbar.Toolbar|undefined;
@@ -253,21 +253,13 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
 
   constructor() {
     super(true);
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.WebAuthnModel.WebAuthnModel, this);
 
     this.contentElement.classList.add('webauthn-pane');
-    this.enabled = false;
-    this.activeAuthId = null;
-    this.hasBeenEnabled = false;
-    this.dataGrids = new Map();
 
     this.availableAuthenticatorSetting =
-        (Common.Settings.Settings.instance().createSetting('webauthnAuthenticators', []) as
-         Common.Settings.Setting<AvailableAuthenticatorOptions[]>);
-
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    if (mainTarget) {
-      this.model = mainTarget.model(SDK.WebAuthnModel.WebAuthnModel);
-    }
+        Common.Settings.Settings.instance().createSetting<AvailableAuthenticatorOptions[]>(
+            'webauthnAuthenticators', []);
 
     this.createToolbar();
     this.authenticatorsView = this.contentElement.createChild('div', 'authenticators-view');
@@ -284,6 +276,18 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
     return webauthnPaneImplInstance;
   }
 
+  modelAdded(model: SDK.WebAuthnModel.WebAuthnModel): void {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+      this.model = model;
+    }
+  }
+
+  modelRemoved(model: SDK.WebAuthnModel.WebAuthnModel): void {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+      this.model = undefined;
+    }
+  }
+
   private async loadInitialAuthenticators(): Promise<void> {
     let activeAuthenticatorId: Protocol.WebAuthn.AuthenticatorId|null = null;
     const availableAuthenticators = this.availableAuthenticatorSetting.get();
@@ -422,7 +426,6 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.VirtualAuthenticatorEnvironmentEnabled);
         this.hasBeenEnabled = true;
       }
-      this.enabled = enable;
       if (this.model) {
         await this.model.setVirtualAuthEnvEnabled(enable);
       }
@@ -609,7 +612,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
         UI.UIUtils.createRadioLabel(`active-authenticator-${authenticatorId}`, i18nString(UIStrings.active));
     activeLabel.radioElement.addEventListener('click', this.setActiveAuthenticator.bind(this, authenticatorId));
     activeButtonContainer.appendChild(activeLabel);
-    /** @type {!HTMLInputElement} */ (activeLabel.radioElement as HTMLInputElement).checked = true;
+    (activeLabel.radioElement as HTMLInputElement).checked = true;
     this.activeAuthId = authenticatorId;  // Newly added authenticator is automatically set as active.
 
     const removeButton = headerElement.createChild('button', 'text-button');
@@ -783,19 +786,16 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
       throw new Error('Unable to create options from current inputs');
     }
 
-    /**
-     * @type {!Protocol.WebAuthn.VirtualAuthenticatorOptions}
-     */
-    const options = ({
-      protocol: this.protocolSelect.options[this.protocolSelect.selectedIndex].value,
-      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value,
+    return {
+      protocol: this.protocolSelect.options[this.protocolSelect.selectedIndex].value as
+          Protocol.WebAuthn.AuthenticatorProtocol,
+      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value as
+          Protocol.WebAuthn.AuthenticatorTransport,
       hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.userVerificationCheckbox.checked,
       automaticPresenceSimulation: true,
       isUserVerified: true,
-    } as Protocol.WebAuthn.VirtualAuthenticatorOptions);
-
-    return options;
+    };
   }
 
   /**
@@ -824,8 +824,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
       if (!button) {
         return;
       }
-      button.checked =
-          /** @type {!HTMLElement} */ (authenticator as HTMLElement).dataset.authenticatorId === this.activeAuthId;
+      button.checked = (authenticator as HTMLElement).dataset.authenticatorId === this.activeAuthId;
     });
   }
 

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

@@ -33,6 +33,7 @@ interface ButtonState {
   size?: Size;
   disabled: boolean;
   active: boolean;
+  spinner?: boolean;
   type: ButtonType;
   value?: string;
 }
@@ -43,6 +44,7 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: boolean,
   type?: ButtonType,
   value?: string,
 }|{
@@ -51,6 +53,7 @@ export type ButtonData = {
   size?: Size,
   disabled?: boolean,
   active?: boolean,
+  spinner?: boolean,
   type?: ButtonType,
   value?: string,
 };
@@ -74,6 +77,7 @@ export class Button extends HTMLElement {
     size: Size.MEDIUM,
     disabled: false,
     active: false,
+    spinner: false,
     type: 'button',
   };
   #isEmpty = true;
@@ -94,6 +98,7 @@ export class Button extends HTMLElement {
     this.#props.iconUrl = data.iconUrl;
     this.#props.size = data.size || Size.MEDIUM;
     this.#props.active = Boolean(data.active);
+    this.#props.spinner = Boolean(data.spinner);
     this.#props.type = data.type || 'button';
     this.setDisabledProperty(data.disabled || false);
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
@@ -129,6 +134,11 @@ export class Button extends HTMLElement {
     ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
+  set spinner(spinner: boolean) {
+    this.#props.spinner = spinner;
+    ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
   private setDisabledProperty(disabled: boolean): void {
     this.#props.disabled = disabled;
     this.toggleAttribute('disabled', disabled);
@@ -189,6 +199,12 @@ export class Button extends HTMLElement {
       small: Boolean(this.#props.size === Size.SMALL),
       active: this.#props.active,
     };
+    const spinnerClasses = {
+      primary: this.#props.variant === Variant.PRIMARY,
+      secondary: this.#props.variant === Variant.SECONDARY,
+      disabled: Boolean(this.#props.disabled),
+      'spinner-component': true,
+    };
     // clang-format off
     LitHtml.render(
       LitHtml.html`
@@ -200,6 +216,7 @@ export class Button extends HTMLElement {
             } as IconButton.Icon.IconData}
           >
           </${IconButton.Icon.Icon.litTagName}>` : ''}
+          ${this.#props.spinner ? LitHtml.html`<span class=${LitHtml.Directives.classMap(spinnerClasses)}></span>` : ''}
           <slot @slotchange=${this.onSlotChange}></slot>
         </button>
       `, this.#shadow, {host: this});

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

@@ -201,3 +201,34 @@ button.primary:disabled devtools-icon {
 button.secondary:disabled devtools-icon {
   --icon-color: var(--color-text-disabled);
 }
+
+.spinner-component.secondary {
+  border: 2px solid var(--color-primary);
+  border-right-color: transparent;
+}
+
+.spinner-component.disabled {
+  border: 2px solid var(--color-text-disabled);
+  border-right-color: transparent;
+}
+
+.spinner-component {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  border: 2px solid var(--color-background);
+  animation: spinner-animation 1s linear infinite;
+  border-right-color: transparent;
+  margin-right: 6px;
+}
+
+@keyframes spinner-animation {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -832,6 +832,15 @@ export class DataGrid extends HTMLElement {
     }
     this.scrollToBottomIfRequired();
     this.engageResizeObserver();
+    if (this.#hasRenderedAtLeastOnce) {
+      // We may have had a cell's width change on a re-render, or it may have
+      // been hidden entirely, so we need to ensure that the resize handlers are
+      // re-positioned correctly if so.
+
+      // We don't have to do this on first render as it will fire when the resize observer is engaged.
+      this.alignScrollHandlers();
+    }
+
     this.#isRendering = false;
     this.#hasRenderedAtLeastOnce = true;
 

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

@@ -42,6 +42,16 @@ forcedActive.innerText = 'Forced active';
 forcedActive.onclick = () => alert('clicked');
 appendButton(forcedActive);
 
+// Primary (forced spinner)
+const forcedSpinner = new Buttons.Button.Button();
+forcedSpinner.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  spinner: true,
+};
+forcedSpinner.innerText = 'Forced spinner';
+forcedSpinner.onclick = () => alert('clicked');
+appendButton(forcedSpinner);
+
 // Secondary
 const secondaryButton = new Buttons.Button.Button();
 secondaryButton.innerText = 'Click me';
@@ -51,6 +61,16 @@ secondaryButton.data = {
 };
 appendButton(secondaryButton);
 
+// Secondary spinner
+const secondarySpinnerButton = new Buttons.Button.Button();
+secondarySpinnerButton.innerText = 'Click me';
+secondarySpinnerButton.onclick = () => alert('clicked');
+secondarySpinnerButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  spinner: true,
+};
+appendButton(secondarySpinnerButton);
+
 // Primary
 const disabledPrimaryButtons = new Buttons.Button.Button();
 disabledPrimaryButtons.data = {
@@ -61,6 +81,17 @@ disabledPrimaryButtons.innerText = 'Cannot click me';
 disabledPrimaryButtons.onclick = () => alert('clicked');
 appendButton(disabledPrimaryButtons);
 
+// Primary spinner
+const disabledSpinnerPrimaryButtons = new Buttons.Button.Button();
+disabledSpinnerPrimaryButtons.data = {
+  variant: Buttons.Button.Variant.PRIMARY,
+  disabled: true,
+  spinner: true,
+};
+disabledSpinnerPrimaryButtons.innerText = 'Cannot click me';
+disabledSpinnerPrimaryButtons.onclick = () => alert('clicked');
+appendButton(disabledSpinnerPrimaryButtons);
+
 // Secondary
 const disabledSecondaryButton = new Buttons.Button.Button();
 disabledSecondaryButton.innerText = 'Cannot click me';
@@ -71,6 +102,17 @@ disabledSecondaryButton.data = {
 };
 appendButton(disabledSecondaryButton);
 
+// Secondary spinner
+const disabledSpinnerSecondaryButton = new Buttons.Button.Button();
+disabledSpinnerSecondaryButton.innerText = 'Cannot click me';
+disabledSpinnerSecondaryButton.onclick = () => alert('clicked');
+disabledSpinnerSecondaryButton.data = {
+  variant: Buttons.Button.Variant.SECONDARY,
+  disabled: true,
+  spinner: true,
+};
+appendButton(disabledSpinnerSecondaryButton);
+
 // Primary Icon
 const primaryIconButton = new Buttons.Button.Button();
 primaryIconButton.innerText = 'Click me';

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -28,7 +28,7 @@ export class TextEditor extends HTMLElement {
   #pendingState: CodeMirror.EditorState|undefined;
   #lastScrollPos = {left: 0, top: 0};
   #resizeTimeout = -1;
-  #devtoolsResizeObserver = new ResizeObserver(() => {
+  #resizeListener = (): void => {
     if (this.#resizeTimeout < 0) {
       this.#resizeTimeout = window.setTimeout(() => {
         this.#resizeTimeout = -1;
@@ -37,7 +37,8 @@ export class TextEditor extends HTMLElement {
         }
       }, 50);
     }
-  });
+  };
+  #devtoolsResizeObserver = new ResizeObserver(this.#resizeListener);
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
@@ -104,6 +105,7 @@ export class TextEditor extends HTMLElement {
     if (this.#activeEditor) {
       this.#pendingState = this.#activeEditor.state;
       this.#devtoolsResizeObserver.disconnect();
+      window.removeEventListener('resize', this.#resizeListener);
       this.#activeEditor.destroy();
       this.#activeEditor = undefined;
       this.ensureSettingListeners();
@@ -148,6 +150,7 @@ export class TextEditor extends HTMLElement {
     if (devtoolsElement) {
       this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
+    window.addEventListener('resize', this.#resizeListener);
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {

package/front_end/ui/legacy/ListWidget.ts

@@ -276,10 +276,10 @@ export class Editor<T> {
     this.element = document.createElement('div');
     this.element.classList.add('editor-container');
     this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this.cancelClicked.bind(this)), false);
-    this.element.addEventListener(
-        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     this.contentElementInternal = this.element.createChild('div', 'editor-content');
+    this.contentElementInternal.addEventListener(
+        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     const buttonsRow = this.element.createChild('div', 'editor-buttons');
     this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);

package/package.json

@@ -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.945579"
+  "version": "1.0.945677"
 }

package/scripts/eslint_rules/lib/l10n_filename_matches.js

@@ -5,8 +5,9 @@
 'use strict';
 
 const path = require('path');
+const {devtoolsRootPath} = require('../../devtools_paths.js');
 
-const FRONT_END_DIRECTORY = path.join(__dirname, '..', '..', '..', 'front_end');
+const DEFAULT_FRONT_END_DIRECTORY = path.join(devtoolsRootPath(), 'front_end');
 
 function isModuleScope(context) {
   return context.getScope().type === 'module';
@@ -36,7 +37,15 @@ module.exports = {
       category: 'Possible Errors',
     },
     fixable: 'code',
-    schema: []  // no options
+    schema: [{
+      'type': 'object',
+      'properties': {
+        'rootFrontendDirectory': {
+          'type': 'string',
+        },
+      },
+      additionalProperties: false,
+    }]
   },
   create: function(context) {
     return {
@@ -51,8 +60,12 @@ module.exports = {
           return;
         }
 
+        let frontEndDirectory = DEFAULT_FRONT_END_DIRECTORY;
+        if (context.options && context.options[0]?.rootFrontendDirectory) {
+          frontEndDirectory = context.options[0].rootFrontendDirectory;
+        }
         const currentSourceFile = path.resolve(context.getFilename());
-        const currentFileRelativeToFrontEnd = path.relative(FRONT_END_DIRECTORY, currentSourceFile);
+        const currentFileRelativeToFrontEnd = path.relative(frontEndDirectory, currentSourceFile);
 
         const currentModuleDirectory = path.dirname(currentSourceFile);
         const allowedPathArguments = [
@@ -62,7 +75,7 @@ module.exports = {
         ];
 
         const previousFileLocationArgument = callExpression.arguments[0];
-        const actualPath = path.join(FRONT_END_DIRECTORY, previousFileLocationArgument.value);
+        const actualPath = path.join(frontEndDirectory, previousFileLocationArgument.value);
         if (!allowedPathArguments.includes(actualPath)) {
           const newFileName = currentFileRelativeToFrontEnd.replace(/\\/g, '/');
           context.report({

package/scripts/eslint_rules/tests/l10n_filename_matches_test.js

@@ -4,6 +4,8 @@
 
 'use strict';
 
+const path = require('path');
+
 const rule = require('../lib/l10n_filename_matches.js');
 const ruleTester = new (require('eslint').RuleTester)({
   parserOptions: {ecmaVersion: 9, sourceType: 'module'},
@@ -24,6 +26,16 @@ ruleTester.run('l10n_filename_matches', rule, {
       code: 'const str_ = i18n.i18n.registerUIStrings(\'components/ModuleUIStrings.ts\', UIStrings);',
       filename: 'front_end/components/test.ts',
     },
+    {
+      code: 'const str_ = i18n.i18n.registerUIStrings(\'ModuleUIStrings.ts\', UIStrings);',
+      filename: 'front_end/components/test.ts',
+      options: [{rootFrontendDirectory: path.join(__dirname, '..', '..', '..', 'front_end', 'components')}]
+    },
+    {
+      code: 'const str_ = i18n.i18n.registerUIStrings(\'test.ts\', UIStrings);',
+      filename: 'front_end/components/test.ts',
+      options: [{rootFrontendDirectory: path.join(__dirname, '..', '..', '..', 'front_end', 'components')}]
+    },
   ],
   invalid: [
     {
@@ -35,5 +47,14 @@ ruleTester.run('l10n_filename_matches', rule, {
       }],
       output: 'const str_ = i18n.i18n.registerUIStrings(\'components/test.ts\', UIStrings);',
     },
+    {
+      code: 'const str_ = i18n.i18n.registerUIStrings(\'components/test.ts\', UIStrings);',
+      filename: 'front_end/components/test.ts',
+      errors: [
+        {message: 'First argument to \'registerUIStrings\' call must be \'test.ts\' or the ModuleUIStrings.(js|ts)'}
+      ],
+      output: 'const str_ = i18n.i18n.registerUIStrings(\'test.ts\', UIStrings);',
+      options: [{rootFrontendDirectory: path.join(__dirname, '..', '..', '..', 'front_end', 'components')}]
+    },
   ]
 });