Bug 1749722 - Clean up focus outline CSS for the bookmark panel. r=Itiel

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

browser/components/places/content/editBookmarkPanel.inc.xhtml

@@ -31,7 +31,7 @@
           collapsed="true">
       <label data-l10n-id="bookmark-overlay-location-2"
              control="editBMPanel_folderMenuList"/>
-      <hbox flex="1" align="center">
+      <hbox flex="1" align="stretch">
         <menulist id="editBMPanel_folderMenuList"
                   class="folder-icon"
                   flex="1"
@@ -74,7 +74,7 @@
           collapsed="true">
       <label data-l10n-id="bookmark-overlay-tags-2"
              control="editBMPanel_tagsField"/>
-      <hbox flex="1" align="center" role="combobox">
+      <hbox flex="1" align="stretch" role="combobox">
         <html:input id="editBMPanel_tagsField"
                  type="text"
                  is="autocomplete-input"

browser/themes/osx/browser.css

@@ -315,10 +315,6 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
   background-color: var(--arrowpanel-dimmed-further);
 }
 
-#editBMPanel_newFolderButton:-moz-focusring {
-  box-shadow: var(--focus-ring-box-shadow);
-}
-
 #editBMPanel_newFolderButton .button-text {
   -moz-box-flex: 1; /* push the button icon to the start side */
   text-align: start;
@@ -336,12 +332,6 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
   margin: 0;
 }
 
-#editBMPanel_folderTree:-moz-focusring,
-#editBMPanel_tagsSelector:-moz-focusring {
-  border-color: -moz-mac-focusring;
-  box-shadow: var(--focus-ring-box-shadow);
-}
-
 #editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
 #editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
   background-color: var(--arrowpanel-dimmed);

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -84,11 +84,6 @@ html|img#editBookmarkPanelFavicon[src] {
   margin-inline-start: 4px;
 }
 
-#editBMPanel_newFolderButton:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: var(--focus-outline-offset, 2px);
-}
-
 #editBMPanel_newFolderButton:hover {
   background-color: var(--button-hover-bgcolor);
 }
@@ -164,6 +159,7 @@ html|img#editBookmarkPanelFavicon[src] {
   min-height: 32px;
   color: var(--button-color);
   background-color: var(--button-bgcolor);
+  border-radius: 4px;
 }
 
 #editBookmarkPanel .expander-up:hover,
@@ -181,12 +177,6 @@ html|img#editBookmarkPanelFavicon[src] {
   background-color: var(--button-active-bgcolor);
 }
 
-#editBookmarkPanel .expander-up:focus-visible,
-#editBookmarkPanel .expander-down:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
-  outline-offset: 0;
-}
-
 #editBookmarkPanel .expander-up {
   list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
 }
@@ -204,15 +194,26 @@ html|img#editBookmarkPanelFavicon[src] {
   appearance: none;
   padding: 8px;
   border-radius: 4px;
-  border: 0;
-  outline: 1px solid var(--input-border-color, ThreeDShadow);
-  outline-offset: -1px;
+  border: 1px solid var(--input-border-color, ThreeDShadow);
   background-color: var(--input-bgcolor, Field);
   color: var(--input-color, FieldText);
   margin: 0;
 }
 
+/* Focus outlines */
+
+#editBookmarkPanel .expander-up:focus-visible,
+#editBookmarkPanel .expander-down:focus-visible,
+#editBMPanel_newFolderButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#editBMPanel_folderTree:focus-visible,
+#editBMPanel_tagsSelector:focus-visible,
 #editBookmarkPanelRows > vbox > html|input:focus-visible,
 #editBookmarkPanelRows > vbox > hbox > html|input:focus-visible {
-  outline: 2px solid var(--focus-outline-color);
+  border-color: transparent;
+  outline: var(--focus-outline);
+  outline-offset: -1px;
 }

toolkit/themes/shared/checkbox.inc.css

@@ -70,8 +70,8 @@ checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
   background-color: var(--checkbox-checked-active-bgcolor, color-mix(in srgb, currentColor 25%, -moz-accent-color));
 }
 
-checkbox:not([native]):-moz-focusring > .checkbox-check {
-  outline: 2px solid var(--focus-outline-color, -moz-accent-color);
+checkbox:not([native]):focus-visible > .checkbox-check {
+  outline: var(--focus-outline, 2px solid -moz-accent-color);
   outline-offset: var(--focus-outline-offset, 2px);
 }
 

toolkit/themes/shared/menulist.inc.css

@@ -32,8 +32,8 @@
   background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
 }
 
-:host(:not([native]):-moz-focusring) {
-  outline: 2px solid var(--focus-outline-color, -moz-accent-color);
+:host(:not([native]):focus-visible) {
+  outline: var(--focus-outline, 2px solid -moz-accent-color);
   outline-offset: var(--focus-outline-offset, 2px);
 }
 

toolkit/themes/shared/popupnotification.inc.css

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