chrome-devtools-frontend 1.0.945329 → 1.0.946351

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/profiler/profilesPanel.css

@@ -55,7 +55,7 @@
 
 .profile-view .data-grid span.percent-column {
   color: var(--color-text-secondary);
-  width: 55px;
+  width: 9ex;
   display: inline-block;
 }
 

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -3,8 +3,10 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -532,12 +534,12 @@ export class UserAgentClientHintsForm extends HTMLElement {
         'architecture');
     const deviceModelSection = this.renderDeviceModelSection();
     const submitButton = this.showSubmitButton ? LitHtml.html`
-      <button
-        type="submit"
-        class="submit-button full-row"
+      <${Buttons.Button.Button.litTagName}
+        .variant=${Buttons.Button.Variant.SECONDARY}
+        .type=${'submit'}
       >
         ${i18nString(UIStrings.update)}
-      </button>
+      </${Buttons.Button.Button.litTagName}>
     ` :
                                                  LitHtml.html``;
     const output = LitHtml.html`

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -96,18 +96,6 @@
   margin-left: 5px;
 }
 
-.submit-button {
-  border: none;
-  border-radius: 2px;
-  font-weight: normal;
-  height: 24px;
-  font-size: 12px;
-  padding: 0 12px;
-  cursor: pointer;
-  background-color: var(--color-primary-variant);
-  color: var(--color-text-primary);
-}
-
 .hide-container {
   display: none;
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -589,8 +589,12 @@ export class DebuggerPlugin extends Plugin {
       if (node.firstChild) {
         return null;
       }
-      while (node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
-             node.name !== 'MemberExpression') {
+      while (
+          node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+          node.name !== 'MemberExpression' &&
+          !(node.name === 'PropertyName' && node.parent?.name === 'PatternProperty' &&
+            node.nextSibling?.name !== ':') &&
+          !(node.name === 'PropertyDefinition' && node.parent?.name === 'Property' && node.nextSibling?.name !== ':')) {
         node = node.parent;
       }
       if (!node) {

package/front_end/panels/sources/sourcesView.css

@@ -58,133 +58,3 @@
 .-theme-with-dark-background .source-frame-debugger-script {
   --override-debugger-background-tint: rgb(61 61 0 / 50%);
 }
-
-@keyframes source-frame-value-update-highlight-animation {
-  from {
-    background-color: inherit;
-    color: inherit;
-  }
-
-  10% {
-    background-color: var(--override-highlight-animation-10pc-background-color);
-    color: var(--override-highlight-animation-10pc-foreground-color);
-  }
-
-  to {
-    background-color: inherit;
-    color: inherit;
-  }
-}
-
-.source-frame-value-update-highlight {
-  animation: source-frame-value-update-highlight-animation 0.8s 1 cubic-bezier(0, 0, 0.2, 1);
-  border-radius: 2px;
-}
-
-.diff-entry-insert {
-  --override-diff-line-number-background-color: hsl(144deg 55% 49% / 20%);
-}
-
-.-theme-with-dark-background .diff-entry-insert,
-:host-context(.-theme-with-dark-background) .diff-entry-insert {
-  --override-diff-line-number-background-color: rgb(61 199 116 / 20%);
-}
-
-.diff-entry-insert .diff-marker {
-  border-left: 4px solid var(--color-accent-green);
-}
-
-.diff-entry-insert .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(186 104 200 / 20%);
-  --override-diff-line-number-border-color: #9c27b0;
-}
-
-.-theme-with-dark-background .diff-entry-modify,
-:host-context(.-theme-with-dark-background) .diff-entry-modify {
-  --override-diff-line-number-background-color: rgb(137 55 151 / 20%);
-  --override-diff-line-number-border-color: rgb(196 79 216);
-}
-
-.diff-entry-modify .diff-marker {
-  border-left: 4px solid var(--override-diff-line-number-border-color);
-}
-
-.diff-entry-modify .CodeMirror-gutter-background {
-  background-color: var(--override-diff-line-number-background-color);
-}
-
-.diff-entry-delete {
-  --override-diff-deletion-color: #d32f2f;
-}
-
-.-theme-with-dark-background .diff-entry-delete,
-:host-context(.-theme-with-dark-background) .diff-entry-delete {
-  --override-diff-deletion-color: rgb(208 44 44);
-}
-
-.diff-entry-delete .diff-marker {
-  width: 0;
-  height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid var(--override-diff-deletion-color);
-  position: relative;
-  top: 6px;
-  cursor: pointer;
-  left: 0;
-}
-
-.diff-entry-delete .CodeMirror-gutter-background {
-  border-bottom: 2px solid var(--override-diff-deletion-color);
-}
-
-.CodeMirror-gutter-diff {
-  width: 4px;
-}
-
-.highlight-line-modification {
-  --override-modification-background-fadeout-from: rgb(158 54 153 / 50%);
-  --override-modification-background-fadeout-90pc: rgb(158 54 153 / 0%);
-  --override-modification-foreground-fadeout-from: #fff;
-
-  animation: source-line-modification-background-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.highlight-line-modification span {
-  animation: source-line-modification-foreground-fadeout 0.4s 0s;
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-@keyframes source-line-modification-background-fadeout {
-  from {
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    background-color: var(--override-modification-background-fadeout-from);
-  }
-
-  90% {
-    background-color: var(--override-modification-background-fadeout-90pc);
-  }
-  to { background-color: transparent; }
-}
-
-@keyframes source-line-modification-foreground-fadeout {
-  from {
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-
-  50% {
-    /* Purposefully uses the `from` color to delay the animation from 0-50% */
-    color: var(--override-modification-foreground-fadeout-from);
-  }
-  90% { color: initial; }
-  to { color: initial; }
-}

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/third_party/codemirror/codemirror-tsconfig.json

@@ -3,33 +3,9 @@
     "composite": true
   },
   "files": [
-    "package/addon/comment/comment.js",
-    "package/addon/edit/closebrackets.js",
-    "package/addon/edit/matchbrackets.js",
-    "package/addon/fold/brace-fold.js",
-    "package/addon/fold/foldcode.js",
-    "package/addon/fold/foldgutter.js",
-    "package/addon/mode/multiplex.js",
-    "package/addon/mode/overlay.js",
-    "package/addon/mode/simple.js",
     "package/addon/runmode/runmode-standalone.js",
-    "package/addon/selection/active-line.js",
-    "package/addon/selection/mark-selection.js",
-    "package/lib/codemirror.js",
-    "package/mode/clike/clike.js",
-    "package/mode/clojure/clojure.js",
-    "package/mode/coffeescript/coffeescript.js",
     "package/mode/css/css.js",
-    "package/mode/htmlembedded/htmlembedded.js",
-    "package/mode/htmlmixed/htmlmixed.js",
     "package/mode/javascript/javascript.js",
-    "package/mode/jsx/jsx.js",
-    "package/mode/livescript/livescript.js",
-    "package/mode/markdown/markdown.js",
-    "package/mode/php/php.js",
-    "package/mode/python/python.js",
-    "package/mode/shell/shell.js",
-    "package/mode/wast/wast.js",
     "package/mode/xml/xml.js"
   ]
-}
+}

package/front_end/ui/components/adorners/Adorner.ts

@@ -19,18 +19,18 @@ export class Adorner extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-adorner`;
   name = '';
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private isToggle = false;
-  private ariaLabelDefault?: string;
-  private ariaLabelActive?: string;
-  private content?: HTMLElement;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #isToggle = false;
+  #ariaLabelDefault?: string;
+  #ariaLabelActive?: string;
+  #content?: HTMLElement;
 
   set data(data: AdornerData) {
     this.name = data.name;
     data.content.slot = 'content';
-    this.content?.remove();
+    this.#content?.remove();
     this.append(data.content);
-    this.content = data.content;
+    this.#content = data.content;
     this.render();
   }
 
@@ -38,7 +38,7 @@ export class Adorner extends HTMLElement {
     if (!this.getAttribute('aria-label')) {
       this.setAttribute('aria-label', this.name);
     }
-    this.shadow.adoptedStyleSheets = [adornerStyles];
+    this.#shadow.adoptedStyleSheets = [adornerStyles];
   }
 
   isActive(): boolean {
@@ -50,12 +50,12 @@ export class Adorner extends HTMLElement {
    * an active state; pass `false` to force-set an inactive state.
    */
   toggle(forceActiveState?: boolean): void {
-    if (!this.isToggle) {
+    if (!this.#isToggle) {
       return;
     }
     const shouldBecomeActive = forceActiveState === undefined ? !this.isActive() : forceActiveState;
     this.setAttribute('aria-pressed', Boolean(shouldBecomeActive).toString());
-    this.setAttribute('aria-label', (shouldBecomeActive ? this.ariaLabelActive : this.ariaLabelDefault) || this.name);
+    this.setAttribute('aria-label', (shouldBecomeActive ? this.#ariaLabelActive : this.#ariaLabelDefault) || this.name);
   }
 
   show(): void {
@@ -78,9 +78,9 @@ export class Adorner extends HTMLElement {
   }): void {
     const {isToggle = false, shouldPropagateOnKeydown = false, ariaLabelDefault, ariaLabelActive} = options;
 
-    this.isToggle = isToggle;
-    this.ariaLabelDefault = ariaLabelDefault;
-    this.ariaLabelActive = ariaLabelActive;
+    this.#isToggle = isToggle;
+    this.#ariaLabelDefault = ariaLabelDefault;
+    this.#ariaLabelActive = ariaLabelActive;
     this.setAttribute('aria-label', ariaLabelDefault);
 
     if (isToggle) {
@@ -111,7 +111,7 @@ export class Adorner extends HTMLElement {
     // clang-format off
     render(html`
       <slot name="content"></slot>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
   }