Bug 1096413 - Draw border around url bar, search box, and back/forward buttons. r=Gijs

browser/themes/linux/devedition.css

@@ -30,12 +30,16 @@
 #back-button > .toolbarbutton-icon,
 #forward-button > .toolbarbutton-icon {
   margin: 0;
-  border: none;
-  padding: 2px 6px;
+  border: 1px solid var(--chrome-nav-bar-controls-border-color);
+  padding: 2px 5px;
   background: var(--chrome-nav-buttons-background);
   box-shadow: none !important;
 }
 
+#forward-button > .toolbarbutton-icon {
+  -moz-border-start: none;
+}
+
 /* Override a box shadow for disabled back button */
 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
   box-shadow: none !important;

browser/themes/osx/devedition.css

@@ -41,12 +41,21 @@
    background / shadows for different states */
 #back-button,
 #forward-button {
-  height: 22px !important;
+  height: 24px !important;
   box-shadow: none !important;
-  border: none !important;
+  border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   background: var(--chrome-nav-buttons-background) !important;
 }
 
+#forward-button {
+  -moz-border-start: none !important;
+}
+
+#forward-button > .toolbarbutton-icon {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 #back-button:hover:not([disabled="true"]),
 #forward-button:hover:not([disabled="true"]) {
   background: var(--chrome-nav-buttons-hover-background) !important;

browser/themes/shared/devedition.inc.css

@@ -23,6 +23,7 @@
   --chrome-nav-bar-separator-color: rgba(0,0,0,.2);
   --chrome-nav-buttons-background: #252C33;
   --chrome-nav-buttons-hover-background: #1B2127;
+  --chrome-nav-bar-controls-border-color: #1D2328;
   --chrome-selection-color: #fff;
   --chrome-selection-background-color: #074D75;
 
@@ -80,11 +81,12 @@
 
   --chrome-background-color: #E3E4E6;
   --chrome-color: #18191a;
-  --chrome-secondary-background-color: #f0f1f2;
+  --chrome-secondary-background-color: #f5f6f7;
   --chrome-navigator-toolbox-separator-color: #cccccc;
   --chrome-nav-bar-separator-color: #B6B6B8;
-  --chrome-nav-buttons-background: #f0f1f2;
+  --chrome-nav-buttons-background: #fcfcfc;
   --chrome-nav-buttons-hover-background: #DADBDB;
+  --chrome-nav-bar-controls-border-color: #ccc;
   --chrome-selection-color: #f5f7fa;
   --chrome-selection-background-color: #4c9ed9;
 
@@ -100,13 +102,13 @@
 
 
   /* Toolbar buttons */
-  --toolbarbutton-hover-background: #D7D7D8;
+  --toolbarbutton-hover-background: #eaeaea;
   --toolbarbutton-hover-boxshadow: none;
   --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1);
-  --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box
+  --toolbarbutton-active-background: #d7d7d8 border-box;
   --toolbarbutton-active-boxshadow: none;
-  --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3);
-  --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2);
+  --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15);
+  --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8;
   --toolbarbutton-combined-boxshadow: none;
   --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px);
 
@@ -187,6 +189,11 @@
   background-image: none;
 }
 
+.browserContainer > .findbar-textbox {
+  background-color: var(--url-and-searchbar-background-color) !important;
+  color: var(--url-and-searchbar-color);
+}
+
 /* Default findbar text color doesn't look good - Bug 1125677 */
 .browserContainer > findbar .findbar-find-status,
 .browserContainer > findbar .found-matches {
@@ -212,17 +219,20 @@ toolbar[brighttext] #downloads-indicator-counter {
 }
 
 /* URL bar and search bar*/
-/* XXX :root[devtoolstheme="dark"] is a workaround for bug 1096413 on the findbar. */
 #urlbar,
-#navigator-toolbox .searchbar-textbox,
-:root[devtoolstheme="dark"] .browserContainer > findbar .findbar-textbox {
+#navigator-toolbox .searchbar-textbox {
   background-color: var(--url-and-searchbar-background-color) !important;
   background-image: none !important;
   color: var(--url-and-searchbar-color) !important;
-  border: none !important;
+  border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   box-shadow: none !important;
 }
 
+#urlbar {
+  -moz-border-start: none !important;
+  opacity: 1 !important;
+}
+
 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
   overflow: -moz-hidden-unscrollable;
   clip-path: none;

browser/themes/windows/devedition.css

@@ -20,12 +20,16 @@
   border-radius: 0 !important;
   width: auto !important;
   height: auto !important;
-  padding: 2px 6px !important;
+  padding: 2px 5px !important;
   margin: 0 !important;
-  border: none !important;
+  border: 1px solid var(--chrome-nav-bar-controls-border-color) !important;
   box-shadow: none !important;
 }
 
+#forward-button > .toolbarbutton-icon {
+  -moz-border-start: none !important;
+}
+
 /* Override a box shadow for disabled back button */
 #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
   box-shadow: none !important;