chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/components/Utils.test.ts

@@ -2,8 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Protocol from '../../../generated/protocol.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
 
 import * as Utils from './Utils.js';
 
@@ -27,39 +29,84 @@ describeWithEnvironment('Utils', () => {
 
     it('parse', () => {
       // en
-      assert.deepStrictEqual(NumberWithUnit.parse('100[s]()'), {firstPart: '100', unitPart: 's', lastPart: ''});
-      assert.deepStrictEqual(NumberWithUnit.parse('100 [s]()'), {firstPart: '100 ', unitPart: 's', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('100[s]()'), {firstPart: '100', unitPart: 's', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('100 [s]()'), {firstPart: '100 ', unitPart: 's', lastPart: ''});
 
       // Decimal separators
-      assert.deepStrictEqual(
-          NumberWithUnit.parse('100.123[ms]()'), {firstPart: '100.123', unitPart: 'ms', lastPart: ''});
-      assert.deepStrictEqual(NumberWithUnit.parse('100,2[s]()'), {firstPart: '100,2', unitPart: 's', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('100.123[ms]()'), {firstPart: '100.123', unitPart: 'ms', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('100,2[s]()'), {firstPart: '100,2', unitPart: 's', lastPart: ''});
 
       // zh
-      assert.deepStrictEqual(NumberWithUnit.parse('100[毫秒]()'), {firstPart: '100', unitPart: '毫秒', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('100[毫秒]()'), {firstPart: '100', unitPart: '毫秒', lastPart: ''});
       // zh-Hans-CN-u-nu-hanidec
-      assert.deepStrictEqual(
-          NumberWithUnit.parse('一〇〇[毫秒]()'), {firstPart: '一〇〇', unitPart: '毫秒', lastPart: ''});
+      assert.deepEqual(NumberWithUnit.parse('一〇〇[毫秒]()'), {firstPart: '一〇〇', unitPart: '毫秒', lastPart: ''});
 
       // ar-SA (RTL language, but the UIString still places the number first in the string)
-      assert.deepStrictEqual(
+      assert.deepEqual(
           NumberWithUnit.parse('١٠٠[ملي ثانية]()'), {firstPart: '١٠٠', unitPart: 'ملي ثانية', lastPart: ''});
 
       // ar
-      assert.deepStrictEqual(
+      assert.deepEqual(
           NumberWithUnit.parse('100[ملي ثانية]()'), {firstPart: '100', unitPart: 'ملي ثانية', lastPart: ''});
 
       // sw (only one that places unit first)
-      assert.deepStrictEqual(NumberWithUnit.parse('[Sek]()100'), {firstPart: '', unitPart: 'Sek', lastPart: '100'});
-      assert.deepStrictEqual(NumberWithUnit.parse('[Sek]() 100'), {firstPart: '', unitPart: 'Sek', lastPart: ' 100'});
+      assert.deepEqual(NumberWithUnit.parse('[Sek]()100'), {firstPart: '', unitPart: 'Sek', lastPart: '100'});
+      assert.deepEqual(NumberWithUnit.parse('[Sek]() 100'), {firstPart: '', unitPart: 'Sek', lastPart: ' 100'});
 
       // error cases
-      assert.deepStrictEqual(NumberWithUnit.parse(''), null);
-      assert.deepStrictEqual(NumberWithUnit.parse('100s'), null);
-      assert.deepStrictEqual(NumberWithUnit.parse('100[s]('), null);
-      assert.deepStrictEqual(NumberWithUnit.parse('100[s]'), null);
-      assert.deepStrictEqual(NumberWithUnit.parse('100[s'), null);
-      assert.deepStrictEqual(NumberWithUnit.parse('100 s]('), null);
+      assert.isNull(NumberWithUnit.parse(''));
+      assert.isNull(NumberWithUnit.parse('100s'));
+      assert.isNull(NumberWithUnit.parse('100[s]('));
+      assert.isNull(NumberWithUnit.parse('100[s]'));
+      assert.isNull(NumberWithUnit.parse('100[s'));
+      assert.isNull(NumberWithUnit.parse('100 s]('));
+    });
+  });
+
+  describe('networkResourceCategory', function() {
+    const {networkResourceCategory, NetworkCategory} = Utils;
+    const {ResourceType} = Protocol.Network;
+    const getCategory = networkResourceCategory;
+    let req: Trace.Types.Events.SyntheticNetworkRequest|undefined;
+
+    before(async function() {
+      const events = await TraceLoader.fixtureContents(this, 'load-simple.json.gz');
+      const {parsedTrace} = await TraceLoader.executeTraceEngineOnFileContents(events);
+      req = parsedTrace.NetworkRequests.byId.get('2648544.35');
+    });
+
+    function tweakRequest(
+        mimeType: string, resourceType: Protocol.Network.ResourceType = Protocol.Network.ResourceType.Other):
+        Trace.Types.Events.SyntheticNetworkRequest {
+      assert.exists(req);
+      req.args.data.mimeType = mimeType;
+      req.args.data.resourceType = resourceType;
+      return req;
+    }
+
+    it('uses resource type when available', () => {
+      assert.strictEqual(getCategory(tweakRequest('text/html', ResourceType.Document)), NetworkCategory.DOC);
+      assert.strictEqual(getCategory(tweakRequest('text/css', ResourceType.Stylesheet)), NetworkCategory.CSS);
+      assert.strictEqual(getCategory(tweakRequest('image/png', ResourceType.Image)), NetworkCategory.IMG);
+      assert.strictEqual(getCategory(tweakRequest('video/webm', ResourceType.Media)), NetworkCategory.MEDIA);
+      assert.strictEqual(getCategory(tweakRequest('font/woff2', ResourceType.Font)), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('text/javascript', ResourceType.Script)), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown', ResourceType.WebSocket)), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown', ResourceType.Other)), NetworkCategory.OTHER);
+    });
+
+    it('falls back to mime type for older traces', () => {
+      assert.strictEqual(getCategory(tweakRequest('text/html')), NetworkCategory.DOC);
+      assert.strictEqual(getCategory(tweakRequest('text/css')), NetworkCategory.CSS);
+      assert.strictEqual(getCategory(tweakRequest('image/png')), NetworkCategory.IMG);
+      assert.strictEqual(getCategory(tweakRequest('video/webm')), NetworkCategory.MEDIA);
+      assert.strictEqual(getCategory(tweakRequest('font/woff2')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('text/javascript')), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('application/javascript')), NetworkCategory.JS);
+      assert.strictEqual(getCategory(tweakRequest('application/wasm')), NetworkCategory.WASM);
+      assert.strictEqual(getCategory(tweakRequest('application/x-font-woff')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('application/font-woff2')), NetworkCategory.FONT);
+      assert.strictEqual(getCategory(tweakRequest('something/unknown')), NetworkCategory.OTHER);
     });
   });
 });

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

@@ -62,13 +62,13 @@ export function networkResourceCategory(request: Trace.Types.Events.SyntheticNet
 
       // Traces before Feb 2024 don't have `resourceType`.
       // We'll keep mimeType logic for a couple years to avoid grey network requests for last year's traces.
-      return mimeType.startsWith('text/')                                ? NetworkCategory.DOC :
-          mimeType.endsWith('/css')                                      ? NetworkCategory.CSS :
+      return mimeType.endsWith('/css')                                   ? NetworkCategory.CSS :
           mimeType.endsWith('javascript')                                ? NetworkCategory.JS :
           mimeType.startsWith('image/')                                  ? NetworkCategory.IMG :
           mimeType.startsWith('audio/') || mimeType.startsWith('video/') ? NetworkCategory.MEDIA :
           mimeType.startsWith('font/') || mimeType.includes('font-')     ? NetworkCategory.FONT :
           mimeType === 'application/wasm'                                ? NetworkCategory.WASM :
+          mimeType.startsWith('text/')                                   ? NetworkCategory.DOC :
                                                                            // Ultimate fallback:
                                                                            NetworkCategory.OTHER;
   }

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

@@ -9,8 +9,7 @@
   align-items: center;
   height: 29px;
   padding: 3px;
-  overflow-y: hidden;
-  overflow-x: scroll;
+  overflow: scroll hidden;
 }
 
 .breadcrumbs::-webkit-scrollbar {

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

@@ -7,6 +7,7 @@ import * as BreadcrumbsUI from './BreadcrumbsUI.js';
 import * as CPUThrottlingSelector from './CPUThrottlingSelector.js';
 import * as DetailsView from './DetailsView.js';
 import * as FieldSettingsDialog from './FieldSettingsDialog.js';
+import * as IgnoreListSetting from './IgnoreListSetting.js';
 import * as InteractionBreakdown from './InteractionBreakdown.js';
 import * as LayoutShiftDetails from './LayoutShiftDetails.js';
 import * as LiveMetricsView from './LiveMetricsView.js';
@@ -14,11 +15,13 @@ import * as MetricCard from './MetricCard.js';
 import * as NetworkRequestDetails from './NetworkRequestDetails.js';
 import * as NetworkRequestTooltip from './NetworkRequestTooltip.js';
 import * as NetworkThrottlingSelector from './NetworkThrottlingSelector.js';
+import * as OriginMap from './OriginMap.js';
 import * as RelatedInsightChips from './RelatedInsightChips.js';
 import * as Sidebar from './Sidebar.js';
 import * as SidebarAnnotationsTab from './SidebarAnnotationsTab.js';
 import * as SidebarInsightsTab from './SidebarInsightsTab.js';
 import * as SidebarSingleInsightSet from './SidebarSingleInsightSet.js';
+import * as TimelineSummary from './TimelineSummary.js';
 import * as Utils from './Utils.js';
 
 export {
@@ -27,6 +30,7 @@ export {
   CPUThrottlingSelector,
   DetailsView,
   FieldSettingsDialog,
+  IgnoreListSetting,
   InteractionBreakdown,
   LayoutShiftDetails,
   LiveMetricsView,
@@ -34,10 +38,12 @@ export {
   NetworkRequestDetails,
   NetworkRequestTooltip,
   NetworkThrottlingSelector,
+  OriginMap,
   RelatedInsightChips,
   Sidebar,
   SidebarAnnotationsTab,
   SidebarInsightsTab,
   SidebarSingleInsightSet,
+  TimelineSummary,
   Utils,
 };

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

@@ -5,11 +5,14 @@
  */
 
 :host {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   max-width: 100%;
-  min-width: 50px;
+  height: 20px;
 }
 
 devtools-select-menu {
+  min-width: 160px;
   max-width: 100%;
+  height: 20px;
 }

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

@@ -13,14 +13,7 @@
 }
 
 devtools-dialog {
-  --override-transparent: color-mix(in sRGB, var(--color-background) 80%, transparent);
-}
-
-.title {
-  font-size: var(--sys-typescale-headline4-size);
-  line-height: var(--sys-typescale-headline4-line-height);
-  font-weight: var(--ref-typeface-weight-medium);
-  margin: 0;
+  --override-transparent: color-mix(in srgb, var(--color-background) 80%, transparent);
 }
 
 .section-title {
@@ -51,7 +44,7 @@ details > summary {
 
 .content {
   max-width: 360px;
-  padding: 16px 20px 18px;
+  padding: 0 var(--sys-size-8) var(--sys-size-2);
   box-sizing: border-box;
 }
 
@@ -65,11 +58,15 @@ details > summary {
   margin-top: 8px;
 }
 
+.origin-mapping-description {
+  margin-bottom: 8px;
+}
+
 .origin-mapping-button-section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 6px;
+  margin-top: var(--sys-size-6);
 }
 
 .config-button {

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

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+.ignore-list-setting-content {
+  padding: 0 var(--sys-size-8);
+  width: 280px;
+}
+
+.ignore-list-setting-description {
+  margin-bottom: 5px;
+}
+
+.regex-row {
+  display: flex;
+
+  /* The tag name of CheckboxLabel element */
+  dt-checkbox {
+    flex: auto;
+  }
+
+  devtools-button {
+    height: 24px;
+  }
+
+  &:not(:hover) devtools-button {
+    display: none;
+  }
+}
+
+.new-regex-row {
+  display: flex;
+
+  .new-regex-text-input {
+    flex: auto;
+  }
+
+  .harmony-input[type="text"] {
+    /* padding: 3px 6px; */
+    /* height: 24px; */
+    border: 1px solid var(--sys-color-neutral-outline);
+    border-radius: 4px;
+    outline: none;
+
+    &.error-input,
+    &:invalid {
+      border-color: var(--sys-color-error);
+    }
+
+    &:not(.error-input, :invalid):focus {
+      border-color: var(--sys-color-state-focus-ring);
+    }
+
+    &:not(.error-input, :invalid):hover:not(:focus) {
+      background: var(--sys-color-state-hover-on-subtle);
+    }
+  }
+}
+
+.input-validation {
+  /* 24px is the size of the checkbox, add this margin-left so the text can align with the input */
+  margin: 5px 0 5px 24px;
+
+  &.input-validation-error {
+    color: var(--sys-color-error);
+  }
+}

package/front_end/panels/timeline/components/insights/BaseInsightComponent.test.ts

@@ -0,0 +1,82 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../../../core/common/common.js';
+import * as Trace from '../../../../models/trace/trace.js';
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type {TimelineOverlay} from '../../overlays/OverlaysImpl.js';
+
+import * as Insights from './insights.js';
+
+const {html} = LitHtml;
+
+describeWithEnvironment('BaseInsightComponent', () => {
+  const {BaseInsightComponent} = Insights.BaseInsightComponent;
+  class TestInsightComponent extends BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>> {
+    override internalName = 'test-insight';
+    override createOverlays(): TimelineOverlay[] {
+      return [];
+    }
+    override renderContent(): LitHtml.LitTemplate {
+      return html`<div>test content</div>`;
+    }
+  }
+  customElements.define('test-insight-component', TestInsightComponent);
+
+  describe('sidebar insight component rendering', () => {
+    it('renders insight title even when not active', async () => {
+      const component = new TestInsightComponent();
+      component.selected = false;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await RenderCoordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNull(descElement);
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNull(contentElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+    });
+
+    it('renders title, description and content when toggled', async () => {
+      const component = new TestInsightComponent();
+      component.selected = true;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await RenderCoordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNotNull(descElement);
+      // It's in the markdown component.
+      assert.strictEqual(descElement.children[0].shadowRoot?.textContent?.trim(), 'some description');
+
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNotNull(contentElement);
+      assert.strictEqual(contentElement.textContent, 'test content');
+    });
+  });
+});