Bug 1704071 - Increase address bar and search bar contrast during toolbar customization. r=harry
authorMarco Bonardo <mbonardo@mozilla.com>
Thu, 15 Apr 2021 14:21:54 +0000
changeset 576230 e76fec22745d6dcd3ce9cd8a79927841e8ed30ef
parent 576229 6f0a78a02bc6699ab0108172d772e5aa63e818cc
child 576231 38c66b4dbb0670f519d00edd7ded39a86341ac04
push id141165
push usermak77@bonardo.net
push dateThu, 15 Apr 2021 14:24:17 +0000
treeherderautoland@e76fec22745d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry
bugs1704071
milestone89.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1704071 - Increase address bar and search bar contrast during toolbar customization. r=harry To improve the visibility of these input fields this pathc adds a border based on currentColor and reuse the urlbar shadow. This is a small improvement over the status-quo, the applied transparencies are controlled by the drag'n'drop code. This issue exists also in pre-proton, so the styles apply regardless. Differential Revision: https://phabricator.services.mozilla.com/D112030
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -209,16 +209,23 @@ toolbarpaletteitem[mousedown] > toolbarb
   transform: scale(1.3);
 }
 
 toolbarpaletteitem[mousedown] > #search-container,
 toolbarpaletteitem[mousedown] > toolbaritem.toolbaritem-combined-buttons {
   transform: scale(1.1);
 }
 
+toolbarpaletteitem[mousedown] > #search-container > #searchbar,
+toolbarpaletteitem[mousedown] > #urlbar-container > #urlbar > #urlbar-background
+{
+  outline: 1px solid color-mix(in srgb, currentColor 60%, transparent);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
+}
+
 /* Override the toolkit styling for items being dragged over. */
 toolbarpaletteitem[place="toolbar"] {
   border-inline-width: 0;
   margin-inline: 0;
 }
 #widget-overflow-fixed-list > toolbarpaletteitem[place="menu-panel"] {
   border-block: 0 solid transparent;
 }