Bug 1676074 - Part 1: Add a learn more link into the "Cross-site cookies" permission header description. r=johannh,fluent-reviewers,desktop-theme-reviewers,harry

Differential Revision: https://phabricator.services.mozilla.com/D112044

browser/base/content/browser-sitePermissionPanel.js

@@ -14,6 +14,12 @@ var gPermissionPanel = {
     if (!this._popupInitialized) {
       let wrapper = document.getElementById("template-permission-popup");
       wrapper.replaceWith(wrapper.content);
+
+      let baseURL = Services.urlFormatter.formatURLPref("app.support.baseURL");
+      document.getElementById(
+        "permission-popup-storage-access-permission-learn-more"
+      ).href = baseURL + "site-information-third-party-access";
+
       this._popupInitialized = true;
     }
   },

browser/components/controlcenter/content/permissionPanel.inc.xhtml

@@ -34,6 +34,10 @@
                   <label data-l10n-id="identity-permissions-storage-access-header" class="permission-popup-permission-header-label"/>
                 </hbox>
                 <description id="permission-popup-storage-access-permission-list-hint" data-l10n-id="identity-permissions-storage-access-hint"></description>
+                <label id="permission-popup-storage-access-permission-learn-more"
+                     is="text-link"
+                     data-l10n-id="identity-permissions-storage-access-learn-more">
+                </label>
               </vbox>
             </vbox>
           </vbox>

browser/locales/en-US/browser/browser.ftl

@@ -317,6 +317,7 @@ identity-https-only-info-no-upgrade = Unable to upgrade connection from HTTP.
 
 identity-permissions-storage-access-header = Cross-site cookies
 identity-permissions-storage-access-hint = These parties can use cross-site cookies and site data while you are on this site.
+identity-permissions-storage-access-learn-more = Learn more
 
 identity-permissions-reload-hint = You may need to reload the page for changes to apply.
 identity-clear-site-data =

browser/themes/shared/controlcenter/panel.inc.css

@@ -788,10 +788,13 @@ description#identity-popup-content-verifier,
 
 #permission-popup-storage-access-permission-list-hint {
   margin-top: 0.25em;
-  font-size: 0.85em;
+  color: var(--panel-description-color);
+}
+
+#permission-popup-storage-access-permission-list-hint,
+#permission-popup-storage-access-permission-learn-more {
   /* Matches offset for items - 3px margin + 16px icon + 10px margin */
   margin-inline-start: calc(3px + 16px + 10px);
-  color: var(--panel-description-color);
 }
 
 .protections-popup-category-icon,