chrome-devtools-frontend 1.0.945579 → 1.0.946920

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1616,7 +1616,6 @@ export class StylePropertiesSection {
 
   private onFontEditorButtonClicked(): void {
     if (this.fontEditorSectionManager && this.fontEditorButton) {
-      Host.userMetrics.cssEditorOpened('fontEditor');
       this.fontEditorSectionManager.showPopover(this.fontEditorButton.element, this.parentPane);
     }
   }

package/front_end/panels/elements/elementsTreeOutline.css

@@ -186,19 +186,6 @@
   margin-right: 4px;
 }
 
-.CodeMirror {
-  background-color: var(--color-background);
-  height: 300px !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.CodeMirror-lines {
-  padding: 0;
-}
-
-.CodeMirror pre {
-  padding: 0;
-}
-
 button,
 input,
 select {

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -225,10 +225,6 @@ export class DeviceModeToolbar {
       showMediaInspectorSetting: Common.Settings.Setting<boolean>,
       showRulersSetting: Common.Settings.Setting<boolean>) {
     this.model = model;
-    const device = model.device();
-    if (device) {
-      this.recordDeviceChange(device, null);
-    }
     this.showMediaInspectorSetting = showMediaInspectorSetting;
     this.showRulersSetting = showRulersSetting;
 
@@ -302,16 +298,6 @@ export class DeviceModeToolbar {
     }
   }
 
-  private recordDeviceChange(
-      device: EmulationModel.EmulatedDevices.EmulatedDevice,
-      oldDevice: EmulationModel.EmulatedDevices.EmulatedDevice|null): void {
-    if (device !== oldDevice && device && device.isDualScreen) {
-      // When we start emulating a device, whether we start a new emulation session, or switch to
-      // a new device, if the device is dual screen, we count this once.
-      Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.DualScreenDeviceSelected);
-    }
-  }
-
   private createEmptyToolbarElement(): Element {
     const element = document.createElement('div');
     element.classList.add('device-mode-empty-toolbar-element');
@@ -527,7 +513,6 @@ export class DeviceModeToolbar {
 
   private emulateDevice(device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
-    this.recordDeviceChange(device, this.model.device());
     this.model.emulate(
         EmulationModel.DeviceModeModel.Type.Device, device, this.lastMode.get(device) || device.modes[0], scale);
   }
@@ -615,7 +600,6 @@ export class DeviceModeToolbar {
       return;
     }
 
-    Host.userMetrics.dualScreenDeviceEmulated(Host.UserMetrics.DualScreenDeviceEmulated.SpanButtonClicked);
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
     const mode = this.model.mode();
     if (!mode) {

package/front_end/panels/network/NetworkConfigView.ts

@@ -50,6 +50,10 @@ const UIStrings = {
    * a set of checkboxes to override the content encodings supported by the browser.
    */
   acceptedEncoding: 'Accepted `Content-Encoding`s',
+  /**
+  * @description Status text for successful update of client hints.
+  */
+  clientHintsStatusText: 'User agent updated.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkConfigView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -246,10 +250,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
         showMobileCheckbox: true,
         showSubmitButton: true,
       };
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintschange', () => {
       customSelectAndInput.select.value = 'custom';
+      userAgentUpdateButtonStatusText.textContent = '';
     });
 
     clientHints.addEventListener('clienthintssubmit', (event: Event) => {
@@ -257,8 +263,12 @@ export class NetworkConfigView extends UI.Widget.VBox {
       const customUA = customUserAgentSetting.get();
       userAgentMetadataSetting.set(metaData);
       SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, metaData);
+      userAgentUpdateButtonStatusText.textContent = i18nString(UIStrings.clientHintsStatusText);
     });
 
+    const userAgentUpdateButtonStatusText = section.createChild('span', 'status-text');
+    userAgentUpdateButtonStatusText.textContent = '';
+
     userAgentSelectBoxChanged();
 
     function userAgentSelectBoxChanged(): void {

package/front_end/panels/network/NetworkItemView.ts

@@ -250,6 +250,9 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   private async maybeAppendPayloadPanel(): Promise<void> {
+    if (this.hasTab('payload')) {
+      return;
+    }
     if (this.requestInternal.queryParameters || await this.requestInternal.requestFormData()) {
       this.payloadView = new RequestPayloadView(this.requestInternal);
       this.appendTab(
@@ -270,7 +273,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/network/networkConfigView.css

@@ -99,3 +99,8 @@
   margin-top: 14px;
   width: min(100%, 400px);
 }
+
+.status-text {
+  padding: 10px;
+  color: var(--color-accent-green);
+}

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) {
@@ -1298,7 +1302,7 @@ export class DebuggerPlugin extends Plugin {
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidMergeToVM, this.didMergeToVM, this);
       oldScriptFile.removeEventListener(
           Bindings.ResourceScriptMapping.ResourceScriptFile.Events.DidDivergeFromVM, this.didDivergeFromVM, this);
-      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts) {
+      if (this.muted && !this.uiSourceCode.isDirty() && this.consistentScripts()) {
         this.setMuted(false);
       }
     }

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/timeline/TimelineTreeView.ts

@@ -651,6 +651,7 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     }
     const cell = this.createTD(columnId);
     cell.className = 'numeric-column';
+    cell.setAttribute('title', i18nString(UIStrings.fms, {PH1: value.toFixed(4)}));
     const textDiv = cell.createChild('div');
     textDiv.createChild('span').textContent = i18nString(UIStrings.fms, {PH1: value.toFixed(1)});
 

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