chrome-devtools-frontend 1.0.1537860 → 1.0.1538523

package/front_end/panels/network/networkTimingTable.css

@@ -78,8 +78,8 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 .network-timing-bar {
   position: absolute;
   min-width: 1px;
-  top: 0;
-  bottom: 0;
+  inset: 0 attr(data-right %) 0 attr(data-left %); /* stylelint-disable-line declaration-property-value-no-unknown */
+  background-color: attr(data-background <color>); /* stylelint-disable-line declaration-property-value-no-unknown */
 }
 
 .network-timing-bar-title {
@@ -145,6 +145,16 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
   left: -12px;
 }
 
+tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
+tr:has([aria-checked="false"].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
+  display: none;
+}
+
+tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,
+tr:has([aria-checked].network-fetch-timing-bar-clickable) ~ .network-fetch-timing-bar-details {
+  display: block;
+}
+
 .network-fetch-timing-bar-clickable:focus-visible {
   background-color: var(--sys-color-state-focus-highlight);
 }
@@ -181,6 +191,16 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
   background-color: var(--network-overview-waiting); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
+.throttled devtools-icon {
+  vertical-align: middle;
+  margin-right: var(--sys-size-3);
+  color: var(--sys-color-yellow);
+}
+
+td.throttled {
+  color: var(--sys-color-yellow);
+}
+
 .network-timing-bar.receiving,
 .network-timing-bar.receiving-push,
 .-theme-preserve {

package/front_end/panels/timeline/components/NetworkRequestTooltip.ts

@@ -7,6 +7,7 @@ import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +16,7 @@ import * as TimelineUtils from '../utils/utils.js';
 import networkRequestTooltipStyles from './networkRequestTooltip.css.js';
 import {colorForNetworkRequest, networkResourceCategory} from './Utils.js';
 
-const {html} = Lit;
+const {html, nothing, Directives: {classMap, ifDefined}} = Lit;
 
 const MAX_URL_LENGTH = 60;
 
@@ -52,6 +53,11 @@ const UIStrings = {
    * @description Text to refer to the list of redirects.
    */
   redirects: 'Redirects',
+  /**
+   * @description Cell title in Network Data Grid Node of the Network panel
+   * @example {Fast 4G} PH1
+   */
+  wasThrottled: 'Request was throttled ({PH1})',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkRequestTooltip.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -106,6 +112,16 @@ export class NetworkRequestTooltip extends HTMLElement {
       backgroundColor: color,
     };
 
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(networkRequest);
+    const wasThrottled = sdkNetworkRequest &&
+        SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
+            sdkNetworkRequest.networkRequest);
+    const throttledTitle = wasThrottled ? i18nString(UIStrings.wasThrottled, {
+      PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
+                                                               wasThrottled.conditions.title()
+    }) :
+                                          undefined;
+
     // The outside spans are transparent with a border on the outside edge.
     // The inside spans are 1px tall rectangles, vertically centered, with background color.
     //                   |
@@ -114,9 +130,20 @@ export class NetworkRequestTooltip extends HTMLElement {
     const leftWhisker = html`<span class="whisker-left"> <span class="horizontal"></span> </span>`;
     const rightWhisker = html`<span class="whisker-right"> <span class="horizontal"></span> </span>`;
 
+    const classes = classMap({
+      ['timings-row timings-row--duration']: true,
+      throttled: Boolean(wasThrottled?.urlPattern),
+    });
     return html`
-      <div class="timings-row timings-row--duration">
-        <span class="indicator"></span>
+      <div
+        class=${classes}
+        title=${ifDefined(throttledTitle)}>
+        ${
+        wasThrottled?.urlPattern ? html`<devtools-icon
+          class=indicator
+          name=watch
+          ></devtools-icon>` :
+                                   html`<span class="indicator"></span>`}
         ${i18nString(UIStrings.duration)}
          <span class="time"> ${i18n.TimeUtilities.formatMicroSecondsTime(networkRequest.dur)} </span>
       </div>
@@ -173,6 +200,11 @@ export class NetworkRequestTooltip extends HTMLElement {
 
     const redirectsHtml = NetworkRequestTooltip.renderRedirects(this.#data.networkRequest);
 
+    const sdkNetworkRequest = SDK.TraceObject.RevealableNetworkRequest.create(this.#data.networkRequest);
+    const wasThrottled = sdkNetworkRequest &&
+        SDK.NetworkManager.MultitargetNetworkManager.instance().appliedRequestConditions(
+            sdkNetworkRequest.networkRequest);
+
     // clang-format off
     const output = html`
       <style>${networkRequestTooltipStyles}</style>
@@ -186,6 +218,13 @@ export class NetworkRequestTooltip extends HTMLElement {
           </span>${networkResourceCategory(this.#data.networkRequest)}
         </div>
         <div class="priority-row">${i18nString(UIStrings.priority)}: ${NetworkRequestTooltip.renderPriorityValue(this.#data.networkRequest)}</div>
+        ${wasThrottled ? html`
+        <div class="throttled-row">
+          ${i18nString(UIStrings.wasThrottled, {
+            PH1: typeof wasThrottled.conditions.title === 'string' ? wasThrottled.conditions.title :
+              wasThrottled.conditions.title()
+          })}
+        </div>` : nothing}
         ${Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(this.#data.networkRequest) ?
           html`<div class="render-blocking"> ${i18nString(UIStrings.renderBlocking)} </div>` :  Lit.nothing
         }

package/front_end/panels/timeline/components/networkRequestTooltip.css

@@ -22,6 +22,11 @@
     margin-left: 15px;
   }
 
+  .throttled-row {
+    margin-left: 15px;
+    color: var(--sys-color-yellow);
+  }
+
   .network-category-chip {
     box-sizing: border-box;
     width: 10px;
@@ -62,6 +67,16 @@
     box-sizing: border-box;
   }
 
+  devtools-icon.indicator {
+    vertical-align: middle;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    color: var(--sys-color-yellow);
+    border: none;
+  }
+
+
   .whisker-left {
     align-self: center;
     display: inline-flex;
@@ -104,6 +119,10 @@
     .time {
       font-weight: var(--ref-typeface-weight-medium);
     }
+
+    &.throttled {
+      color: var(--sys-color-yellow);
+    }
   }
 
   .redirects-row {

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

@@ -50,6 +50,7 @@ export class Adorner extends HTMLElement {
     if (this.#jslogContext && !this.getAttribute('jslog')) {
       this.setAttribute('jslog', `${VisualElements.adorner(this.#jslogContext)}`);
     }
+    this.#render();
   }
 
   isActive(): boolean {

package/front_end/ui/components/icon_button/IconButton.ts

@@ -93,6 +93,7 @@ export class IconButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('icon-button', IconButton);
 
 declare global {

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -176,6 +176,7 @@ export class SettingCheckbox extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('setting-checkbox', SettingCheckbox);
 
 declare global {

package/front_end/ui/legacy/Treeoutline.ts

@@ -1604,6 +1604,18 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
       .toArray();
 }
 
+function getStyleElements(nodes: NodeList|Node[]): HTMLElement[] {
+  return [...nodes].flatMap(node => {
+    if (node instanceof HTMLStyleElement) {
+      return [node];
+    }
+    if (node instanceof HTMLElement) {
+      return [...node.querySelectorAll<HTMLStyleElement>('style')];
+    }
+    return [] as HTMLElement[];
+  });
+}
+
 /**
  * A tree element that can be used as progressive enhancement over a <ul> element. A `template` IDL attribute allows
  * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM, which is recommended.
@@ -1763,6 +1775,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
         parent.treeElement.expand();
       }
     }
+    for (const element of getStyleElements(nodes)) {
+      this.#treeOutline.shadowRoot.appendChild(element.cloneNode(true));
+    }
   }
 
   protected override removeNodes(nodes: NodeList): void {

package/front_end/ui/legacy/UIUtils.ts

@@ -1480,6 +1480,7 @@ export class DevToolsIconLabel extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-icon-label', DevToolsIconLabel);
 
 export class DevToolsSmallBubble extends HTMLElement {
@@ -1498,6 +1499,7 @@ export class DevToolsSmallBubble extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-small-bubble', DevToolsSmallBubble);
 
 export class DevToolsCloseButton extends HTMLElement {
@@ -1536,6 +1538,7 @@ export class DevToolsCloseButton extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('dt-close-button', DevToolsCloseButton);
 
 export function bindInput(

package/front_end/ui/legacy/Widget.ts

@@ -35,7 +35,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {createShadowRootWithCoreStyles} from './UIUtils.js';
+import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
@@ -227,12 +227,14 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   }
 
   override cloneNode(deep: boolean): Node {
-    const clone = super.cloneNode(deep) as WidgetElement<WidgetT>;
+    const clone = cloneCustomElement(this, deep);
     if (!this.#widgetClass) {
       throw new Error('No widgetClass defined');
     }
-    clone.#widgetClass = this.#widgetClass;
-    clone.#widgetParams = this.#widgetParams;
+    clone.widgetConfig = {
+      widgetClass: this.#widgetClass,
+      widgetParams: this.#widgetParams,
+    };
     return clone;
   }
 }

package/front_end/ui/legacy/XLink.ts

@@ -153,4 +153,5 @@ export class ContextMenuProvider implements Provider<Node> {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('x-link', XLink);

package/front_end/ui/legacy/components/inline_editor/Swatches.ts

@@ -38,6 +38,7 @@ export class CSSShadowSwatch extends HTMLElement {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('css-shadow-swatch', CSSShadowSwatch);
 
 declare global {

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -602,4 +602,5 @@ declare global {
   }
 }
 
+// eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('brick-breaker', BrickBreaker);

package/front_end/ui/legacy/popover.css

@@ -3,17 +3,18 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-
-.widget {
-  display: flex;
-  font: var(--sys-typescale-body4-regular);
-  box-shadow: var(--sys-elevation-level2);
-  color: var(--sys-color-on-surface);
-  background-color: var(--sys-color-base-container-elevated);
-  border-radius: var(--sys-shape-corner-small);
-  padding: var(--sys-size-4);
-  user-select: text;
-  overflow: auto;
+@scope to (.widget > *) {
+  .widget {
+    display: flex;
+    font: var(--sys-typescale-body4-regular);
+    box-shadow: var(--sys-elevation-level2);
+    color: var(--sys-color-on-surface);
+    background-color: var(--sys-color-base-container-elevated);
+    border-radius: var(--sys-shape-corner-small);
+    padding: var(--sys-size-4);
+    user-select: text;
+    overflow: auto;
+  }
 }
 
 .squiggles-content {

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1537860"
+  "version": "1.0.1538523"
 }

package/front_end/panels/application/components/badge.css

@@ -1,33 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-:host .badge-error {
-  --override-adorner-text-color: var(--sys-color-error-bright);
-  --override-adorner-border-color: var(--sys-color-error-bright);
-}
-
-:host .badge-success {
-  --override-adorner-text-color: var(--sys-color-tertiary);
-  --override-adorner-border-color: var(--sys-color-tertiary);
-}
-
-:host .badge-secondary {
-  --override-adorner-text-color: var(--sys-color-token-subtle);
-  --override-adorner-border-color: var(--sys-color-token-subtle);
-}
-
-/* Use mono-space source code font to assist reading of adorner content */
-:host devtools-adorner {
-  font-family: var(--source-code-font-family);
-}
-
-.token-status-badge {
-  display: none;
-}
-
-[aria-expanded='false'] .token-status-badge {
-  display: inline-flex;
-}