Bug 1706534 - Fix up popup notification link alignment and button focus rings, and clean up how we set the link color for dark themes. r=harry

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

browser/base/content/browser-sitePermissionPanel.js

@@ -985,7 +985,6 @@ var gPermissionPanel = {
 
     MozXULElement.insertFTLIfNeeded("browser/sitePermissions.ftl");
     let text = document.createXULElement("label", { is: "text-link" });
-    text.setAttribute("flex", "1");
     text.setAttribute("class", "permission-popup-permission-label");
     text.setAttribute("data-l10n-id", "site-permissions-open-blocked-popups");
     text.setAttribute(

browser/themes/shared/addons/extension-controlled.inc.css

@@ -26,7 +26,7 @@
   margin: 0 -1px 1px;
 }
 
-.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-warning,
+.extension-controlled-notification > .popup-notification-body-container > .popup-notification-body > .popup-notification-bottom-content > .popup-notification-warning,
 .extension-controlled-notification > .popup-notification-body-container > .popup-notification-icon {
   display: none;
 }

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

@@ -15,7 +15,6 @@
     --button-color: rgb(21,20,26);
 
     --focus-outline-color: var(--button-primary-bgcolor);
-    --focus-outline-offset: 2px;
 
     --checkbox-border-color: var(--input-border-color);
     --checkbox-unchecked-bgcolor: var(--button-bgcolor);

browser/themes/shared/browser.inc.css

@@ -66,7 +66,7 @@
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
-  --lwt-popup-brighttext-url-color: #74c0ff;
+  --lwt-brighttext-url-color: #00ddff;
 }
 
 @media (prefers-contrast) {
@@ -99,6 +99,7 @@
   --focus-outline-width: 2px;
   --focus-outline-color: currentColor;
   --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
+  --focus-outline-offset: 2px;
 }
 
 @media not (prefers-contrast) {
@@ -111,10 +112,6 @@
   }
 }
 
-:root[lwt-toolbar-field-focus-brighttext] {
-  --lwt-popup-brighttext-url-color: #00ddff;
-}
-
 /* Increase the contrast of urlbar boxes in brighttext LWT.
    In practice these are bumped-up --button(-hover)-bgcolor rules */
 :root:-moz-lwtheme-brighttext:not([lwt-default-theme-in-dark-mode]) {
@@ -143,20 +140,21 @@
   }
 }
 
-/* Increase contrast of UI links on dark themes */
+/* Set link color with proper contrast for WebExt themes */
 
-:root[lwt-popup-brighttext] panel .text-link {
-  color: var(--lwt-popup-brighttext-url-color);
-}
-
-#PersonalToolbar:-moz-lwtheme .text-link,
-#nav-bar:-moz-lwtheme .text-link {
+toolbar .text-link:-moz-lwtheme,
+panel .text-link:-moz-lwtheme {
   color: #0060df;
 }
 
-#PersonalToolbar[brighttext]:-moz-lwtheme .text-link,
-#nav-bar[brighttext]:-moz-lwtheme .text-link {
-  color: #45a1ff;
+toolbar[brighttext] .text-link:-moz-lwtheme,
+:root[lwt-popup-brighttext] panel .text-link {
+  color: var(--lwt-brighttext-url-color);
+}
+
+toolbar .text-link:-moz-lwtheme:not(:hover),
+panel .text-link:-moz-lwtheme:not(:hover) {
+  text-decoration: none;
 }
 
 /* Toolbar / content area border */

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -152,15 +152,6 @@
   align-items: center;
 }
 
-#customization-lwtheme-link:-moz-lwtheme {
-  color: inherit;
-  text-decoration: underline;
-}
-
-#customization-lwtheme-link:hover:-moz-lwtheme {
-  text-decoration: none;
-}
-
 #widget-overflow-fixed-list > toolbarpaletteitem:not([notransition])[place="menu-panel"],
 toolbarpaletteitem:not([notransition])[place="toolbar"] {
   transition: border-width var(--drag-drop-transition-duration) ease-in-out;

browser/themes/shared/urlbarView.inc.css

@@ -33,7 +33,7 @@
 }
 
 :root[lwt-toolbar-field-focus-brighttext] {
-  --urlbar-popup-url-color: var(--lwt-popup-brighttext-url-color);
+  --urlbar-popup-url-color: var(--lwt-brighttext-url-color);
   --urlbar-popup-action-color: #30e60b;
 }
 

toolkit/components/formautofill/default/FormAutofillPrompter.jsm

@@ -163,10 +163,9 @@ const CONTENT = {
             : null;
         },
         callback(event) {
-          let {
-            secondaryButton,
-            menubutton,
-          } = event.target.parentNode.parentNode.parentNode;
+          let { secondaryButton, menubutton } = event.target.closest(
+            "popupnotification"
+          );
           let checked = event.target.checked;
           Services.prefs.setBoolPref(
             "services.sync.engine.creditcards",

toolkit/content/widgets/popupnotification.js

@@ -70,7 +70,7 @@
       <hbox class="popup-notification-header-container"></hbox>
       <hbox align="start" class="popup-notification-body-container">
         <image class="popup-notification-icon"/>
-        <vbox flex="1" pack="start" class="popup-notification-body">
+        <vbox class="popup-notification-body">
           <hbox align="start">
             <vbox flex="1">
               <label class="popup-notification-origin header" crop="center"></label>
@@ -82,11 +82,11 @@
             </vbox>
             <toolbarbutton class="messageCloseButton close-icon popup-notification-closebutton tabbable" tooltiptext="&closeNotification.tooltip;"></toolbarbutton>
           </hbox>
-          <hbox class="popup-notification-learnmore-link-container">
+          <vbox class="popup-notification-bottom-content" align="start">
             <label class="popup-notification-learnmore-link" is="text-link">&learnMoreNoEllipsis;</label>
-          </hbox>
-          <checkbox class="popup-notification-checkbox" oncommand="PopupNotifications._onCheckboxCommand(event)"></checkbox>
-          <description class="popup-notification-warning"></description>
+            <checkbox class="popup-notification-checkbox" oncommand="PopupNotifications._onCheckboxCommand(event)"/>
+            <description class="popup-notification-warning"/>
+          </vbox>
         </vbox>
       </hbox>
       <hbox class="popup-notification-footer-container"></hbox>
@@ -150,10 +150,7 @@
     }
 
     appendNotificationContent(el) {
-      let nextSibling = this.querySelector(
-        ".popup-notification-body > .popup-notification-learnmore-link-container"
-      );
-      nextSibling.before(el);
+      this.querySelector(".popup-notification-bottom-content").before(el);
     }
   }
 

toolkit/themes/shared/global.inc.css

@@ -142,6 +142,11 @@ xul|label[disabled="true"] {
   text-decoration: underline;
 }
 
+.text-link:-moz-lwtheme {
+  color: inherit;
+  text-decoration: underline;
+}
+
 /* Textbox context menu */
 
 .textbox-contextmenu:-moz-locale-dir(rtl) {

toolkit/themes/shared/popupnotification.inc.css

@@ -145,8 +145,8 @@ popupnotification {
 }
 
 .panel-footer > button:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: var(--focus-outline-offset, 2px);
+  outline: var(--focus-outline, 1px dotted);
+  outline-offset: var(--focus-outline-offset, -2px);
 }
 
 .panel-footer > button:not([disabled]):hover {