chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/panels/application/FrameDetailsView.ts

@@ -297,12 +297,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${input.permissionsPolicies ?
-        html`
-          <devtools-resources-permissions-policy-section
-             .data=${{policies: input.permissionsPolicies, showDetails: false} as ApplicationComponents.PermissionsPolicySection.PermissionsPolicySectionData}>
-          </devtools-resources-permissions-policy-section>
-        ` : nothing}
+      ${input.permissionsPolicies ? html`
+          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
+             policies: input.permissionsPolicies,
+             showDetails: false})}>
+          </devtools-widget>` : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -7,7 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {InterestGroupStorageView} from './InterestGroupStorageView.js';
@@ -30,7 +30,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.interestGroups), false, 'interest-groups');
-    const interestGroupIcon = IconButton.Icon.create('database');
+    const interestGroupIcon = createIcon('database');
     this.setLeadingIcons([interestGroupIcon]);
     this.view = new InterestGroupStorageView(this);
   }

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -7,7 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import openedWindowDetailsViewStyles from './openedWindowDetailsView.css.js';
@@ -93,7 +93,7 @@ const booleanToYesNo = (b: boolean): Common.UIString.LocalizedString =>
     b ? i18nString(UIStrings.yes) : i18nString(UIStrings.no);
 
 function linkifyIcon(iconType: string, title: string, eventHandler: () => (void|Promise<void>)): Element {
-  const icon = IconButton.Icon.create(iconType, 'icon-link devtools-link');
+  const icon = createIcon(iconType, 'icon-link devtools-link');
   const button = document.createElement('button');
   UI.Tooltip.Tooltip.install(button, title);
   button.classList.add('devtools-link', 'link-style', 'text-button');

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../ui/components/icon_button/icon_button.js';
+import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/adorners/adorners.js';
 

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -5,7 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as PreloadingHelper from './preloading/helper/helper.js';
@@ -45,7 +45,7 @@ class PreloadingTreeElementBase<View extends PreloadingRuleSetView|PreloadingAtt
     this.#viewConstructor = viewConstructor;
     this.#path = path;
 
-    const icon = IconButton.Icon.create('speculative-loads');
+    const icon = createIcon('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selected = false;
 
@@ -94,7 +94,7 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
   constructor(panel: ResourcesPanel) {
     super(panel, i18nString(UIStrings.speculativeLoads), '', '', 'preloading');
 
-    const icon = IconButton.Icon.create('speculative-loads');
+    const icon = createIcon('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selected = false;
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -5,7 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {ReportingApiView} from './ReportingApiView.js';
@@ -25,7 +25,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.reportingApi), false, 'reporting-api');
-    const icon = IconButton.Icon.create('document');
+    const icon = createIcon('document');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -8,7 +8,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -48,7 +48,7 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
     super(
         resourcesPanel, i18nString(UIStrings.cacheStorage), i18nString(UIStrings.noCacheStorage),
         i18nString(UIStrings.cacheStorageDescription), 'cache-storage');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLink('https://developer.chrome.com/docs/devtools/storage/cache/' as Platform.DevToolsPath.UrlString);
     this.setLeadingIcons([icon]);
     this.swCacheModels = new Set();
@@ -175,7 +175,7 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
     this.model = model;
     this.cache = cache;
     this.view = null;
-    const icon = IconButton.Icon.create('table');
+    const icon = createIcon('table');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -706,9 +706,9 @@ export class Section {
         this.routerField = this.wrapWidget(this.section.appendField(title));
       }
       if (!this.routerField.lastElementChild) {
-        this.routerField.appendChild(this.routerView);
+        this.routerView.show(this.routerField);
       }
-      this.routerView.update(active.routerRules);
+      this.routerView.rules = active.routerRules;
     } else {
       // If no active worker or no registered rules, remove the field.
       this.section.removeField(title);

package/front_end/panels/application/SharedStorageListTreeElement.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -29,7 +29,7 @@ export class SharedStorageListTreeElement extends ApplicationPanelTreeElement {
     super(resourcesPanel, i18nString(UIStrings.sharedStorage), false, 'shared-storage');
     this.#expandedSetting =
         Common.Settings.Settings.instance().createSetting('resources-shared-storage-expanded', expandedSettingsDefault);
-    const sharedStorageIcon = IconButton.Icon.create('database');
+    const sharedStorageIcon = createIcon('database');
     this.setLeadingIcons([sharedStorageIcon]);
     this.view = new SharedStorageEventsView();
   }

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -7,8 +7,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {IndexedDBTreeElement} from './ApplicationPanelSidebar.js';
@@ -49,7 +49,7 @@ export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelT
     super(
         storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets),
         i18nString(UIStrings.storageBucketsDescription), 'storage-buckets');
-    const icon = IconButton.Icon.create('bucket');
+    const icon = createIcon('bucket');
     this.setLeadingIcons([icon]);
     this.setLink(
         'https://github.com/WICG/storage-buckets/blob/gh-pages/explainer.md' as Platform.DevToolsPath.UrlString);
@@ -153,7 +153,7 @@ export class StorageBucketsTreeElement extends ExpandableApplicationPanelTreeEle
     super(resourcesPanel, `${bucket.name} - ${origin}`, '', '', 'storage-bucket');
     this.bucketModel = model;
     this.storageBucketInfo = bucketInfo;
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 

package/front_end/panels/application/StorageView.ts

@@ -9,8 +9,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -520,7 +520,7 @@ export class StorageView extends UI.Widget.VBox {
             {PH1: response.usage.toLocaleString(), PH2: response.quota.toLocaleString()}));
 
     if (!response.overrideActive && response.quota < 125829120) {  // 120 MB
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'info';
       icon.style.color = 'var(--icon-info)';
       icon.classList.add('small');

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -5,9 +5,7 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {createIcon} from '../../ui/kit/kit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -24,12 +22,11 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/TrustTokensTreeElem
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.TrustTokensView.TrustTokensView>;
+  private view?: ApplicationComponents.TrustTokensView.TrustTokensView;
 
   constructor(storagePanel: ResourcesPanel) {
     super(storagePanel, i18nString(UIStrings.trustTokens), false, 'private-state-tokens');
-    const icon = IconButton.Icon.create('database');
+    const icon = createIcon('database');
     this.setLeadingIcons([icon]);
   }
 
@@ -40,8 +37,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.TrustTokensView.TrustTokensView(), 'trust-tokens');
+      this.view = new ApplicationComponents.TrustTokensView.TrustTokensView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('trust-tokens');