chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/search/SearchView.ts

@@ -1,17 +1,17 @@
 // Copyright 2014 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.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
+import '../../ui/components/icon_button/icon_button.js';
 
 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 Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {SearchResultsPane} from './SearchResultsPane.js';
@@ -20,106 +20,94 @@ import searchViewStyles from './searchView.css.js';
 
 const UIStrings = {
   /**
-   *@description Placeholder text of a search bar
+   * @description Placeholder text of a search bar
    */
   find: 'Find',
   /**
-   *@description Tooltip text on a toggle to enable search by matching case of the input
+   * @description Tooltip text on a toggle to enable search by matching case of the input
    */
   enableCaseSensitive: 'Enable case sensitive search',
   /**
-   *@description Tooltip text on a toggle to disable search by matching case of the input
+   * @description Tooltip text on a toggle to disable search by matching case of the input
    */
   disableCaseSensitive: 'Disable case sensitive search',
   /**
-   *@description Tooltip text on a toggle to enable searching with regular expression
+   * @description Tooltip text on a toggle to enable searching with regular expression
    */
   enableRegularExpression: 'Enable regular expressions',
   /**
-   *@description Tooltip text on a toggle to disable searching with regular expression
+   * @description Tooltip text on a toggle to disable searching with regular expression
    */
   disableRegularExpression: 'Disable regular expressions',
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
   /**
-   *@description Tooltip text to clear the search input field
+   * @description Tooltip text to clear the search input field
    */
   clearInput: 'Clear',
   /**
-   *@description Text to clear content
+   * @description Text to clear content
    */
   clear: 'Clear search',
   /**
-   *@description Search message element text content in Search View of the Search tab
+   * @description Search message element text content in Search View of the Search tab
    */
   indexing: 'Indexing…',
   /**
-   *@description Text to indicate the searching is in progress
+   * @description Text to indicate the searching is in progress
    */
   searching: 'Searching…',
   /**
-   *@description Text in Search View of the Search tab
+   * @description Text in Search View of the Search tab
    */
   indexingInterrupted: 'Indexing interrupted.',
   /**
-   *@description Search results message element text content in Search View of the Search tab
+   * @description Search results message element text content in Search View of the Search tab
    */
   foundMatchingLineInFile: 'Found 1 matching line in 1 file.',
   /**
-   *@description Search results message element text content in Search View of the Search tab
-   *@example {2} PH1
+   * @description Search results message element text content in Search View of the Search tab
+   * @example {2} PH1
    */
   foundDMatchingLinesInFile: 'Found {PH1} matching lines in 1 file.',
   /**
-   *@description Search results message element text content in Search View of the Search tab
-   *@example {2} PH1
-   *@example {2} PH2
+   * @description Search results message element text content in Search View of the Search tab
+   * @example {2} PH1
+   * @example {2} PH2
    */
   foundDMatchingLinesInDFiles: 'Found {PH1} matching lines in {PH2} files.',
   /**
-   *@description Search results message element text content in Search View of the Search tab
+   * @description Search results message element text content in Search View of the Search tab
    */
   noMatchesFound: 'No matches found',
   /**
-   *@description Search results message element text content in Search View of the Search tab
+   * @description Search results message element text content in Search View of the Search tab
    */
   nothingMatchedTheQuery: 'Nothing matched your search query',
   /**
-   *@description Text in Search View of the Search tab
+   * @description Text in Search View of the Search tab
    */
   searchFinished: 'Search finished.',
   /**
-   *@description Text in Search View of the Search tab
+   * @description Text in Search View of the Search tab
    */
   searchInterrupted: 'Search interrupted.',
   /**
-   *@description Text in Search View of the Search tab if user hasn't started the search
-   *@example {Enter} PH1
+   * @description Text in Search View of the Search tab if user hasn't started the search
+   * @example {Enter} PH1
    */
   typeAndPressSToSearch: 'Type and press {PH1} to search',
   /**
-   *@description Text in Search view of the Search tab if user hasn't started the search
+   * @description Text in Search view of the Search tab if user hasn't started the search
    */
   noSearchResult: 'No search results',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ref} = Directives;
 
-function createSearchToggleButton(iconName: string, jslogContext: string): Buttons.Button.Button {
-  const button = new Buttons.Button.Button();
-  button.data = {
-    variant: Buttons.Button.Variant.ICON_TOGGLE,
-    iconName,
-    toggledIconName: iconName,
-    toggleType: Buttons.Button.ToggleType.PRIMARY,
-    size: Buttons.Button.Size.SMALL,
-    toggled: false,
-    jslogContext,
-  };
-  return button;
-}
 export class SearchView extends UI.Widget.VBox {
   private focusOnShow: boolean;
   private isIndexing: boolean;
@@ -134,14 +122,14 @@ export class SearchView extends UI.Widget.VBox {
   private searchResultsPane: SearchResultsPane|null;
   private progressIndicator: UI.ProgressIndicator.ProgressIndicator|null;
   private visiblePane: UI.Widget.Widget|null;
-  private readonly searchPanelElement: HTMLElement;
-  private readonly searchResultsElement: HTMLElement;
-  protected readonly search: HTMLInputElement;
-  protected readonly matchCaseButton: Buttons.Button.Button;
-  protected readonly regexButton: Buttons.Button.Button;
-  private searchMessageElement: HTMLElement;
-  private readonly searchProgressPlaceholderElement: HTMLElement;
-  private searchResultsMessageElement: HTMLElement;
+  private searchPanelElement!: HTMLElement;
+  private searchResultsElement!: HTMLElement;
+  protected search!: HTMLInputElement;
+  protected matchCaseButton!: Buttons.Button.Button;
+  protected regexButton!: Buttons.Button.Button;
+  private searchMessageElement!: HTMLElement;
+  private searchProgressPlaceholderElement!: HTMLElement;
+  private searchResultsMessageElement!: HTMLElement;
   private readonly advancedSearchConfig: Common.Settings.Setting<{
     query: string,
     ignoreCase: boolean,
@@ -156,9 +144,11 @@ export class SearchView extends UI.Widget.VBox {
   #emptyStartView: UI.EmptyWidget.EmptyWidget;
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.setMinimumSize(0, 40);
-    this.registerRequiredCSS(searchViewStyles);
 
     this.focusOnShow = false;
     this.isIndexing = false;
@@ -175,79 +165,86 @@ export class SearchView extends UI.Widget.VBox {
     this.visiblePane = null;
     this.#throttler = throttler;
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.panel('search').track({resize: true})}`);
-
-    this.contentElement.classList.add('search-view');
-    this.contentElement.addEventListener('keydown', event => {
-      this.onKeyDownOnPanel((event));
-    });
-
-    this.searchPanelElement = this.contentElement.createChild('div', 'search-drawer-header');
-    this.searchResultsElement = this.contentElement.createChild('div');
-    this.searchResultsElement.className = 'search-results';
-
-    const searchContainer = document.createElement('div');
-    searchContainer.classList.add('search-container');
-    const searchElements = searchContainer.createChild('div', 'toolbar-item-search');
-
-    const searchIcon = IconButton.Icon.create('search');
-    searchElements.appendChild(searchIcon);
-
-    this.search = UI.UIUtils.createHistoryInput('search', 'search-toolbar-input');
-    this.search.addEventListener('keydown', event => {
-      this.onKeyDown((event));
-    });
-    this.search.setAttribute(
-        'jslog', `${VisualLogging.textField().track({change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}`);
-    searchElements.appendChild(this.search);
-    this.search.placeholder = i18nString(UIStrings.find);
-    this.search.setAttribute('results', '0');
-    this.search.setAttribute('size', '100');
-    UI.ARIAUtils.setLabel(this.search, this.search.placeholder);
-
-    const clearInputFieldButton = new Buttons.Button.Button();
-    clearInputFieldButton.data = {
-      variant: Buttons.Button.Variant.ICON,
-      iconName: 'cross-circle-filled',
-      jslogContext: 'clear-input',
-      size: Buttons.Button.Size.SMALL,
-      title: i18nString(UIStrings.clearInput),
-    };
-    clearInputFieldButton.classList.add('clear-button');
-    clearInputFieldButton.addEventListener('click', () => {
-      this.onSearchInputClear();
-    });
-    clearInputFieldButton.tabIndex = -1;
-    searchElements.appendChild(clearInputFieldButton);
-
-    const regexIconName = 'regular-expression';
-    this.regexButton = createSearchToggleButton(regexIconName, regexIconName);
-    this.regexButton.addEventListener('click', () => this.regexButtonToggled());
-    searchElements.appendChild(this.regexButton);
-
-    const matchCaseIconName = 'match-case';
-    this.matchCaseButton = createSearchToggleButton(matchCaseIconName, matchCaseIconName);
-    this.matchCaseButton.addEventListener('click', () => this.matchCaseButtonToggled());
-    searchElements.appendChild(this.matchCaseButton);
-
-    this.searchPanelElement.appendChild(searchContainer);
-    const toolbar = this.searchPanelElement.createChild('devtools-toolbar', 'search-toolbar');
-    toolbar.setAttribute('jslog', `${VisualLogging.toolbar()}`);
-    const refreshButton =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refresh), 'refresh', undefined, 'search.refresh');
-    const clearButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clear), 'clear', undefined, 'search.clear');
-    toolbar.appendToolbarItem(refreshButton);
-    toolbar.appendToolbarItem(clearButton);
-    refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => this.onAction());
-    clearButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, () => {
-      this.resetSearch();
-      this.onSearchInputClear();
-    });
-
-    const searchStatusBarElement = this.contentElement.createChild('div', 'search-toolbar-summary');
-    this.searchMessageElement = searchStatusBarElement.createChild('div', 'search-message');
-    this.searchProgressPlaceholderElement = searchStatusBarElement.createChild('div', 'flex-centered');
-    this.searchResultsMessageElement = searchStatusBarElement.createChild('div', 'search-message');
+    // clang-format off
+    /* eslint-disable-next-line rulesdir/no-lit-render-outside-of-view */
+    render(html`
+      <style>${searchViewStyles}</style>
+      <div class="search-drawer-header" @keydown=${this.onKeyDownOnPanel}
+           ${ref(e => {this.searchPanelElement = e as HTMLElement;})}>
+        <div class="search-container">
+          <div class="toolbar-item-search">
+            <devtools-icon name="search"></devtools-icon>
+            <input type="text"
+                class="search-toolbar-input"
+                placeholder=${i18nString(UIStrings.find)}
+                jslog=${VisualLogging.textField().track({
+                    change: true, keydown: 'ArrowUp|ArrowDown|Enter'})}
+                aria-label=${i18nString(UIStrings.find)}
+                size="100" results="0"
+                @keydown=${this.onKeyDown}
+                ${ref(e => {this.search = e as HTMLInputElement;})}>
+            <devtools-button class="clear-button" tabindex="-1"
+                @click=${this.onSearchInputClear}
+                .data=${{
+                  variant: Buttons.Button.Variant.ICON,
+                  iconName: 'cross-circle-filled',
+                  jslogContext: 'clear-input',
+                  size: Buttons.Button.Size.SMALL,
+                  title: i18nString(UIStrings.clearInput),
+                } as Buttons.Button.ButtonData}
+            ></devtools-button>
+            <devtools-button @click=${this.regexButtonToggled} .data=${{
+                variant: Buttons.Button.Variant.ICON_TOGGLE,
+                iconName: 'regular-expression',
+                toggledIconName: 'regular-expression',
+                toggleType: Buttons.Button.ToggleType.PRIMARY,
+                size: Buttons.Button.Size.SMALL,
+                toggled: false,
+                title: i18nString(UIStrings.enableRegularExpression),
+                jslogContext: 'regular-expression',
+              } as Buttons.Button.ButtonData}
+              ${ref(e => {this.regexButton = e as Buttons.Button.Button;})}
+            ></devtools-button>
+            <devtools-button @click=${this.matchCaseButtonToggled} .data=${{
+                variant: Buttons.Button.Variant.ICON_TOGGLE,
+                iconName: 'match-case',
+                toggledIconName: 'match-case',
+                toggleType: Buttons.Button.ToggleType.PRIMARY,
+                size: Buttons.Button.Size.SMALL,
+                toggled: false,
+                title: i18nString(UIStrings.enableCaseSensitive),
+                jslogContext: 'match-case',
+              } as Buttons.Button.ButtonData}
+              ${ref(e => {this.matchCaseButton = e as Buttons.Button.Button;})}
+            ></devtools-button>
+          </div>
+        </div>
+        <devtools-toolbar class="search-toolbar" jslog=${VisualLogging.toolbar()}>
+          <devtools-button title=${i18nString(UIStrings.refresh)} @click=${this.onAction}
+              .data=${{
+                variant: Buttons.Button.Variant.TOOLBAR,
+                iconName: 'refresh',
+                jslogContext: 'search.refresh',
+              } as Buttons.Button.ButtonData}></devtools-button>
+          <devtools-button title=${i18nString(UIStrings.clear)} @click=${this.onClearSearch}
+              .data=${{
+                variant: Buttons.Button.Variant.TOOLBAR,
+                iconName: 'clear',
+                jslogContext: 'search.clear',
+              } as Buttons.Button.ButtonData}></devtools-button>
+        </devtools-toolbar>
+      </div>
+      <div class="search-results" @keydown=${this.onKeyDownOnPanel}
+           ${ref(e => {this.searchResultsElement = e as HTMLElement;})}>
+      </div>
+      <div class="search-toolbar-summary" @keydown=${this.onKeyDownOnPanel}>
+        <div class="search-message" ${ref(e => {this.searchMessageElement = e as HTMLElement;})}></div>
+        <div class="flex-centered" ${ref(e => {this.searchProgressPlaceholderElement = e as HTMLElement;})}>
+        </div>
+        <div class="search-message" ${ref(e => {this.searchResultsMessageElement = e as HTMLElement;})}>
+        </div>
+      </div>`, this.contentElement, {host: this});
+    // clang-format on
 
     this.advancedSearchConfig = Common.Settings.Settings.instance().createLocalSetting(
         settingKey + '-search-config', new Workspace.SearchConfig.SearchConfig('', true, false).toPlainObject());
@@ -335,9 +332,9 @@ export class SearchView extends UI.Widget.VBox {
     if (this.progressIndicator) {
       this.progressIndicator.done();
     }
-    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    this.progressIndicator = document.createElement('devtools-progress');
     this.searchMessageElement.textContent = i18nString(UIStrings.indexing);
-    this.progressIndicator.show(this.searchProgressPlaceholderElement);
+    this.searchProgressPlaceholderElement.appendChild(this.progressIndicator);
     if (this.searchScope) {
       this.searchScope.performIndexing(
           new Common.Progress.ProgressProxy(this.progressIndicator, this.onIndexingFinished.bind(this)));
@@ -386,7 +383,8 @@ export class SearchView extends UI.Widget.VBox {
     }
     this.searchFinished(finished);
     this.searchConfig = null;
-    UI.ARIAUtils.alert(this.searchMessageElement.textContent + ' ' + this.searchResultsMessageElement.textContent);
+    UI.ARIAUtils.LiveAnnouncer.alert(
+        this.searchMessageElement.textContent + ' ' + this.searchResultsMessageElement.textContent);
   }
 
   private innerStartSearch(searchConfig: Workspace.SearchConfig.SearchConfig): void {
@@ -394,7 +392,7 @@ export class SearchView extends UI.Widget.VBox {
     if (this.progressIndicator) {
       this.progressIndicator.done();
     }
-    this.progressIndicator = new UI.ProgressIndicator.ProgressIndicator();
+    this.progressIndicator = document.createElement('devtools-progress');
     this.searchStarted(this.progressIndicator);
     if (this.searchScope) {
       void this.searchScope.performSearch(
@@ -430,7 +428,7 @@ export class SearchView extends UI.Widget.VBox {
     }
     this.showPane(this.searchingView);
     this.searchMessageElement.textContent = i18nString(UIStrings.searching);
-    progressIndicator.show(this.searchProgressPlaceholderElement);
+    this.searchProgressPlaceholderElement.appendChild(progressIndicator);
     this.updateSearchResultsMessage();
   }
 
@@ -573,6 +571,11 @@ export class SearchView extends UI.Widget.VBox {
     this.pendingSearchConfig = searchConfig;
   }
 
+  private onClearSearch(): void {
+    this.resetSearch();
+    this.onSearchInputClear();
+  }
+
   get throttlerForTest(): Common.Throttler.Throttler {
     return this.#throttler;
   }

package/front_end/panels/search/searchResultsPane.css

@@ -27,7 +27,7 @@ li.search-result {
   font-size: 12px;
   margin-top: 8px;
   padding: 2px 0 2px 4px;
-  word-wrap: normal;
+  overflow-wrap: normal;
   white-space: pre;
 }
 
@@ -64,7 +64,7 @@ li.show-more-matches:hover {
 
 li.search-match {
   margin: 2px 0;
-  word-wrap: normal;
+  overflow-wrap: normal;
   white-space: pre;
 }
 

package/front_end/panels/search/searchView.css

@@ -107,12 +107,12 @@
   overflow: hidden;
 }
 
-.search-view .search-results {
+.search-results {
   overflow-y: auto;
   display: flex;
   flex: auto;
 }
 
-.search-view .search-results > div {
+.search-results > div {
   flex: auto;
 }

package/front_end/panels/security/CookieControlsView.ts

@@ -26,89 +26,89 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Title in the view's header for the controls tool in the Privacy & Security panel
+   * @description Title in the view's header for the controls tool in the Privacy & Security panel
    */
   viewTitle: 'Controls',
   /**
-   *@description Explanation in the view's header about the purpose of this controls tool
+   * @description Explanation in the view's header about the purpose of this controls tool
    */
   viewExplanation: 'Test how this site will perform if third-party cookies are limited in Chrome',
   /**
-   *@description Title in the card within the controls tool
+   * @description Title in the card within the controls tool
    */
   cardTitle: 'Temporarily limit third-party cookies',
   /**
-   *@description Disclaimer beneath the card title to tell the user that the controls will only persist while devtools is open
+   * @description Disclaimer beneath the card title to tell the user that the controls will only persist while devtools is open
    */
   cardDisclaimer: 'Only when DevTools is open',
   /**
-   *@description Message as part of the banner that prompts the user to reload the page to see the changes take effect. This appears when the user makes any change within the tool
+   * @description Message as part of the banner that prompts the user to reload the page to see the changes take effect. This appears when the user makes any change within the tool
    */
   siteReloadMessage: 'To apply your updated controls, reload the page',
   /**
-   *@description Title of controls section. These are exceptions that the user will be able to override to test their site
+   * @description Title of controls section. These are exceptions that the user will be able to override to test their site
    */
   exceptions: 'Exceptions',
   /**
-   *@description Explanation of what exceptions are in this context
+   * @description Explanation of what exceptions are in this context
    */
   exceptionsExplanation: 'Scenarios that grant access to third-party cookies',
   /**
-   *@description Title for the grace period exception control
+   * @description Title for the grace period exception control
    */
   gracePeriodTitle: 'Third-party cookie grace period',
   /**
-   *@description Explanation of the grace period and a link to learn more
-   *@example {grace period} PH1
+   * @description Explanation of the grace period and a link to learn more
+   * @example {grace period} PH1
    */
   gracePeriodExplanation:
       'If this site or a site embedded on it is enrolled in the {PH1}, then the site can access third-party cookies',
   /**
-   *@description Text shown when a site and its embedded resources are not enrolled in a grace period.
-   *@example {grace period} PH1
+   * @description Text shown when a site and its embedded resources are not enrolled in a grace period.
+   * @example {grace period} PH1
    */
   enrollGracePeriod: 'To use this, enroll this site or sites embedded on it in the {PH1}',
   /**
-   *@description Text used for link within gracePeriodExplanation and enrollGracePeriod to let the user learn more about the grace period
+   * @description Text used for link within gracePeriodExplanation and enrollGracePeriod to let the user learn more about the grace period
    */
   gracePeriod: 'grace period',
   /**
-   *@description Title for the heuristic exception control
+   * @description Title for the heuristic exception control
    */
   heuristicTitle: 'Heuristics based exception',
   /**
-   *@description Explanation of the heuristics with a link to learn more about the scenarios in which they apply
-   *@example {predefined scenarios} PH1
+   * @description Explanation of the heuristics with a link to learn more about the scenarios in which they apply
+   * @example {predefined scenarios} PH1
    */
   heuristicExplanation:
       'In {PH1} like pop-ups or redirects, a site embedded on this site can access third-party cookies',
   /**
-   *@description Text used for link within the heuristicExplanation to let the user learn more about the heuristic exception
+   * @description Text used for link within the heuristicExplanation to let the user learn more about the heuristic exception
    */
   scenarios: 'predefined scenarios',
   /**
-   *@description Note at the bottom of the controls tool telling the user that their organization has an enterprise policy that controls cookies. This may disable the tool
+   * @description Note at the bottom of the controls tool telling the user that their organization has an enterprise policy that controls cookies. This may disable the tool
    */
   enterpriseDisclaimer: 'Your organization manages third-party cookie access for this site',
   /**
-   *@description Tooltip that appears when the user hovers over the card's enterprise icon
+   * @description Tooltip that appears when the user hovers over the card's enterprise icon
    */
   enterpriseTooltip: 'This setting is managed by your organization',
   /**
-    +*@description Button with the enterpise disclaimer that takes the user to the relevant enterprise cookie chrome setting
+   * +*@description Button with the enterpise disclaimer that takes the user to the relevant enterprise cookie chrome setting
    */
   viewDetails: 'View details',
   /**
-   *@description Text shown when the Third-party Cookie Metadata Grants flag or Third-party Cookie Heuristics Grants flag is disabled with a link to the flag in chrome://flags/.
-   *@example {#tpcd-heuristics-grants} PH1
+   * @description Text shown when the Third-party Cookie Metadata Grants flag or Third-party Cookie Heuristics Grants flag is disabled with a link to the flag in chrome://flags/.
+   * @example {#tpcd-heuristics-grants} PH1
    */
   enableFlag: 'To use this, set {PH1} to Default',
   /**
-   *@description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Metadata Grants flag.
+   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Metadata Grants flag.
    */
   tpcdMetadataGrants: '#tpcd-metadata-grants',
   /**
-   *@description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Heuristics Grants flag.
+   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Heuristics Grants flag.
    */
   tpcdHeuristicsGrants: '#tpcd-heuristics-grants',
 } as const;
@@ -174,7 +174,7 @@ export class CookieControlsView extends UI.Widget.VBox {
           ${Boolean(enterpriseEnabledSetting.get()) ? html `
             <devtools-icon
               tabindex="0"
-              .name=${'domain'}
+              name="domain"
               ${Lit.Directives.ref((el: Element|undefined) => {
                 UI.Tooltip.Tooltip.install(el as HTMLElement, i18nString(UIStrings.enterpriseTooltip));
                 (el as HTMLElement).role = 'img';
@@ -266,7 +266,7 @@ export class CookieControlsView extends UI.Widget.VBox {
         <div class="text body">${i18nString(UIStrings.enterpriseDisclaimer)}</div>
           <div class="anchor">
             <devtools-icon
-            .name=${'domain'}
+            name="domain"
             ></devtools-icon>
             <devtools-button
             @click=${input.openChromeCookieSettings}
@@ -305,7 +305,7 @@ export class CookieControlsView extends UI.Widget.VBox {
     `, target, {host: this});
     // clang-format on
   }) {
-    super(true, undefined, element);
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.#isGracePeriodActive = false;
     this.#thirdPartyControlsDict = Root.Runtime.hostConfig.thirdPartyCookieControls;