Bug 1699528 - Restyle password panels for Proton. r=sfoster,Itiel

This restyling mainly focuses on the text inputs, but also adjusts some
margins so that they apply more consistently between permission panels
and the password panel.

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

browser/base/content/browser.css

@@ -1624,8 +1624,10 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
  * End Dialogs
  */
 
+@supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
 /* Password update/save doorhanger */
 #password-notification-username,
 #password-notification-password {
   margin-inline-start: 6px;
 }
+} /** END not Proton **/

browser/base/content/popup-notifications.inc

@@ -64,9 +64,10 @@
 
     <popupnotification id="password-notification" hidden="true">
       <popupnotificationcontent orient="vertical">
-        <label data-l10n-id="panel-save-update-username" control="password-notification-username"></label>
+        <label data-l10n-id="panel-save-update-username" control="password-notification-username" class="password-notification-label"></label>
         <stack>
           <html:input id="password-notification-username" 
+                      type="text"
                       class="ac-has-end-icon"
                       autocompletesearch="login-doorhanger-username"
                       autocompletepopup="PopupAutoComplete"
@@ -76,7 +77,7 @@
           <dropmarker id="password-notification-username-dropmarker"
                       class="ac-dropmarker"/>
         </stack>
-        <label data-l10n-id="panel-save-update-password" control="password-notification-password"></label>
+        <label data-l10n-id="panel-save-update-password" control="password-notification-password" class="password-notification-label"></label>
         <stack>
           <html:input id="password-notification-password" type="password"/>
           <dropmarker id="password-notification-password-dropmarker"

browser/themes/shared/browser-custom-colors.inc.css

@@ -37,6 +37,9 @@
 
     --error-text-color: #C50042;
 
+    --input-color: rgb(21,20,26);
+    --input-bgcolor: rgb(255,255,255);
+    --input-border-color: rgb(143,143,157);
     --input-error-border-color: #E22850;
   }
   } /** END Proton **/

browser/themes/shared/browser.inc.css

@@ -802,7 +802,7 @@ menupopup::part(drop-indicator) {
 .ac-dropmarker::part(icon) {
   list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
   -moz-context-properties: fill;
-  fill: -moz-DialogText;
+  fill: var(--input-color, -moz-DialogText);
 }
 
 .ac-has-end-icon {
@@ -872,7 +872,7 @@ popupnotificationcontent {
 }
 
 .popup-notification-checkbox {
-  margin-block: 8px;
+  margin-block: 8px 0;
 }
 
 .popup-notification-body-container {
@@ -898,12 +898,44 @@ popupnotificationcontent {
   list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }
 
-.popup-notification-body description,
-.popup-notification-body label,
-.popup-notification-body checkbox {
+.popup-notification-body :is(description, label, checkbox, input) {
   margin-inline-start: 0;
 }
 
+.popup-notification-body html|input {
+  padding: 8px;
+  border-radius: 4px;
+  border: 0;
+  outline: 1px solid var(--input-border-color, ThreeDShadow);
+  background-color: var(--input-bgcolor, Field);
+  color: var(--input-color, FieldText);
+}
+
+.popup-notification-body html|input:focus-visible {
+  outline: 2px solid var(--focus-outline-color);
+}
+
+/**
+ * There's already a margin-block-start of 8px on popupnotificationcontent,
+ * so the first label only needs 8px of margin-block-start to match the
+ * spec.
+ */
+.password-notification-label:first-of-type {
+  margin-block-start: 8px;
+}
+
+.password-notification-label:not(:first-of-type) {
+  margin-block-start: 16px;
+}
+
+#password-notification-visibilityToggle {
+  margin-block-start: 14px;
+}
+
+#password-notification-visibilityToggle > .checkbox-label-box > .checkbox-label {
+  opacity: 0.7;
+}
+
 } /** END Proton **/
 
 #tab-notification-deck {

toolkit/themes/shared/popupnotification.inc.css

@@ -117,8 +117,7 @@ popupnotification {
 
 .panel-footer {
   justify-content: flex-end;
-  margin-inline: 16px;
-  margin-bottom: 16px;
+  margin: 8px 16px 16px;
 }
 
 .panel-footer.panel-footer-menulike {