chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/freestyler/components/freestylerChatUi.css

@@ -125,12 +125,32 @@
       opacity: 100%;
     }
   }
+
+  &.one-big-button {
+    /* start new chat button */
+    --right-padding: 100px;
+  }
+
+  &.two-big-buttons {
+    /* cancel + start new chat button */
+    --right-padding: 172px;
+  }
 }
 
-.chat-input-button {
+.chat-input-buttons {
   position: absolute;
   right: 0;
   bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+.chat-input-button {
+  padding-bottom: 3px;
+  padding-right: var(--sys-size-3);
+}
+
+.chat-cancel-context-button {
   padding-bottom: 3px;
   padding-right: var(--sys-size-3);
 }

package/front_end/panels/freestyler/components/userActionRow.css

@@ -17,6 +17,7 @@
   gap: var(--sys-size-8);
   justify-content: space-between;
   align-items: center;
+  margin-block: calc(-1 * var(--sys-size-3));
 }
 
 .rate-buttons {
@@ -81,7 +82,7 @@
     overflow: auto hidden;
     scrollbar-width: none;
     gap: var(--sys-size-3);
-    padding-right: var(--sys-size-1);
+    padding: var(--sys-size-3);
   }
 
   .scroll-button-container {

package/front_end/panels/freestyler/freestyler.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 export * from './AiAgent.js';
+export * from './AiHistoryStorage.js';
 export * from './ChangeManager.js';
 export * from './DrJonesFileAgent.js';
 export * from './DrJonesNetworkAgent.js';

package/front_end/panels/issues/IssueAggregator.test.ts

@@ -358,3 +358,53 @@ describeWithMockConnection('IssueAggregator', () => {
     assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
   });
 });
+
+describeWithMockConnection('IssueAggregator', () => {
+  function getTestMitigationCookieIssue(warningReason: Protocol.Audits.CookieWarningReason): IssuesManager.Issue.Issue {
+    return IssuesManager.IssuesManager.createIssuesFromProtocolIssue(model, {
+      code: Protocol.Audits.InspectorIssueCode.CookieIssue,
+      details: {
+        cookieIssueDetails: {
+          cookie: {
+            name: 'test',
+            path: '/',
+            domain: 'a.test',
+          },
+          cookieExclusionReasons: [],
+          cookieWarningReasons: [warningReason],
+          operation: Protocol.Audits.CookieOperation.ReadCookie,
+          cookieUrl: 'a.test',
+        },
+      },
+    })[0];
+  }
+
+  let issuesManager: IssuesManager.IssuesManager.IssuesManager;
+  let model: SDK.IssuesModel.IssuesModel;
+
+  beforeEach(() => {
+    const showThirdPartyIssuesSetting = createFakeSetting('third party flag', true);
+    issuesManager = new IssuesManager.IssuesManager.IssuesManager(showThirdPartyIssuesSetting);
+    const target = createTarget();
+    model = target.model(SDK.IssuesModel.IssuesModel) as SDK.IssuesModel.IssuesModel;
+  });
+
+  it('should not aggregate mitigation related cookie issues', async () => {
+    // Preexisting issues should not be added
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    const aggregator = new Issues.IssueAggregator.IssueAggregator(issuesManager);
+
+    // Issues added after aggregator creation should not exist either
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata));
+    issuesManager.addIssue(
+        model, getTestMitigationCookieIssue(Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic));
+
+    assert.strictEqual(aggregator.numberOfAggregatedIssues(), 0);
+    assert.strictEqual(aggregator.numberOfHiddenAggregatedIssues(), 0);
+  });
+});

package/front_end/panels/issues/IssueAggregator.ts

@@ -268,15 +268,6 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
-    const excludeFromAggregate = [
-      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
-      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
-    ];
-
-    if (excludeFromAggregate.some(exclude => event.data.issue.code().includes(exclude))) {
-      return;
-    }
-
     this.#aggregateIssue(event.data.issue);
   }
 
@@ -289,7 +280,16 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.FULL_UPDATE_REQUIRED);
   }
 
-  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue {
+  #aggregateIssue(issue: IssuesManager.Issue.Issue): AggregatedIssue|undefined {
+    const excludeFromAggregate = [
+      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
+      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
+    ];
+
+    if (excludeFromAggregate.some(exclude => issue.code().includes(exclude))) {
+      return;
+    }
+
     const map = issue.isHidden() ? this.#hiddenAggregatedIssuesByKey : this.#aggregatedIssuesByKey;
     const aggregatedIssue = this.#aggregateIssueByStatus(map, issue);
     this.dispatchEventToListeners(Events.AGGREGATED_ISSUE_UPDATED, aggregatedIssue);

package/front_end/panels/issues/issuesTree.css

@@ -176,7 +176,7 @@ p {
   border-left: 2px solid var(--issue-color-blue);
 }
 
-.tree-outline .issue-body li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+.tree-outline .issue-body li:hover:not(:has(dt-checkbox)) .selection {
   background-color: unset;
 }
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -297,7 +297,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
         i18nString(UIStrings.nearestLayerShiftingContaining), constraint.nearestLayerShiftingContainingBlock());
   }
 
-  update(): void {
+  override update(): void {
     const layer = this.selection && this.selection.layer();
     if (!layer) {
       this.tableElement.remove();

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -738,7 +738,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     }
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       this.needsUpdate = true;
       return;

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -242,7 +242,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  private update(): void {
+  override update(): void {
     this.canvas.width = this.canvasContainer.clientWidth * window.devicePixelRatio;
     this.canvas.height = this.canvasContainer.clientHeight * window.devicePixelRatio;
     this.samplesPerBar = 0;

package/front_end/panels/layers/LayersPanel.ts

@@ -153,7 +153,7 @@ export class LayersPanel extends UI.Panel.PanelWithSidebar implements SDK.Target
     void this.updateThrottler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     if (this.model) {
       this.layerViewHost.setLayerTree(this.model.layerTree());
       const resourceModel = this.model.target().model(SDK.ResourceTreeModel.ResourceTreeModel);

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -112,7 +112,7 @@ input[type="radio"] {
     margin-bottom: 0;
   }
 
-  &:not(:has(span[is="dt-checkbox"])) {
+  &:not(:has(dt-checkbox)) {
     margin-bottom: 6px;
   }
 }

package/front_end/panels/media/TickingFlameChart.ts

@@ -493,7 +493,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
     return false;
   }
 
-  prepareHighlightedEntryInfo(index: number): Element|null {
+  preparePopoverElement(index: number): Element|null {
     const element = document.createElement('div');
     (this.eventMap.get(index) as Event).decorate(element);
     return element;

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -133,7 +133,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
 
     const settingsContent =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
-    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
+    settingsContent.classList.add('settings-card-container', 'throttling-conditions-settings');
 
     const addButton = new Buttons.Button.Button();
     addButton.classList.add('add-conditions-button');

package/front_end/panels/network/BlockedURLsPane.ts

@@ -212,7 +212,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     return editor;
   }
 
-  update(): void {
+  override update(): void {
     const enabled = this.manager.blockingEnabled();
     this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
 

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1489,6 +1489,7 @@ export class NetworkRequestNode extends NetworkNode {
       const aiButtonContainer = document.createElement('span');
       aiButtonContainer.classList.add('ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {

package/front_end/panels/network/NetworkLogView.test.ts

@@ -880,7 +880,7 @@ function clickCheckbox(checkbox: HTMLInputElement) {
 
 function getCheckbox(filterBar: UI.FilterBar.FilterBar, title: string) {
   const checkbox =
-      filterBar.element.querySelector(`[title="${title}"] span`)?.shadowRoot?.querySelector('input') || null;
+      filterBar.element.querySelector(`[title="${title}"] dt-checkbox`)?.shadowRoot?.querySelector('input') || null;
   assert.instanceOf(checkbox, HTMLInputElement);
   return checkbox;
 }

package/front_end/panels/network/NetworkPanel.ts

@@ -125,16 +125,29 @@ const UIStrings = {
    */
   importHarFile: 'Import `HAR` file...',
   /**
-   * @description Tooltip text that appears when hovering over the largeicon download button in the
-   * Network Panel. HAR is a file format (HTTP Archive) and should not be translated. This action
-   * triggers the download of a HAR file.
+   * @description Tooltip text that appears when hovering over the download button in the Network
+   * panel, when the setting to allow generating HAR files with sensitive data is enabled. HAR is
+   * a file format (HTTP Archive) and should not be translated. This action triggers a context
+   * menu with two options, one to download HAR sanitized and one to download HAR with sensitive
+   * data.
+   */
+  exportHar: 'Export `HAR` (either sanitized or with sensitive data)',
+  /**
+   * @description Tooltip text that appears when hovering over the download button in the Network
+   * panel, when the setting to allow generating HAR files with sensitive data is disabled. HAR is
+   * a file format (HTTP Archive) and should not be translated. This action triggers the download
+   * of a HAR file.
+   *
+   * This string is also used as the first item in the context menu for the download button in
+   * the Network panel, when the setting to allow generating HAR files with sensitive data is
+   * enabled.
    */
   exportHarSanitized: 'Export `HAR` (sanitized)...',
   /**
-   * @description Context menu item in the export long click button of the Network panel, which is
-   * only available when the Network setting to allow generating HAR with sensitive data is active.
-   * HAR is a file format (HTTP Archive) and should not be translated. This action triggers the
-   * download of a HAR file with sensitive data included.
+   * @description Context menu item in the context menu for the download button of the Network panel,
+   * which is only available when the Network setting to allow generating HAR with sensitive data
+   * is active. HAR is a file format (HTTP Archive) and should not be translated. This action
+   * triggers the download of a HAR file with sensitive data included.
    */
   exportHarWithSensitiveData: 'Export `HAR` (with sensitive data)...',
   /**
@@ -470,6 +483,19 @@ export class NetworkPanel extends UI.Panel.Panel implements
         this.networkRecordFilmStripSetting, i18nString(UIStrings.captureScreenshotsWhenLoadingA),
         i18nString(UIStrings.captureScreenshots)));
 
+    const exportHarContextMenu = (contextMenu: UI.ContextMenu.ContextMenu): void => {
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.exportHarSanitized),
+          this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}),
+          {jslogContext: 'export-har'},
+      );
+      contextMenu.defaultSection().appendItem(
+          i18nString(UIStrings.exportHarWithSensitiveData),
+          this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: false}),
+          {jslogContext: 'export-har-with-sensitive-data'},
+      );
+    };
+
     this.panelToolbar.appendSeparator();
     const importHarButton =
         new UI.Toolbar.ToolbarButton(i18nString(UIStrings.importHarFile), 'import', undefined, 'import-har');
@@ -482,35 +508,17 @@ export class NetworkPanel extends UI.Panel.Panel implements
         UI.Toolbar.ToolbarButton.Events.CLICK,
         this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}), this);
     this.panelToolbar.appendToolbarItem(exportHarButton);
+    const exportHarMenuButton = new UI.Toolbar.ToolbarMenuButton(
+        exportHarContextMenu, /* isIconDropdown */ true, /* useSoftMenu */ false, 'export-har-menu', 'download');
+    exportHarMenuButton.setTitle(i18nString(UIStrings.exportHar));
+    this.panelToolbar.appendToolbarItem(exportHarMenuButton);
 
-    // Support for exporting HAR (with sensitive data), which is added via a long-click
-    // context menu on the Export button in the Network panel.
-    // Checkout https://goo.gle/devtools-har-exclude-cookies-design for more details.
     const networkShowOptionsToGenerateHarWithSensitiveData = Common.Settings.Settings.instance().createSetting(
         'network.show-options-to-generate-har-with-sensitive-data', false);
-    let controller: UI.UIUtils.LongClickController|null = null;
     const updateShowOptionsToGenerateHarWithSensitiveData = (): void => {
-      exportHarButton.setLongClickable(networkShowOptionsToGenerateHarWithSensitiveData.get());
-      if (controller !== null) {
-        controller.dispose();
-        controller = null;
-      }
-      if (networkShowOptionsToGenerateHarWithSensitiveData.get()) {
-        controller = new UI.UIUtils.LongClickController(exportHarButton.element, event => {
-          const contextMenu = new UI.ContextMenu.ContextMenu(event);
-          contextMenu.defaultSection().appendItem(
-              i18nString(UIStrings.exportHarSanitized),
-              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}),
-              {jslogContext: 'export-har'},
-          );
-          contextMenu.defaultSection().appendItem(
-              i18nString(UIStrings.exportHarWithSensitiveData),
-              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: false}),
-              {jslogContext: 'export-har-with-sensitive-data'},
-          );
-          void contextMenu.show();
-        });
-      }
+      const showOptionsToGenerateHarWithSensitiveData = networkShowOptionsToGenerateHarWithSensitiveData.get();
+      exportHarButton.setVisible(!showOptionsToGenerateHarWithSensitiveData);
+      exportHarMenuButton.setVisible(showOptionsToGenerateHarWithSensitiveData);
     };
     networkShowOptionsToGenerateHarWithSensitiveData.addChangeListener(updateShowOptionsToGenerateHarWithSensitiveData);
     updateShowOptionsToGenerateHarWithSensitiveData();

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -341,7 +341,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     void coordinator.write('NetworkWaterfallColumn.render', () => this.update());
   }
 
-  update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
+  override update(scrollTop?: number, eventDividers?: Map<string, number[]>, nodes?: NetworkNode[]): void {
     if (scrollTop !== undefined && this.scrollTop !== scrollTop) {
       this.popoverHelper.hidePopover();
       this.scrollTop = scrollTop;

package/front_end/panels/profiler/HeapProfileView.ts

@@ -675,28 +675,28 @@ export class HeapFlameChartDataProvider extends ProfileFlameChartDataProvider {
     return this.timelineDataInternal;
   }
 
-  override prepareHighlightedEntryInfo(entryIndex: number): Element|null {
+  override preparePopoverElement(entryIndex: number): Element|null {
     const node = this.entryNodes[entryIndex];
     if (!node) {
       return null;
     }
-    const entryInfo: {
+    const popoverInfo: {
       title: string,
       value: string,
     }[] = [];
-    function pushEntryInfoRow(title: string, value: string): void {
-      entryInfo.push({title, value});
+    function pushRow(title: string, value: string): void {
+      popoverInfo.push({title, value});
     }
-    pushEntryInfoRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
-    pushEntryInfoRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
-    pushEntryInfoRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
+    pushRow(i18nString(UIStrings.name), UI.UIUtils.beautifyFunctionName(node.functionName));
+    pushRow(i18nString(UIStrings.selfSize), i18n.ByteUtilities.bytesToString(node.self));
+    pushRow(i18nString(UIStrings.totalSize), i18n.ByteUtilities.bytesToString(node.total));
     const linkifier = new Components.Linkifier.Linkifier();
     const link = linkifier.maybeLinkifyConsoleCallFrame(
         this.heapProfilerModel ? this.heapProfilerModel.target() : null, node.callFrame);
     if (link) {
-      pushEntryInfoRow(i18nString(UIStrings.url), (link.textContent as string));
+      pushRow(i18nString(UIStrings.url), (link.textContent as string));
     }
     linkifier.dispose();
-    return ProfileView.buildPopoverTable(entryInfo);
+    return ProfileView.buildPopoverTable(popoverInfo);
   }
 }

package/front_end/panels/profiler/HeapTimelineOverview.ts

@@ -215,7 +215,7 @@ export class HeapTimelineOverview extends Common.ObjectWrapper.eventMixin<EventT
     this.windowWidthRatio = this.windowRightRatio - this.windowLeftRatio;
   }
 
-  update(): void {
+  override update(): void {
     this.updateTimerId = null;
     if (!this.isShowing()) {
       return;

package/front_end/panels/profiler/IsolateSelector.ts

@@ -232,7 +232,7 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
         SDK.CPUProfilerModel.CPUProfilerModel, model && model.target().model(SDK.CPUProfilerModel.CPUProfilerModel));
   }
 
-  update(): void {
+  override update(): void {
     this.updateTotal();
     this.list.invalidateRange(0, this.items.length);
   }

package/front_end/panels/profiler/LiveHeapProfileView.ts

@@ -204,7 +204,9 @@ export class LiveHeapProfileView extends UI.Widget.VBox {
     } while (this.currentPollId === pollId);
   }
 
-  update(isolates: SDK.IsolateManager.Isolate[], profiles: (Protocol.HeapProfiler.SamplingHeapProfile|null)[]): void {
+  override update(
+      isolates: SDK.IsolateManager.Isolate[] = [],
+      profiles: (Protocol.HeapProfiler.SamplingHeapProfile|null)[] = []): void {
     const dataByUrl = new Map<string, {
       size: number,
       isolates: Set<SDK.IsolateManager.Isolate>,

package/front_end/panels/profiler/ProfileFlameChartDataProvider.ts

@@ -93,7 +93,7 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
     throw 'Not implemented.';
   }
 
-  prepareHighlightedEntryInfo(_entryIndex: number): Element|null {
+  preparePopoverElement(_entryIndex: number): Element|null {
     throw 'Not implemented.';
   }
 
@@ -208,7 +208,7 @@ export class ProfileFlameChart extends
     this.dispatchEventToListeners(PerfUI.FlameChart.Events.ENTRY_INVOKED, event.data);
   }
 
-  update(): void {
+  override update(): void {
     this.overviewPane.update();
     this.mainPane.update();
   }
@@ -373,7 +373,7 @@ export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEv
     this.updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
   }
 
-  update(): void {
+  override update(): void {
     this.updateTimerId = 0;
     const timelineData = this.timelineData();
     if (!timelineData) {

package/front_end/panels/profiler/ProfileView.ts

@@ -223,12 +223,12 @@ export class ProfileView extends UI.View.SimpleView implements UI.SearchableView
     this.linkifierInternal = new Components.Linkifier.Linkifier(maxLinkLength);
   }
 
-  static buildPopoverTable(entryInfo: {
+  static buildPopoverTable(popoverInfo: {
     title: string,
     value: string,
   }[]): Element {
     const table = document.createElement('table');
-    for (const entry of entryInfo) {
+    for (const entry of popoverInfo) {
       const row = table.createChild('tr');
       row.createChild('td').textContent = entry.title;
       row.createChild('td').textContent = entry.value;

package/front_end/panels/profiler/profileLauncherView.css

@@ -29,7 +29,7 @@
   margin-left: 22px;
 }
 
-.profile-launcher-view-content p [is="dt-checkbox"] {
+.profile-launcher-view-content p dt-checkbox {
   display: flex;
 }
 

package/front_end/panels/profiler/profilesSidebarTree.css

@@ -129,7 +129,7 @@ ol.tree-outline {
   margin-top: var(--sys-size-6);
   line-height: var(--sys-size-8);
 
-  &:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  &:hover:not(:has(dt-checkbox)) .selection {
     background-color: transparent;
   }
 }

package/front_end/panels/recorder/recorderController.css

@@ -65,7 +65,7 @@ select {
   padding: 0 var(--sys-size-6) 0 var(--sys-size-5);
   position: relative;
   color: var(--sys-color-on-surface);
-  background-color: var(--sys-color-cdt-base-container);
+  background-color: transparent;
   text-overflow: ellipsis;
   background-image: var(--combobox-dropdown-arrow);
   background-position: right center;

package/front_end/panels/security/CookieControlsTreeElement.ts

@@ -0,0 +1,18 @@
+// 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 * as IconButton from '../../ui/components/icon_button/icon_button.js';
+
+import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
+
+export class CookieControlsTreeElement extends SecurityPanelSidebarTreeElement {
+  constructor(title: string) {
+    super(title);
+    this.setLeadingIcons([IconButton.Icon.create('gear', 'cookie-icon')]);
+  }
+
+  override onselect(): boolean {
+    this.listItemElement.dispatchEvent(new CustomEvent('showFlagControls', {bubbles: true, composed: true}));
+    return true;
+  }
+}

package/front_end/panels/security/CookieControlsView.test.ts

@@ -0,0 +1,29 @@
+// 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 {createFakeSetting} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as Security from './security.js';
+
+describeWithMockConnection('CookieControlsView', () => {
+  let mockView: sinon.SinonStub;
+
+  beforeEach(() => {
+    mockView = sinon.stub();
+  });
+
+  it('should update setting', async () => {
+    const testSetting = createFakeSetting('test-control', true);
+    const view = new Security.CookieControlsView.CookieControlsView(undefined, mockView);
+    const reloadRequiredInfobarSpy =
+        sinon.spy(UI.InspectorView.InspectorView.instance(), 'displayDebuggedTabReloadRequiredWarning');
+    assert.strictEqual(testSetting.get(), true);
+
+    view.inputChanged(false, testSetting);
+    assert.strictEqual(testSetting.get(), false);
+    assert.isTrue(reloadRequiredInfobarSpy.calledOnce);
+  });
+});