Added back Chromium implementation of views to look for individual cookies stored per-website.

app/brave_settings_strings.grdp

@@ -507,6 +507,18 @@
   <message name="IDS_SETTINGS_SITE_SETTINGS_USE_EPHEMERAL_STORAGE" desc="Label for sites in site settings enabling cookies cleanup when all windows with the site are clsoed.">
     Clear on site close
   </message>
+  <message name="IDS_SETTINGS_SITE_COOKIES_LINK_TITLE" desc="The title of a link to navigate to site cookies subpage.">
+    Cookies and Site Data
+  </message>
+  <message name="IDS_SETTINGS_SITE_COOKIES_LINK_DESC" desc="The description of a link to navigate to site cookies subpage.">
+    Show all cookies and locally stored data for this site
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_COOKIE_SUBPAGE" desc="A label for cookie subpage, stating which site we're showing data for.">
+    <ph name="SITE">$1<ex>www.example.com</ex></ph> locally stored data
+  </message>
+  <message name="IDS_SETTINGS_SITE_SETTINGS_COOKIES_REMOVE_ALL" desc="A label for remove all cookies button.">
+    Remove All
+  </message>
 
   <!-- Settings / Privacy and security / Security -->
   <!-- Safe browsing -->

browser/resources/settings/brave_overrides/basic_page.ts

@@ -12,6 +12,7 @@ import '../brave_new_tab_page/brave_new_tab_page.js'
 import '../brave_rewards_page/brave_rewards_page.js'
 import '../brave_search_engines_page/brave_search_engines_page.js'
 import '../brave_sync_page/brave_sync_page.js'
+import '../brave_site_settings/brave_site_data_details_subpage.js'
 import '../brave_tor_page/brave_tor_subpage.js'
 import '../brave_wallet_page/brave_wallet_page.js'
 import '../brave_web3_domains_page/brave_web3_domains_page.js'

browser/resources/settings/brave_overrides/config.ts

@@ -17,3 +17,5 @@ import {RegisterPolymerComponentToIgnore} from 'chrome://resources/brave/polymer
 RegisterPolymerComponentToIgnore('add-site-dialog')
 RegisterPolymerComponentToIgnore('settings-site-settings-page')
 RegisterPolymerComponentToIgnore('settings-clear-browsing-data-dialog')
+RegisterPolymerComponentToIgnore('site-details')
+RegisterPolymerComponentToIgnore('settings-privacy-page')

browser/resources/settings/brave_overrides/privacy_page.ts

@@ -5,9 +5,9 @@
 
 // @ts-nocheck TODO(petemill): Define types and remove ts-nocheck
 
-import {RegisterPolymerTemplateModifications} from 'chrome://resources/brave/polymer_overriding.js'
+import {RegisterPolymerTemplateModifications, RegisterPolymerComponentReplacement} from 'chrome://resources/brave/polymer_overriding.js'
 import {getTrustedHTML} from 'chrome://resources/js/static_types.js'
-
+import {BraveSettingsPrivacyPageElement} from '../brave_privacy_page/brave_privacy_page.js'
 import {loadTimeData} from '../i18n_setup.js'
 
 function InsertGoogleSignInSubpage (
@@ -303,6 +303,52 @@ function InsertShieldsSubpage (
   }
 }
 
+function InsertCookiesSubpage (
+  templateContent: DocumentFragment,
+  pages: Element)
+{
+  pages.insertAdjacentHTML(
+    'beforeend',
+    getTrustedHTML`
+      <template is="dom-if" route-path="/cookies/detail" no-search>
+        <settings-subpage page-title="[[pageTitle]]">
+          <cr-button slot="subpage-title-extra" id="remove-all-button"
+            on-click="onRemoveAllCookiesFromSite_">
+          </cr-button>
+          <brave-site-data-details-subpage page-title="{{pageTitle}}">
+          </brave-site-data-details-subpage>
+        </settings-subpage>
+      </template>`)
+  const cookiesTemplate = templateContent.
+      querySelector('[route-path="/cookies/detail"]')
+  if (!cookiesTemplate) {
+    console.error(
+      '[Brave Settings Overrides] Couldn\'t find Cookies template')
+  } else {
+    const cookiesSubpage =
+      cookiesTemplate.content.querySelector('settings-subpage')
+    if (!cookiesSubpage) {
+      console.error(
+        '[Brave Settings Overrides] Couldn\'t find Cookies subpage')
+    } else {
+      const removeAllButton =
+        cookiesTemplate.content.getElementById('remove-all-button')
+      if (!removeAllButton) {
+        console.error(
+          '[Brave Settings Overrides] Couldn\'t find Cookies remove all button')
+      } else {
+        removeAllButton.textContent =
+          loadTimeData.getString('siteSettingsCookieRemoveAll');
+      }
+    }
+  }
+}
+
+RegisterPolymerComponentReplacement(
+  'settings-privacy-page',
+  BraveSettingsPrivacyPageElement
+)
+
 RegisterPolymerTemplateModifications({
   'settings-privacy-page': (templateContent) => {
     const pages = templateContent.getElementById('pages')
@@ -329,6 +375,7 @@ RegisterPolymerTemplateModifications({
         InsertSolanaSubpage(templateContent, pages)
       }
       InsertShieldsSubpage(templateContent, pages)
+      InsertCookiesSubpage(templateContent, pages)
     }
 
     if (!loadTimeData.getBoolean('isPrivacySandboxRestricted')) {

browser/resources/settings/brave_overrides/site_details.ts

@@ -5,10 +5,16 @@
 
 // @ts-nocheck TODO(petemill): Define types and remove ts-nocheck
 
-import {RegisterPolymerTemplateModifications} from 'chrome://resources/brave/polymer_overriding.js'
+import {RegisterPolymerTemplateModifications,RegisterPolymerComponentReplacement} from 'chrome://resources/brave/polymer_overriding.js'
 import {getTrustedHTML} from 'chrome://resources/js/static_types.js'
 
 import {loadTimeData} from '../i18n_setup.js'
+import {BraveSiteDetailsElement} from '../brave_site_details/brave_site_details.js'
+
+RegisterPolymerComponentReplacement(
+  'site-details',
+  BraveSiteDetailsElement
+)
 
 RegisterPolymerTemplateModifications({
   'site-details': (templateContent) => {
@@ -150,6 +156,25 @@ RegisterPolymerTemplateModifications({
         shieldsSettings.setAttribute(
             'label', loadTimeData.getString('siteSettingsShieldsStatus'))
       }
+      usageSection.insertAdjacentHTML(
+        'afterend',
+        getTrustedHTML`
+
+          <cr-link-row id="cookiesLink" on-click="onCookiesDetailClicked_">
+          </cr-link-row>
+
+        `)
+      const cookiesDetail =
+        templateContent.querySelector('#cookiesLink')
+      if (!cookiesDetail) {
+        console.error(
+          '[Brave Settings Overrides] Couldn\'t find cookies link')
+      } else {
+        cookiesDetail.setAttribute('label',
+            loadTimeData.getString('siteCookiesLinkLabel'))
+        cookiesDetail.setAttribute('sub-label',
+            loadTimeData.getString('siteCookiesLinkDesc'))
+      }
     }
   }
 })

browser/resources/settings/brave_privacy_page/brave_privacy_page.ts

@@ -0,0 +1,21 @@
+/* Copyright (c) 2023 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import {SettingsPrivacyPageElement} from '../privacy_page/privacy_page.js'
+
+// Extend SettingsPrivacyPageElement to add clear cookies handler.
+export class BraveSettingsPrivacyPageElement
+    extends SettingsPrivacyPageElement {
+  onRemoveAllCookiesFromSite_ () {
+    // Intentionally not casting to SiteDataDetailsSubpageElement, as this would
+    // require importing site_data_details_subpage.js and would endup in the
+    // main JS bundle.
+    const node =
+      this.shadowRoot!.querySelector('brave-site-data-details-subpage');
+    if (node) {
+      node.removeAll();
+    }
+  }
+}

browser/resources/settings/brave_routes.ts

@@ -55,6 +55,13 @@ export default function addBraveRoutes(r: Partial<SettingsRoutes>) {
     console.error('[Brave Settings Overrides] Could not find ADVANCED page', r)
   }
   r.BRAVE_NEW_TAB = r.BASIC.createSection('/newTab', 'newTab')
+  if (r.SITE_SETTINGS_SITE_DETAILS) {
+    r.BRAVE_SITE_SETTINGS_COOKIES_DETAILS =
+      r.SITE_SETTINGS_SITE_DETAILS.createChild('/cookies/detail');
+  } else {
+    console.error('[Brave Settings Overrides] could not find expected route /content/siteDetails')
+  }
+
   if (r.SITE_SETTINGS) {
     r.SITE_SETTINGS_AUTOPLAY = r.SITE_SETTINGS.createChild('autoplay')
     const isGoogleSignInFeatureEnabled = loadTimeData.getBoolean('isGoogleSignInFeatureEnabled')

browser/resources/settings/brave_site_details/brave_site_details.ts

@@ -0,0 +1,23 @@
+/* Copyright (c) 2022 The Brave Authors. All rights reserved.
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import {SiteDetailsElement} from '../site_settings/site_details.js'
+import {Router} from '../router.js';
+import {routes} from '../route.js';
+
+// Extend SiteDetailsElement to add navigation to cookies subpage.
+export class BraveSiteDetailsElement extends SiteDetailsElement {
+  onCookiesDetailClicked_ () {
+    const site = Router.getInstance().getQueryParameters().get('site');
+    if (!site) {
+      return;
+    }
+    const searchParams = new URLSearchParams(
+      'site=' +
+      (new URL(site)).host);
+    Router.getInstance().navigateTo(routes.BRAVE_SITE_SETTINGS_COOKIES_DETAILS,
+                                    searchParams);
+  }
+}

browser/resources/settings/brave_site_settings/brave_site_data_details_subpage.html

@@ -0,0 +1,44 @@
+    <style include="cr-shared-style settings-shared md-select iron-flex">
+      .cr-row {
+        padding-inline-start: 0;
+      }
+
+      [first] {
+        border-top: none;
+      }
+
+      cr-expand-button {
+        padding: 0 var(--cr-section-padding);
+      }
+
+      .separator {
+        margin-inline-start: 0;
+      }
+
+      .secondary,
+      .start {
+        max-width: 100%;
+        word-break: break-word;
+      }
+    </style>
+    <template is="dom-repeat" items="[[entries_]]">
+      <div class="cr-row" first$="[[!index]]">
+        <cr-expand-button class="flex" expanded="{{item.expanded_}}">
+          [[getEntryDescription_(item)]]
+        </cr-expand-button>
+        <div class="separator"></div>
+        <cr-icon-button class="icon-clear" data-id-path$="[[item.idPath]]"
+            on-click="onRemove_"></cr-icon-button>
+      </div>
+      <iron-collapse class="list-frame vertical-list"
+          opened="[[item.expanded_]]">
+        <template is="dom-repeat" items="[[getCookieNodes_(item)]]">
+          <div class="list-item two-line">
+            <div class="start">
+              [[item.label]]
+              <div class="secondary">[[item.content]]</div>
+            </div>
+          </div>
+        </template>
+      </iron-collapse>
+    </template>