Bug 1892021, part 2 - Add credential chooser markup, style, and content - r=anti-tracking-reviewers,fluent-reviewers,desktop-theme-reviewers,flod,pbz,emilio

This is entirely behind a pref still, but having a prototype for consumers to play with
sooner than UI/UX review will be good.

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

browser/base/content/browser.xhtml

@@ -86,6 +86,7 @@
   <link rel="localization" href="toolkit/global/textActions.ftl"/>
   <link rel="localization" href="toolkit/printing/printUI.ftl"/>
   <!-- Untranslated FTL files -->
+  <link rel="localization" href="preview/credentialChooser.ftl" />
   <link rel="localization" href="preview/enUS-searchFeatures.ftl" />
   <link rel="localization" href="preview/interventions.ftl" />
   <link rel="localization" href="browser/shopping.ftl"/>

browser/base/content/popup-notifications.inc

@@ -177,10 +177,29 @@
         </vbox>
       </popupnotificationfooter>
     </popupnotification>
-
+    <popupnotification id="credential-chooser-notification" hidden="true">
+      <popupnotificationheader id="credential-chooser-header" orient="horizontal">
+        <html:div id="credential-chooser-header-container">
+          <html:span id="credential-chooser-header-text"/>
+        </html:div>
+      </popupnotificationheader>
+      <popupnotificationcontent id="credential-chooser-entry" orient="vertical">
+        <html:div id="credential-chooser-entry-selector-container"/>
+        <html:template id="template-credential-entry-list-item">
+          <html:label class="identity-credential-list-item" align="center">
+            <html:input type="radio" name="credential-entry" class="identity-credential-list-item-radio"></html:input>
+            <html:img class="identity-credential-list-item-icon"/>
+            <html:div class="identity-credential-list-item-label-stack">
+              <html:div class="identity-credential-list-item-label-primary"/>
+              <html:div class="identity-credential-list-item-label-secondary" hidden="true"/>
+            </html:div>
+          </html:label>
+        </html:template>
+      </popupnotificationcontent>
+    </popupnotification>
     <popupnotification id="identity-credential-notification" hidden="true">
       <popupnotificationheader id="identity-credential-header" orient="horizontal" hidden="true">
-        <html:div class="identity-credential-header-container">
+        <html:div id="identity-credential-header-container">
           <html:img class="identity-credential-header-icon"></html:img>
           <span id="identity-credential-header-text"></span>
         </html:div>

browser/locales/jar.mn

@@ -17,6 +17,7 @@
   preview/onboarding.ftl                           (../components/aboutwelcome/content/onboarding.ftl)
   preview/genai.ftl                                (../locales-preview/genai.ftl)
   preview/translations.ftl                         (../locales-preview/translations.ftl)
+  preview/credentialChooser.ftl                    (../../toolkit/components/credentialmanagement/credentialChooser.ftl)
   browser                                          (%browser/**/*.ftl)
   preview/profiles.ftl                             (../components/profiles/content/profiles.ftl)
   preview/backupSettings.ftl                       (../locales-preview/backupSettings.ftl)

browser/themes/shared/identity-credential-notification.css

@@ -2,14 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#identity-credential-notification {
+#identity-credential-notification,
+#credential-chooser-notification {
   --list-item-border: color-mix(in srgb, currentColor 10%, transparent);
   --list-item-checked-bgcolor: color-mix(in srgb, var(--button-primary-bgcolor) 6%, transparent);
   --list-item-checked-border: color-mix(in srgb, var(--button-primary-bgcolor) 20%, transparent);
-}
-
-@media (prefers-contrast) {
-  #identity-credential-notification {
+  @media (prefers-contrast) {
     --list-item-border: ThreeDShadow;
     --list-item-checked-bgcolor: transparent;
     --list-item-checked-border: AccentColor;
@@ -17,7 +15,8 @@
 }
 
 #identity-credential-provider-selector-container,
-#identity-credential-account-selector-container {
+#identity-credential-account-selector-container,
+#credential-chooser-entry-selector-container {
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -25,11 +24,13 @@
   overflow: auto;
 }
 
-#identity-credential-header-text {
+#identity-credential-header-text,
+#credential-chooser-header-text {
   font-weight: 600;
 }
 
-.identity-credential-header-container {
+#identity-credential-header-container,
+#credential-chooser-header-container {
   margin: 16px 16px -16px 16px;
   display: flex;
 }
@@ -49,7 +50,8 @@
   border-radius: 4px;
 }
 
-.identity-credential-list-item.checked {
+.identity-credential-list-item.checked,
+.identity-credential-list-item:has(> input:checked) {
   background-color: var(--list-item-checked-bgcolor);
   border-color: var(--list-item-checked-border);
 }

browser/themes/shared/notification-icons.css

@@ -193,7 +193,8 @@
   list-style-image: url(chrome://browser/skin/fingerprint.svg);
 }
 
-#identity-credential-notification-icon {
+#identity-credential-notification-icon,
+#credential-chooser-notification-icon {
   list-style-image: url(chrome://browser/skin/login.svg);
 }
 

toolkit/components/credentialmanagement/credentialChooser.ftl

@@ -0,0 +1,24 @@
+# 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 http://mozilla.org/MPL/2.0/.
+
+## Credential Chooser panel
+##
+## Variables:
+##  $host (String): the hostname of the website that the user is on.
+##  $provider (String): the hostname of a website the user has an account on, but is not the one they are on now (e.g. "apple.com", "accounts.google.com", "identity.example.com")
+
+credential-chooser-header = Would you like to sign in to { $host }?
+credential-chooser-identity = Use a { $provider } account
+credential-chooser-sign-in-button =
+    .label = Sign In
+    .accesskey = S
+credential-chooser-cancel-button =
+    .label = Cancel
+    .accesskey = C
+credential-chooser-urlbar-anchor =
+    .tooltiptext = Open credential panel
+# This indicates that an account is initially from another website.
+# This is short for "we are getting this thing from { $provider } in English.
+# This is displayed on a new line below the provider's name.
+credential-chooser-host-descriptor = from { $provider }