chrome-devtools-frontend 1.0.1581708 → 1.0.1583146

package/front_end/panels/elements/EventListenersWidget.ts

@@ -105,8 +105,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       <devtools-toolbar class="event-listener-toolbar" role="presentation">
         <devtools-button ${bindToAction(input.refreshEventListenersActionName)}></devtools-button>
         <devtools-checkbox title=${i18nString(UIStrings.showListenersOnTheAncestors)}
-          ${bindToSetting(input.showForAncestorsSetting)}
-          jslog=${VisualLogging.toggle('show-event-listeners-for-ancestors').track({ change: true })}>
+          ${bindToSetting(input.showForAncestorsSetting)}>
           ${i18nString(UIStrings.ancestors)}
         </devtools-checkbox>
         <select class="dispatch-filter"
@@ -120,8 +119,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </option>`)}
         </select>
         <devtools-checkbox title=${i18nString(UIStrings.resolveEventListenersBoundWith)}
-          ${bindToSetting(input.showFrameworkListenersSetting)}
-          jslog=${VisualLogging.toggle('show-frameowkr-listeners').track({ change: true })}>
+          ${bindToSetting(input.showFrameworkListenersSetting)}>
           ${i18nString(UIStrings.frameworkListeners)}
         </devtools-checkbox>
       </devtools-toolbar>

package/front_end/panels/elements/PropertiesWidget.ts

@@ -86,8 +86,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       <div class="hbox properties-widget-toolbar">
         <devtools-toolbar class="styles-pane-toolbar" role="presentation">
           <devtools-toolbar-input type="filter" @change=${input.onFilterChanged} style="flex-grow:1; flex-shrink:1"></devtools-toolbar-input>
-          <devtools-checkbox title=${i18nString(UIStrings.showAllTooltip)} ${bindToSetting(getShowAllPropertiesSetting())}
-              jslog=${VisualLogging.toggle('show-all-properties').track({change: true})}>
+          <devtools-checkbox title=${i18nString(UIStrings.showAllTooltip)} ${bindToSetting(getShowAllPropertiesSetting())}>
             ${i18nString(UIStrings.showAll)}
           </devtools-checkbox>
         </devtools-toolbar>

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2155,6 +2155,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   renderedPropertyText(): string {
+    if (!this.#isConnected()) {
+      return '';
+    }
     if (!this.nameElement || !this.valueElement) {
       return '';
     }
@@ -2895,8 +2898,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const regex = new RegExp(propertyNamePattern, 'i');
     await computedStyleWidget.filterComputedStyles(regex);
 
-    computedStyleWidget.input.setValue(this.property.name);
-    computedStyleWidget.input.element.focus();
+    computedStyleWidget.setFilterInput(this.property.name);
   }
 
   private copyCssDeclarationAsJs(): void {
@@ -3434,7 +3436,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   styleTextAppliedForTest(): void {
   }
 
+  // If the item isn't connected to the DOM, then reading its innerText will
+  // also include any invisible text (e.g. sources, styles), so we don't want
+  // to do that.
+  #isConnected(): boolean {
+    return this.listItemElement.isConnected;
+  }
+
   applyStyleText(styleText: string, majorChange: boolean, property?: SDK.CSSProperty.CSSProperty|null): Promise<void> {
+    if (!this.#isConnected()) {
+      return Promise.resolve();
+    }
     return this.applyStyleThrottler.schedule(this.innerApplyStyleText.bind(this, styleText, majorChange, property));
   }
 
@@ -3445,6 +3457,10 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    if (!this.#isConnected()) {
+      return;
+    }
+
     const oldStyleRange = this.style.range;
     if (!oldStyleRange) {
       return;

package/front_end/panels/elements/computedStyleWidget.css

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2015 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .styles-sidebar-pane-toolbar {
+    border-bottom: 1px solid var(--sys-color-divider);
+    flex-shrink: 0;
+  }
+
+  .styles-pane-toolbar {
+    width: 100%;
+  }
+
+  .styles-sidebar-computed-style-widget {
+    min-height: auto;
+  }
+
+  .computed-style-tree-outline-container {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
+  devtools-toolbar-input[type="filter"] {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -166,8 +166,6 @@ export class StartView extends UI.Widget.Widget {
         checkbox.setIndeterminate(true);
       }
     }
-    UI.ARIAUtils.markAsGroup(categoryFormElements);
-    UI.ARIAUtils.setLabel(categoryFormElements, i18nString(UIStrings.categories));
   }
 
   private render(): void {
@@ -194,10 +192,10 @@ export class StartView extends UI.Widget.Widget {
       <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
     </div>
     <div class="lighthouse-form-categories">
-      <div class="lighthouse-form-section">
-        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+      <fieldset class="lighthouse-form-section lighthouse-form-categories-fieldset">
+        <legend class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</legend>
         <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-      </div>
+      </fieldset>
     </div>
   </div>
   <div $="warning-text" class="lighthouse-warning-text hidden"></div>

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -52,6 +52,12 @@
   flex: 1 1;
 }
 
+.lighthouse-form-categories-fieldset {
+  border: none;
+  margin: 0;
+  padding: 8px;
+}
+
 .lighthouse-form-section-label {
   margin: 7px 0;
   font-weight: 500;

package/front_end/panels/network/NetworkLogView.ts

@@ -39,7 +39,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Annotations from '../../models/annotations/annotations.js';
@@ -1722,21 +1721,21 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
 
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
-          const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-          const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
-          submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.explainPurpose), 'What is the purpose of this request?',
-              openAiAssistanceId + '.purpose');
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.explainSlowness), 'Why is this request taking so long?',
-              openAiAssistanceId + '.slowness');
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.explainFailures), 'Why is the request failing?',
-              openAiAssistanceId + '.failures');
-          appendSubmenuPromptAction(
-              submenu, action, i18nString(UIStrings.assessSecurityHeaders), 'Are there any security headers present?',
-              openAiAssistanceId + '.security');
+        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+        const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.explainPurpose), 'What is the purpose of this request?',
+            openAiAssistanceId + '.purpose');
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.explainSlowness), 'Why is this request taking so long?',
+            openAiAssistanceId + '.slowness');
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.explainFailures), 'Why is the request failing?',
+            openAiAssistanceId + '.failures');
+        appendSubmenuPromptAction(
+            submenu, action, i18nString(UIStrings.assessSecurityHeaders), 'Are there any security headers present?',
+            openAiAssistanceId + '.security');
       }
       copyMenu.defaultSection().appendItem(
           i18nString(UIStrings.copyURL),
@@ -1854,98 +1853,58 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       const maxBlockedURLLength = 20;
       const manager = SDK.NetworkManager.MultitargetNetworkManager.instance();
 
-      if (!Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-        function addBlockedURL(url: string): void {
-          manager.requestConditions.add(SDK.NetworkManager.RequestCondition.createFromSetting(
-              {enabled: true, url: url as Platform.DevToolsPath.UrlString}));
-          manager.requestConditions.conditionsEnabled = true;
+      function removeRequestCondition(pattern: SDK.NetworkManager.RequestURLPattern): void {
+        const entry = manager.requestConditions.findCondition(pattern.constructorString);
+        if (entry) {
+          manager.requestConditions.delete(entry);
           void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
         }
+      }
 
-        function removeBlockedURL(url: string): void {
-          const entry = manager.requestConditions.findCondition(url);
-          if (entry) {
-            manager.requestConditions.delete(entry);
-          }
-          void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
-        }
-
-        const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-        if (urlWithoutScheme && !manager.requestConditions.has(urlWithoutScheme)) {
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.blockRequestUrl), addBlockedURL.bind(null, urlWithoutScheme),
-              {jslogContext: 'block-request-url'});
-        } else if (urlWithoutScheme) {
-          const croppedURL = Platform.StringUtilities.trimMiddle(urlWithoutScheme, maxBlockedURLLength);
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.unblockS, {PH1: croppedURL}), removeBlockedURL.bind(null, urlWithoutScheme),
-              {jslogContext: 'unblock'});
-        }
-
-        const domain = request.parsedURL.domain();
-        if (domain && !manager.requestConditions.has(domain)) {
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.blockRequestDomain), addBlockedURL.bind(null, domain),
-              {jslogContext: 'block-request-domain'});
-        } else if (domain) {
-          const croppedDomain = Platform.StringUtilities.trimMiddle(domain, maxBlockedURLLength);
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.unblockS, {PH1: croppedDomain}), removeBlockedURL.bind(null, domain),
-              {jslogContext: 'unblock'});
-        }
-      } else {
-        function removeRequestCondition(pattern: SDK.NetworkManager.RequestURLPattern): void {
-          const entry = manager.requestConditions.findCondition(pattern.constructorString);
-          if (entry) {
-            manager.requestConditions.delete(entry);
-            void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
-          }
-        }
-
-        function addRequestCondition(
-            pattern: SDK.NetworkManager.RequestURLPattern,
-            conditions: SDK.NetworkManager.ThrottlingConditions,
-            ): void {
-          const entry = manager.requestConditions.findCondition(pattern.constructorString);
-          if (entry) {
-            entry.conditions = conditions;
-          } else {
-            manager.requestConditions.add(SDK.NetworkManager.RequestCondition.create(pattern, conditions));
-          }
-          manager.requestConditions.conditionsEnabled = true;
-          void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+      function addRequestCondition(
+          pattern: SDK.NetworkManager.RequestURLPattern,
+          conditions: SDK.NetworkManager.ThrottlingConditions,
+          ): void {
+        const entry = manager.requestConditions.findCondition(pattern.constructorString);
+        if (entry) {
+          entry.conditions = conditions;
+        } else {
+          manager.requestConditions.add(SDK.NetworkManager.RequestCondition.create(pattern, conditions));
         }
+        manager.requestConditions.conditionsEnabled = true;
+        void UI.ViewManager.ViewManager.instance().showView('network.blocked-urls');
+      }
 
-        const blockingMenu =
-            contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.blockRequests), /* disabled=*/ true);
-        const throttlingMenu =
-            contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.throttleRequests), /* disabled=*/ true);
-
-        const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
-        const urlPattern = urlWithoutScheme &&
-            SDK.NetworkManager.RequestURLPattern.create(
-                `*://${urlWithoutScheme}` as SDK.NetworkManager.URLPatternConstructorString);
-        if (urlPattern) {
-          throttlingMenu.setEnabled(true);
-          blockingMenu.setEnabled(true);
-          const existingConditions = manager.requestConditions.findCondition(urlPattern.constructorString);
-          const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
-          const isThrottling = existingConditions &&
-              existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
-              existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
-          blockingMenu.debugSection().appendItem(
-              isBlocking ? i18nString(UIStrings.unblockS, {PH1: urlPattern.constructorString}) :
-                           i18nString(UIStrings.blockRequestUrl),
-              () => isBlocking ? removeRequestCondition(urlPattern) :
-                                 addRequestCondition(urlPattern, SDK.NetworkManager.BlockingConditions),
-              {jslogContext: 'block-request-url'});
-          throttlingMenu.debugSection().appendItem(
-              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: urlPattern.constructorString}) :
-                             i18nString(UIStrings.throttleRequestUrl),
-              () => isThrottling ? removeRequestCondition(urlPattern) :
-                                   addRequestCondition(urlPattern, SDK.NetworkManager.Slow3GConditions),
-              {jslogContext: 'throttle-request-url'});
-        }
+      const blockingMenu =
+          contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.blockRequests), /* disabled=*/ true);
+      const throttlingMenu =
+          contextMenu.debugSection().appendSubMenuItem(i18nString(UIStrings.throttleRequests), /* disabled=*/ true);
+
+      const urlWithoutScheme = request.parsedURL.urlWithoutScheme();
+      const urlPattern = urlWithoutScheme &&
+          SDK.NetworkManager.RequestURLPattern.create(
+              `*://${urlWithoutScheme}` as SDK.NetworkManager.URLPatternConstructorString);
+      if (urlPattern) {
+        throttlingMenu.setEnabled(true);
+        blockingMenu.setEnabled(true);
+        const existingConditions = manager.requestConditions.findCondition(urlPattern.constructorString);
+        const isBlocking = existingConditions?.conditions === SDK.NetworkManager.BlockingConditions;
+        const isThrottling = existingConditions &&
+            existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
+            existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+        const croppedURL = Platform.StringUtilities.trimMiddle(urlPattern.constructorString, maxBlockedURLLength);
+        blockingMenu.debugSection().appendItem(
+            isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestUrl),
+            () => isBlocking ? removeRequestCondition(urlPattern) :
+                               addRequestCondition(urlPattern, SDK.NetworkManager.BlockingConditions),
+            {jslogContext: 'block-request-url'});
+        throttlingMenu.debugSection().appendItem(
+            isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
+                           i18nString(UIStrings.throttleRequestUrl),
+            () => isThrottling ? removeRequestCondition(urlPattern) :
+                                 addRequestCondition(urlPattern, SDK.NetworkManager.Slow3GConditions),
+            {jslogContext: 'throttle-request-url'});
+      }
 
         const domain = request.parsedURL.domain();
         const domainPattern = domain &&
@@ -1959,19 +1918,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           const isThrottling = existingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.BlockingConditions &&
               existingConditions.conditions !== SDK.NetworkManager.NoThrottlingConditions;
+          const croppedURL = Platform.StringUtilities.trimMiddle(domainPattern.constructorString, maxBlockedURLLength);
           blockingMenu.debugSection().appendItem(
-              isBlocking ? i18nString(UIStrings.unblockS, {PH1: domainPattern.constructorString}) :
-                           i18nString(UIStrings.blockRequestDomain),
+              isBlocking ? i18nString(UIStrings.unblockS, {PH1: croppedURL}) : i18nString(UIStrings.blockRequestDomain),
               () => isBlocking ? removeRequestCondition(domainPattern) :
                                  addRequestCondition(domainPattern, SDK.NetworkManager.BlockingConditions),
               {jslogContext: 'block-request-domain'});
           throttlingMenu.debugSection().appendItem(
-              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: domainPattern.constructorString}) :
+              isThrottling ? i18nString(UIStrings.unthrottleS, {PH1: croppedURL}) :
                              i18nString(UIStrings.throttleRequestDomain),
               () => isThrottling ? removeRequestCondition(domainPattern) :
                                    addRequestCondition(domainPattern, SDK.NetworkManager.Slow3GConditions),
               {jslogContext: 'throttle-request-domain'});
-        }
       }
 
       if (SDK.NetworkManager.NetworkManager.canReplayRequest(request)) {
@@ -2758,7 +2716,8 @@ export class MoreFiltersDropDownUI extends Common.ObjectWrapper.ObjectWrapper<UI
     this.updateActiveFiltersCount();
 
     this.dropDownButton = new UI.Toolbar.ToolbarMenuButton(
-        this.showMoreFiltersContextMenu.bind(this), /* isIconDropdown=*/ false, /* useSoftMenu=*/ true,
+        this.showMoreFiltersContextMenu.bind(this),
+        /* isIconDropdown=*/ false, /* useSoftMenu=*/ true,
         /* jslogContext=*/ undefined, /* iconName=*/ undefined,
         /* keepOpen=*/ true);
     this.dropDownButton.setTitle(i18nString(UIStrings.showOnlyHideRequests));