backout Android theme: Txul increase 23.2% on Nokia n900 mobile

mobile/app/profile/extensions/feedback@mobile.mozilla.org/content/overlay.xul

@@ -48,7 +48,7 @@
   <script type="application/javascript" src="chrome://feedback/content/overlay.js"/>
 
   <box id="panel-controls">
-    <toolbarbutton id="tool-feedback" autocheck="true" type="radio" group="1" linkedpanel="feedback-container" insertafter="tool-addons"/>
+    <toolbarbutton id="tool-feedback" autocheck="true" type="radio" group="1" class="panel-button button-image" linkedpanel="feedback-container" insertafter="tool-addons"/>
   </box>
 
   <deck id="panel-items">

mobile/app/profile/extensions/feedback@mobile.mozilla.org/skin/overlay.css

@@ -1,5 +1,13 @@
 #tool-feedback {
-  list-style-image: url("chrome://feedback/skin/beta-64.png");
+  list-style-image: url("chrome://feedback/skin/beta-32.png");
+  background: url(chrome://browser/skin/images/toolbarbutton-default-64.png) no-repeat !important;
+  width: 64px;
+  height: 64px;
+}
+
+#tool-feedback:not([disabled="true"]):hover:active,
+#tool-feedback[checked="true"] {
+  background: url(chrome://browser/skin/images/toolbarbutton-active-64.png) no-repeat !important;
 }
 
 #feedback-feedback-happy {

mobile/chrome/content/bindings.xml

@@ -1383,8 +1383,8 @@
       <children includes="vbox"/>
       <xul:hbox class="content-navigator-box panel-dark" pack="end">
         <children includes="textbox|arrowscrollbox"/>
-        <xul:toolbarbutton anonid="previous-button" class="content-navigator-item previous-button" xbl:inherits="command=previous"/>
-        <xul:toolbarbutton anonid="next-button" class="content-navigator-item next-button" xbl:inherits="command=next"/>
+        <xul:toolbarbutton anonid="previous-button" class="content-navigator-item button-image previous-button" xbl:inherits="command=previous"/>
+        <xul:toolbarbutton anonid="next-button" class="content-navigator-item button-image next-button" xbl:inherits="command=next"/>
       </xul:hbox>
     </content>
 

mobile/chrome/content/browser.xul

@@ -217,7 +217,7 @@
                 onclosetab="BrowserUI.closeTab(this)"
                 onclosereloadtab="this._container.removeTab(this)"/>
           <hbox id="tabs-controls">
-            <toolbarbutton id="newtab-button" class="button-control" command="cmd_newTab"/>
+            <toolbarbutton id="newtab-button" class="button-image" command="cmd_newTab"/>
           </hbox>
         </vbox>
       </vbox>
@@ -231,10 +231,10 @@
               <box id="toolbar-moveable-container">
                 <toolbar id="toolbar-main" class="panel-dark window-width">
 #ifdef MOZ_PLATFORM_MAEMO
-                  <toolbarbutton id="tool-app-switch" oncommand="BrowserUI.switchTask();"/>
+                  <toolbarbutton id="tool-app-switch" class="button-image" oncommand="BrowserUI.switchTask();"/>
 #endif
                   <hbox id="urlbar-container" flex="1" observes="bcast_urlbarState">
-                    <box id="identity-box" class="urlbar-cap-button"
+                    <box id="identity-box"
                          onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
                          onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
                       <box id="urlbar-image-box" mousethrough="always">
@@ -258,14 +258,15 @@
                              ontextentered="BrowserUI.goToURI();"
                              readonly="true"
                              clickSelectsAll="true"/>
-                    <hbox id="urlbar-icons" class="urlbar-cap-button" observes="bcast_urlbarState">
-                      <toolbarbutton id="tool-reload" oncommand="CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload' : 'cmd_reload');"/>
-                      <toolbarbutton id="tool-stop" command="cmd_stop"/>
-                      <toolbarbutton id="tool-search" command="cmd_opensearch"/>
+                    <hbox id="urlbar-icons" observes="bcast_urlbarState">
+                      <toolbarbutton id="tool-reload" class="urlbar-cap-button"
+                                     oncommand="CommandUpdater.doCommand(event.shiftKey ? 'cmd_forceReload' : 'cmd_reload');"/>
+                      <toolbarbutton id="tool-stop" class="urlbar-cap-button" command="cmd_stop"/>
+                      <toolbarbutton id="tool-search" class="urlbar-cap-button" command="cmd_opensearch"/>
                     </hbox>
                   </hbox>
 #ifndef ANDROID
-                  <toolbarbutton id="tool-app-close" class="urlbar-button" command="cmd_close"/>
+                  <toolbarbutton id="tool-app-close" class="urlbar-button button-image" command="cmd_close"/>
 #endif
                 </toolbar>
               </box>
@@ -304,11 +305,11 @@
         <spacer class="toolbar-height" mousethrough="always"/>
 
         <vbox id="browser-controls" style="overflow: -moz-hidden-unscrollable;" class="panel-dark" flex="1">
-          <toolbarbutton id="tool-star" class="button-control" command="cmd_star"/>
-          <toolbarbutton id="tool-back" class="button-control" command="cmd_back"/>
-          <toolbarbutton id="tool-forward" class="button-control" command="cmd_forward"/>
+          <toolbarbutton id="tool-star" class="browser-control-button button-image" command="cmd_star"/>
+          <toolbarbutton id="tool-back" class="browser-control-button button-image" command="cmd_back"/>
+          <toolbarbutton id="tool-forward" class="browser-control-button button-image" command="cmd_forward"/>
           <toolbarspring/>
-          <toolbarbutton id="tool-panel-open" class="button-control" command="cmd_panel"/>
+          <toolbarbutton id="tool-panel-open" class="page-button button-image" command="cmd_panel"/>
         </vbox>
       </vbox>
     </scrollbox>
@@ -373,14 +374,14 @@
     </vbox>
 
     <vbox id="panel-container" class="panel-dark window-width window-height" style="-moz-stack-sizing: ignore" left="10000" hidden="true">
-      <hbox id="panel-controls" class="panel-row-header" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
-        <toolbarbutton id="tool-preferences" type="radio" group="1" checked="true" linkedpanel="prefs-container"/>
-        <toolbarbutton id="tool-downloads" type="radio" group="1" linkedpanel="downloads-container"/>
-        <toolbarbutton id="tool-addons" type="radio" group="1" linkedpanel="addons-container"/>
-        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" linkedpanel="console-container"/>
+      <hbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
+        <toolbarbutton id="tool-preferences" type="radio" group="1" checked="true" class="panel-button button-image" linkedpanel="prefs-container"/>
+        <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button button-image" linkedpanel="downloads-container"/>
+        <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button button-image" linkedpanel="addons-container"/>
+        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" class="panel-button button-image" linkedpanel="console-container"/>
 #ifndef ANDROID
         <spacer flex="1"/>
-        <toolbarbutton id="tool-panel-close" command="cmd_panel"/>
+        <toolbarbutton id="tool-panel-close" class="button-image" command="cmd_panel"/>
 #endif
       </hbox>
       <vbox flex="1">
@@ -499,7 +500,7 @@
 
     <vbox id="awesome-panels" hidden="true">
       <!-- Awesome header row -->
-      <hbox id="awesome-header" class="panel-row-header">
+      <hbox id="awesome-header">
         <toolbarbutton type="radio" group="awesome-header" label="&allPagesHeader.label;" command="cmd_openLocation" class="choice-all show-text" checked="true"/>
         <toolbarbutton type="radio" group="awesome-header" label="&bookmarksHeader.label;" command="cmd_bookmarks" class="choice-bookmarks show-text"/>
         <toolbarbutton type="radio" group="awesome-header" label="&historyHeader.label;" command="cmd_history" class="choice-history show-text"/>

mobile/chrome/content/tabs.xml

@@ -9,10 +9,10 @@
   <binding id="documenttab">
     <content>
       <xul:stack anonid="page" class="documenttab-container" flex="1">
-        <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" width="104" height="65" moz-opaque="true" empty="true"
+        <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" width="106" height="64" moz-opaque="true" empty="true"
           onclick="document.getBindingParent(this)._onClick()"/>
-        <xul:hbox class="documenttab-reload" left="0" top="0" width="104" height="65" onclick="document.getBindingParent(this)._onUndo();"/>
-        <xul:hbox class="documenttab-close-container" left="0" top="0" height="65" width="55" align="center" onclick="document.getBindingParent(this)._onClose()">
+        <xul:hbox class="documenttab-reload" left="0" top="0" width="122" height="80" onclick="document.getBindingParent(this)._onUndo();"/>
+        <xul:hbox class="documenttab-close-container" left="0" top="10" height="64" width="55" align="center" onclick="document.getBindingParent(this)._onClose()">
           <xul:image anonid="close" class="documenttab-close" mousethrough="always"/>
         </xul:hbox>
       </xul:stack>
@@ -60,8 +60,8 @@
         <parameter name="height"/>
         <body>
           <![CDATA[
-            const tabWidth = 104;
-            const tabHeight = 65;
+            const tabWidth = 106;
+            const tabHeight = 64;
 
             let ratio = tabHeight / tabWidth;
             height = width * ratio;
@@ -180,13 +180,10 @@
           <![CDATA[
             let firstBox = this.children.firstChild.getBoundingClientRect();
             let lastBox = this.children.lastChild.getBoundingClientRect();
-
-            // XXX we can do better than using a constant here
-            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(this.children.getBoundingClientRect().height / (firstBox.heigth + 4)));
+            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(this.children.style.height / firstBox.height));
             if (this._columnsCount != columnsCount) {
               let width = Math.max(lastBox.right - firstBox.left, firstBox.right - lastBox.left);
-              // XXX we can do better than using a constant
-              this.children.style.width = (width + 20) + "px";
+              this.children.style.width = width + "px";
               this._columnsCount = columnsCount;
             }
           ]]>

mobile/themes/core/browser.css

@@ -39,7 +39,7 @@
 #toolbar-main {
   -moz-appearance: none;
   -moz-box-align: center;
-  padding: 0 8px; /* core spacing */
+  padding: 4px 8px; /* half core spacing & core spacing */
   border: none;
 }
 
@@ -59,14 +59,14 @@ toolbarbutton.urlbar-button {
 /* MAEMO (and desktop) only */
 #tool-app-switch {
   margin-top: -8px; /* force the button to go to the edge */
+  margin-bottom: -8px; /* force the button to go to the edge */
   -moz-margin-start: -8px; /* force the button to go to the edge */
+  -moz-padding-start: 8px !important; /* re-center the image */
   min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
   min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
   visibility: collapse;
   -moz-margin-end: 8px; /* core spacing */
   list-style-image: url("chrome://browser/skin/images/task-switch-40.png");
-  background-color: transparent !important;
-  border: none !important;
 }
 
 #tool-app-switch:hover:active {
@@ -81,13 +81,13 @@ toolbarbutton.urlbar-button {
 /* MAEMO (and desktop) only */
 #tool-app-close {
   margin-top: -8px; /* force the button to go to the edge */
-  -moz-margin-end: -8px !important; /* force the button to go to the edge */
+  margin-bottom: -8px; /* force the button to go to the edge */
+  -moz-margin-end: -8px; /* force the button to go to the edge */
+  -moz-padding-end: 8px !important; /* re-center the image */
   min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
   min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
   visibility: collapse;
   list-style-image: url("chrome://browser/skin/images/task-close-40.png");
-  background-color: transparent !important;
-  border: none !important;
 }
 
 #tool-app-close:hover:active {
@@ -116,164 +116,24 @@ toolbarbutton.urlbar-button {
 }
 %endif
 
-/* URL bar ----------------------------------------------------------------- */
-#urlbar-container {
-  color: #000;
-  -moz-border-radius: 8px;
-  margin: 8px;
-  box-shadow: 0px 3px 3px rgba(0,0,0,0.4);
-}
-
-#urlbar-container[mode="edit"] > #identity-box {
-  visibility: collapse;
-}
-
-#urlbar-container[mode="edit"] > #urlbar-edit {
-  background: -moz-linear-gradient(bottom, rgb(255,255,255) 20%, rgb(201,207,218) 100%);
-  box-shadow: inset rgba(0, 0, 0, 0.2) 0px 4px 0px, inset rgba(0, 0, 0, 0.4) 0px 1px 0px, rgba(255,255,255,0.2) 0px 2px 0px;
-  border-left: none;
-  border-right: 1px solid rgba(0,0,0,0.5);
-}
-
-#urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(ltr) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
-}
-
-#urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
-}
-
 /* URL bar cap buttons */
-#urlbar-container .urlbar-cap-button {
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 0 solid transparent;
-  min-width: 64px !important;
-  max-width: 64px !important;
-  -moz-box-flex: 1;
-  -moz-box-align: center;
-  -moz-box-pack: center;
-  background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(230,234,241) 100%);
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0px -3px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px;
-}
-
-#urlbar-container .urlbar-cap-button[open="true"],
-#urlbar-container .urlbar-cap-button:hover:active {
-  background: -moz-radial-gradient(circle, rgb(189,192,197) 40%, rgb(125,133,148) 100%);
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0px -3px 0px, inset rgba(0, 0, 0, 0.2) 0px 0px 12px, rgba(0, 0, 0, 0.2) 0px 3px 1px;
-}
-
-/* left cap button --------------------------------------------------------- */
-#identity-box {
-  border-right: 1px solid rgba(118,121,126,0.5) !important;
-}
-
-#identity-box:-moz-locale-dir(ltr) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
-}
-
-#identity-box:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
-}
-
-#identity-box[open],
-#identity-box:hover:active {
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-/* add special color */
-#identity-box[mode="verifiedIdentity"] {
-  background: -moz-linear-gradient(top, rgb(137,215,21) 0%, rgb(92,151,16) 100%);
-}
-
-#identity-box[mode="verifiedIdentity"]:hover:active,
-#identity-box[mode="verifiedIdentity"][open] {
-  background: -moz-radial-gradient(circle, rgb(115,181,16) 40%, rgb(68,108,17) 100%);
-}
-
-/* add special color */
-#identity-box[mode="verifiedDomain"] {
-  background: -moz-linear-gradient(top, rgb(101,121,227) 0%, rgb(77,95,186) 100%);
-}
-
-#identity-box[mode="verifiedDomain"]:hover:active,
-#identity-box[mode="verifiedDomain"][open] {
-  background: -moz-radial-gradient(circle, rgb(86,102,189) 40%, rgb(62,72,124) 100%);
-}
-
-#urlbar-throbber[loading] {
-  list-style-image: url("chrome://browser/skin/images/throbber.png");
-}
-
-#urlbar-favicon {
-  width: 32px;
-  height: 32px;
-}
-
-#urlbar-favicon[src=""] {
-  list-style-image: url("chrome://browser/skin/images/favicon-default-30.png");
-}
-
-/* Main urlbar textbox */
-#urlbar-edit {
-  -moz-appearance: none !important;
-  min-height: 64px;
-  margin: 0 !important;
-  padding: 0 !important;
-  -moz-border-radius: 0;
-
-  border: 0 solid transparent;
-  border-left: 1px solid white;
-  border-right: 1px solid white;
-  background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(230,234,241) 100%);
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0px -3px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px;
-}
-
-#urlbar-edit:not([open]):hover:active {
-  background-color: #8db8d8;
-}
-
-#urlbar-edit > hbox > .textbox-input-box {
+toolbarbutton.urlbar-cap-button {
   margin: 0;
+  padding: 0;
+  min-width: 0 !important;
+  min-height: 0 !important;
+  -moz-box-flex: 1;
 }
 
-#urlbar-edit > hbox > hbox > .textbox-input {
-  min-height: 60px;
-  text-indent: 8px;
-}
-
-/* Right cap button --------------------------------------------------------- */
-#urlbar-icons {
-  border-left: 1px solid rgba(118,121,126,0.5) !important;
-}
-
-#urlbar-icons:-moz-locale-dir(ltr) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
-}
-
-#urlbar-icons:-moz-locale-dir(rtl) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
-}
-
-#urlbar-icons:hover:active {
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-#urlbar-icons > #tool-reload {
+#tool-reload {
   list-style-image: url("chrome://browser/skin/images/reload-30.png");
 }
 
-#urlbar-icons > #tool-stop {
+#tool-stop {
   list-style-image: url("chrome://browser/skin/images/stop-30.png");
 }
 
-#urlbar-icons > #tool-search {
+#tool-search {
   list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png");
 }
 
@@ -292,67 +152,256 @@ toolbarbutton.urlbar-button {
   visibility: collapse;
 }
 
-
-/* right toolbar (browser controls) ---------------------------------------- */
-#browser-controls {
-  -moz-box-align: start;
-  padding: 0;
-  -moz-border-start: 3px solid #262629;
-  background: -moz-linear-gradient(top, #5e6166, #343536);
-  min-width: 80px !important;
+/* URL bar ----------------------------------------------------------------- */
+#urlbar-container {
+  color: #000;
+  -moz-box-align: center;
 }
 
-toolbarbutton.button-control {
-  padding: 0 !important;
-  min-width: 80px !important;
-  border-top: 1px solid rgba(255,255,255,0.2) !important;
-  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
-  background-color: transparent !important;
+/* creates the left endcap */
+#identity-box {
+  min-height: 64px;
+  min-width: 64px;
+  background: url("images/leftcap-default-64.png") top left no-repeat;
   -moz-box-align: center;
   -moz-box-pack: center;
 }
 
-toolbarbutton.button-control[disabled="true"] {
-  opacity: 0.5;
+#identity-box:-moz-locale-dir(rtl) {
+  background: url("images/rightcap-default-64.png") top left no-repeat;
 }
 
-toolbarbutton.button-control:not([disabled="true"]):hover:active {
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.1) 0px -3px 6px, inset rgba(0, 0, 0, 0.2) 0px 3px 6px;
-  background-color: rgba(0,0,0,0.2);
-  border-top: none;
+#identity-box:hover:active,
+#identity-box[open] {
+  background: url("images/leftcap-active-64.png");
+}
+
+#identity-box:hover:active:-moz-locale-dir(rtl),
+#identity-box[open]:-moz-locale-dir(rtl) {
+  background: url("images/rightcap-active-64.png");
+}
+
+/* add special color */
+#identity-box[mode="verifiedIdentity"] {
+  background: url("images/leftcapEV-default-64.png");
+}
+
+#identity-box[mode="verifiedIdentity"]:-moz-locale-dir(rtl) {
+  background: url("images/rightcapEV-default-64.png");
+}
+
+#identity-box[mode="verifiedIdentity"]:hover:active,
+#identity-box[mode="verifiedIdentity"][open] {
+  background: url("images/leftcapEV-active-64.png");
+}
+
+#identity-box[mode="verifiedIdentity"]:hover:active:-moz-locale-dir(rtl),
+#identity-box[mode="verifiedIdentity"][open]:-moz-locale-dir(rtl) {
+  background: url("images/rightcapEV-active-64.png");
+}
+
+/* add special color */
+#identity-box[mode="verifiedDomain"] {
+  background: url("images/leftcapSSL-default-64.png");
+}
+
+#identity-box[mode="verifiedDomain"]:-moz-locale-dir(rtl) {
+  background: url("images/rightcapSSL-default-64.png");
+}
+
+#identity-box[mode="verifiedDomain"]:hover:active,
+#identity-box[mode="verifiedDomain"][open] {
+  background: url("images/leftcapSSL-active-64.png");
+}
+
+#identity-box[mode="verifiedDomain"]:hover:active:-moz-locale-dir(rtl),
+#identity-box[mode="verifiedDomain"][open]:-moz-locale-dir(rtl) {
+  background: url("images/rightcapSSL-active-64.png");
+}
+
+#urlbar-container[mode="edit"] > #identity-box {
+  visibility: collapse;
+}
+
+#urlbar-throbber[loading] {
+  list-style-image: url("chrome://browser/skin/images/throbber.png");
+}
+
+#urlbar-favicon {
+  width: 32px;
+  height: 32px;
+}
+
+#urlbar-favicon[src=""] {
+  list-style-image: url("chrome://browser/skin/images/favicon-default-30.png");
+}
+
+#urlbar-edit {
+  -moz-appearance: none !important;
+  min-height: 64px;
+  background: #fff;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  border-top: 1px solid #262629 !important;
+  border-bottom: 3px solid #262629 !important;
+  -moz-border-radius: 0;
+}
+
+#urlbar-edit:not([open]):hover:active {
+  background-color: #8db8d8;
+}
+
+#urlbar-edit > hbox > .textbox-input-box {
+  margin: 0;
+}
+
+#urlbar-edit > hbox > hbox > .textbox-input {
+  min-height: 60px;
+  text-indent: 8px;
+}
+
+#urlbar-container[mode="edit"] > #urlbar-edit {
+  -moz-border-start: 3px solid #262629 !important;
+  -moz-border-radius-topleft: 10px;
+  -moz-border-radius-bottomleft: 10px;
+}
+
+#urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(rtl) {
+  -moz-border-radius-topleft: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topright: 10px;
+  -moz-border-radius-bottomright: 10px;
+}
+
+/* make sure this endcap matches the other endcap */
+#urlbar-icons {
+  min-height: 64px;
+  min-width: 64px;
+  background: url("images/rightcap-default-64.png") top right no-repeat;
+  -moz-box-pack: center;
+}
+
+#urlbar-icons:-moz-locale-dir(rtl) {
+  background: url("images/leftcap-default-64.png") top right no-repeat;
+}
+
+#urlbar-icons:hover:active {
+  background: url("images/rightcap-active-64.png");
+}
+
+#urlbar-icons:hover:active:-moz-locale-dir(rtl) {
+  background: url("images/leftcap-active-64.png");
+}
+
+/* right toolbar (browser controls) ---------------------------------------- */
+#browser-controls {
+  -moz-box-align: start;
+  padding: 0 8px; /* core spacing + tiny bit for a rounding issue? */
+  -moz-border-start: 3px solid #262629;
+}
+
+toolbarbutton.browser-control-button,
+toolbarbutton.panel-button,
+toolbarbutton.page-button {
+  /* space out the buttons a bit vertically */
+  margin-bottom: 8px; /* core spacing */
 }
 
 #tool-star {
   list-style-image: url("chrome://browser/skin/images/bookmark-default-64.png");
 }
 
+#tool-star:hover:active {
+  list-style-image: url("chrome://browser/skin/images/bookmark-active-64.png");
+}
+
 #tool-star[starred="true"] {
   list-style-image: url("chrome://browser/skin/images/bookmarked-default-64.png");
 }
 
-#tool-back,
-#tool-forward:-moz-locale-dir(rtl) {
+#tool-star[starred="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/bookmarked-active-64.png");
+}
+
+#tool-back {
   list-style-image: url("chrome://browser/skin/images/back-default-64.png");
 }
 
-#tool-back:-moz-locale-dir(rtl),
+#tool-back:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/forward-default-64.png");
+}
+
+#tool-back:hover:active {
+  list-style-image: url("chrome://browser/skin/images/back-active-64.png");
+}
+
+#tool-back:hover:active:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/forward-active-64.png");
+}
+
+#tool-back[disabled="true"],
+#tool-back[disabled="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/back-disabled-64.png");
+}
+
+#tool-back[disabled="true"]:-moz-locale-dir(rtl),
+#tool-back[disabled="true"]:hover:active:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/forward-disabled-64.png");
+}
+
 #tool-forward {
   list-style-image: url("chrome://browser/skin/images/forward-default-64.png");
 }
 
+#tool-forward:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/back-default-64.png");
+}
+
+#tool-forward:hover:active {
+  list-style-image: url("chrome://browser/skin/images/forward-active-64.png");
+}
+
+#tool-forward:hover:active:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/back-active-64.png");
+}
+
+#tool-forward[disabled="true"],
+#tool-forward[disabled="true"]:hover:active {
+  list-style-image: url("chrome://browser/skin/images/forward-disabled-64.png");
+}
+
+#tool-forward[disabled="true"]:-moz-locale-dir(rtl),
+#tool-forward[disabled="true"]:hover:active:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/back-disabled-64.png");
+}
+
+/* button overflows off the right edge */
 #tool-panel-open {
   list-style-image: url("chrome://browser/skin/images/settings-default-64.png");
+  -moz-margin-end: -40px; /* big number just to make sure the image overflows the edge */
+}
+
+#tool-panel-open:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/settings-default-rtl-64.png");
+}
+
+#tool-panel-open:not([disabled="true"]):hover:active {
+  list-style-image: url("chrome://browser/skin/images/settings-active-64.png");
+}
+
+#tool-panel-open:not([disabled="true"]):hover:active:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/settings-active-rtl-64.png");
 }
 
 %ifndef ANDROID
 /* MAEMO (and desktop) only */
 #tool-panel-close {
+  -moz-margin-end: -8px; /* force the button to go to the edge */
+  -moz-padding-end: 8px !important; /* re-center the image */
   min-width: 72px !important; /* 72, not 64 to make up for the negative margin */
-  max-width: 72px !important; /* 72, not 64 to make up for the negative margin */
   min-height: 72px !important; /* 72, not 64 to make up for the negative margin */
   list-style-image: url("chrome://browser/skin/images/task-back-40.png");
-  background: transparent !important;
-  border: none !important;
 }
 
 #tool-panel-close:hover:active {
@@ -373,30 +422,63 @@ toolbarbutton.button-control:not([disabled="true"]):hover:active {
 %endif
 
 /* browser tools panel UI   ------------------------------------------------ */
+toolbarbutton.panel-button {
+  margin-top: 4px; /* half of core spacing */
+  -moz-margin-end: 8px; /* core spacing */
+}
+
+#panel-controls {
+  /* match #browser-controls end padding */
+  -moz-padding-start: 8px; /* core spacing */
+  -moz-padding-end: 8px; /* core spacing */
+  -moz-box-pack: start;
+  border-bottom: 1px solid #262629;
+}
+
 .panel-header {
-  margin: 0;
-  padding: 4px 8px 8px 8px;
   font-weight: bold;
-  color: white !important;
-  background-color: rgb(101, 121, 227) !important;
+  color: white;
+  background-color: #6576eb;
+  margin: 0;
+  padding: 2px;
 }
 
 #tool-addons {
   list-style-image: url("chrome://browser/skin/images/addons-default-64.png");
 }
 
+#tool-addons:hover:active,
+#tool-addons[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/addons-active-64.png");
+}
+
 #tool-downloads {
   list-style-image: url("chrome://browser/skin/images/downloads-default-64.png");
 }
 
+#tool-downloads:hover:active,
+#tool-downloads[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/downloads-active-64.png");
+}
+
 #tool-preferences {
   list-style-image: url("chrome://browser/skin/images/preferences-default-64.png");
 }
 
+#tool-preferences:hover:active,
+#tool-preferences[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/preferences-active-64.png");
+}
+
 #tool-console {
   list-style-image: url("chrome://browser/skin/images/console-default-64.png");
 }
 
+#tool-console:hover:active,
+#tool-console[checked="true"] {
+  list-style-image: url("chrome://browser/skin/images/console-active-64.png");
+}
+
 /* addons panel UI   ------------------------------------------------------- */
 @media (min-width: 500px) {
   #addons-repo {
@@ -625,7 +707,6 @@ placeitem[ui="manage"] > .bookmark-manage > image {
   visibility: collapse;
 }
 
-/* autocomplete-items */
 .autocomplete-items {
   background-color: white;
 }
@@ -797,26 +878,138 @@ autocompleteresult.noresults > .autocomplete-item-container {
   color: grey;
 }
 
-/* Left sidebar (tabs)  ---------------------------------------------------- */
-#tabs-container {
-  -moz-border-end: 3px solid #262629;
-  background: -moz-linear-gradient(top, #5e6166, #343536);
+#awesome-header {
+  min-height: 70px; /* row size */
 }
 
-#tabs:-moz-locale-dir(rtl) {
-  -moz-box-align: start;
+#awesome-header > toolbarbutton {
+  -moz-user-focus: ignore;
+  -moz-user-select: none;
+  -moz-appearance: none;
+  color: white;
+  font-weight: bold;
+  border: 1px solid #36373b;
+  border-left-width: 0;
+  background-color: #797979;
+  -moz-box-flex: 1;
+}
+
+@media (max-width: 499px) {
+  #awesome-header > toolbarbutton {
+    -moz-box-orient: vertical;
+  }
+
+  #awesome-header > toolbarbutton .toolbarbutton-text {
+    font-size: 18px !important;
+  }
+}
+
+#awesome-header > toolbarbutton:last-child {
+  -moz-border-end-width: 0;
+}
+
+#awesome-header > toolbarbutton:hover:active,
+#awesome-header > toolbarbutton[checked="true"] {
+  border-color: #36373b !important;
+  color: white !important;
+  background: -moz-radial-gradient(#757575, #636363, #666769) !important;
+}
+
+#awesome-header > toolbarbutton[checked="true"],
+#awesome-header > toolbarbutton[disabled="true"] {
+  pointer-events: none;
+}
+
+#awesome-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#awesome-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
+  color: #aaa;
+}
+
+#awesome-header > toolbarbutton .toolbarbutton-icon {
+  min-width: 48px;
+  min-height: 48px;
+}
+
+#awesome-header > toolbarbutton .toolbarbutton-text {
+  text-align: left;
+}
+
+#awesome-header > toolbarbutton .toolbarbutton-text:-moz-locale-dir(rtl) {
+  text-align: right;
+}
+
+#awesome-header > toolbarbutton.choice-bookmarks {
+  list-style-image: url(chrome://browser/skin/images/bookmarks-48.png);
+}
+
+#awesome-header > toolbarbutton.choice-history {
+  list-style-image: url(chrome://browser/skin/images/history-48.png);
+}
+
+#awesome-header > toolbarbutton.choice-remotetabs {
+  list-style-image: url(chrome://browser/skin/images/remotetabs-48.png);
+}
+
+#awesome-header > toolbarbutton:hover:active,
+#awesome-header > toolbarbutton[checked="true"] {
+  border-color: #36373b !important;
+  color: white !important;
+  background: -moz-radial-gradient(#757575, #636363, #666769) !important;
+}
+
+#awesome-header > toolbarbutton[checked="true"],
+#awesome-header > toolbarbutton[disabled="true"] {
+  pointer-events: none;
+}
+
+#awesome-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+#awesome-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
+  color: #aaa;
+}
+
+#awesome-header > toolbarbutton .toolbarbutton-icon {
+  min-width: 48px;
+  min-height: 48px;
+}
+
+#awesome-header > toolbarbutton .toolbarbutton-text {
+  text-align: left;
+}
+
+#awesome-header > toolbarbutton.choice-bookmarks {
+  list-style-image: url(chrome://browser/skin/images/bookmarks-48.png);
+}
+
+#awesome-header > toolbarbutton.choice-history {
+  list-style-image: url(chrome://browser/skin/images/history-48.png);
+}
+
+#awesome-header > toolbarbutton.choice-remotetabs {
+  list-style-image: url(chrome://browser/skin/images/remotetabs-48.png);
+}
+
+/* Left sidebar (tabs)  ---------------------------------------------------- */
+#tabs-container {
+  -moz-padding-start: 4px; /* allow the thumbnails to get close to the edge */
+  -moz-padding-end: 8px; /* core spacing */
+  padding-bottom: 8px; /* core spacing */
+  -moz-border-end: 3px solid #262629;
 }
 
 #tabs > * {
   display: block;
-  -moz-column-width: 121px;
+  -moz-column-width: 128px;
   -moz-column-gap: 0;
   -moz-user-focus: ignore;
+  margin: 0;
   padding: 0;
   background-color: transparent;
-  margin: 0;
-  -moz-padding-end: 8px; /* core spacing */
-  -moz-padding-start: 4px; /* allow the thumbnails to get close to the edge */
 }
 
 #tabs documenttab:only-child .documenttab-close {
@@ -825,30 +1018,25 @@ autocompleteresult.noresults > .autocomplete-item-container {
 
 #tabs-controls {
   margin-top: 8px; /* core spacing */
-  -moz-box-pack: center;
+  -moz-box-pack: start;
 }
 
 documenttab {
   /* display:block allow us to change the line-height, it won't work otherwise */
   display: block;
+  width: 128px;
+  -moz-margin-start: 8px; /* core spacing */
   line-height: 0;
-
-  -moz-margin-start: 10px;
-  margin-bottom: 8px;
-  width: 121px;
-  padding: 8px;
-  background: -moz-linear-gradient(top, rgb(101,121,227) 50%, rgb(82,98,183) 90%);
-  -moz-box-shadow: inset rgba(255,255,255,0.4) 0px 1px 1px, inset rgba(0, 0, 0, 0.2) 0px -3px 0px, rgba(0, 0, 0, 0.3) 0px 2px 1px;
-  -moz-border-radius: 4px;
-  opacity: 0.5;
 }
 
 documenttab .documenttab-thumbnail {
+  /* keep the unselected thumbnails aligned with the selected one */
+  border: 8px solid #36373b;
   background-color: white;
 }
 
 documenttab .documenttab-close-container {
-  -moz-margin-end: 49px;
+  -moz-margin-end: 65px;
 }
 
 documenttab .documenttab-close-container > .documenttab-close {
@@ -865,16 +1053,22 @@ documenttab .documenttab-reload {
   display: none;
 }
 
-documenttab[selected="true"] {
-  opacity: 1;
-}
-
-documenttab[reload="true"] {
-  background: -moz-linear-gradient(top, rgba(110,110,110,0.5) 50%, rgba(90,90,90,0.5) 90%);
-  opacity: 1;
+documenttab[selected="true"] .documenttab-thumbnail {
+  border: 8px solid;
+  -moz-border-radius: 3px;
+  -moz-border-top-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
+  -moz-border-right-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
+  -moz-border-bottom-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
+  -moz-border-left-colors: #8db8d8 #8db8d8 #8db8d8 #8db8d8 #36373b;
 }
 
 documenttab[reload="true"] .documenttab-thumbnail {
+  border: 8px solid;
+  -moz-border-radius: 3px;
+  -moz-border-top-colors: #262629 #262629 #262629 #262629 #262629 !important;
+  -moz-border-right-colors: #262629 #262629 #262629 #262629 #262629 !important;
+  -moz-border-bottom-colors: #262629 #262629 #262629 #262629 #262629 !important;
+  -moz-border-left-colors: #262629 #262629 #262629 #262629 #262629 !important;
   opacity: 0.5;
 }
 
@@ -888,14 +1082,30 @@ documenttab[reload="true"] .documenttab-reload {
 }
 
 #newtab-button {
-  -moz-box-flex: 1;
   list-style-image: url("images/newtab-default-64.png");
 }
 
+#newtab-button:hover:active {
+  list-style-image: url("images/newtab-active-64.png");
+}
+
+#remotetabs-button {
+  list-style-image: url("images/remotetabs-default-64.png");
+}
+
+#remotetabs-button:not([disabled]):hover:active {
+  list-style-image: url("images/remotetabs-active-64.png");
+}
+
+#remotetabs-button[disabled] {
+  list-style-image: url("images/remotetabs-disabled-64.png");
+}
+
 /* bookmark editor   ------------------------------------------------------- */
 #bookmark-container {
   padding: 8px; /* core spacing */
-  background: rgb(94,97,102);
+  background-image: url("chrome://browser/skin/images/panel-shadow.png");
+  background-repeat: repeat-x;
   -moz-box-shadow: black 0 2px 2px;
 }
 
@@ -913,7 +1123,8 @@ documenttab[reload="true"] .documenttab-reload {
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-container {
-  background: rgb(94,97,102);
+  background-image: url("chrome://browser/skin/images/panel-shadow.png");
+  background-repeat: repeat-x;
   -moz-box-shadow: black 0 2px 2px;
   -moz-border-radius-bottomleft: 8px;
   -moz-border-radius-bottomright: 8px;
@@ -928,7 +1139,15 @@ documenttab[reload="true"] .documenttab-reload {
 /* Popup Icons */
 #identity-popup-icon {
   padding: 0;
-  list-style-image: url("chrome://browser/skin/images/larry-48.png");
+  list-style-image: url("chrome://browser/skin/images/identity-64.png");
+}
+
+#identity-container[mode="verifiedDomain"] > hbox > #identity-popup-icon {
+  list-style-image: url("chrome://browser/skin/images/identitySSL-64.png");
+}
+
+#identity-container[mode="verifiedIdentity"] > hbox > #identity-popup-icon {
+  list-style-image: url("chrome://browser/skin/images/identityEV-64.png");
 }
 
 /* Popup Body Text */
@@ -1236,14 +1455,6 @@ pageaction:hover:active > vbox > .pageaction-desc {
   margin: 2px 8px; /* half row size & core spacing */
 }
 
-/* XXX this should go with the final Android theme */
-#content-navigator > hbox > toolbarbutton {
-  padding: 0 !important;
-  border: none !important;
-  min-width: 0 !important; /* the image drives the size */
-  min-height: 0 !important; /* the image drives the size */
-}
-
 #content-navigator > hbox > .previous-button {
   height: 64px;
   -moz-margin-end: 0;
@@ -1354,7 +1565,7 @@ pageaction:hover:active > vbox > .pageaction-desc {
   background-color: #8db8d8;
 }
 
-echrome-select-option[disabled="true"] {
+.chrome-select-option[disabled="true"] {
   pointer-events: none;
   color: #aaa !important;
 }

mobile/themes/core/jar.mn

@@ -46,20 +46,53 @@ chrome.jar:
   skin/images/alert-addons-30.png           (images/alert-addons-30.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
   skin/images/addons-default-64.png         (images/addons-default-64.png)
+  skin/images/addons-active-64.png          (images/addons-active-64.png)
   skin/images/back-default-64.png           (images/back-default-64.png)
+  skin/images/back-active-64.png            (images/back-active-64.png)
+  skin/images/back-disabled-64.png          (images/back-disabled-64.png)
   skin/images/history-48.png                (images/history-48.png)
   skin/images/bookmark-default-64.png       (images/bookmark-default-64.png)
+  skin/images/bookmark-active-64.png        (images/bookmark-active-64.png)
   skin/images/bookmarks-48.png              (images/bookmarks-48.png)
   skin/images/bookmarked-default-64.png     (images/bookmarked-default-64.png)
+  skin/images/bookmarked-active-64.png      (images/bookmarked-active-64.png)
   skin/images/forward-default-64.png        (images/forward-default-64.png)
+  skin/images/forward-active-64.png         (images/forward-active-64.png)
+  skin/images/forward-disabled-64.png       (images/forward-disabled-64.png)
   skin/images/downloads-default-64.png      (images/downloads-default-64.png)
+  skin/images/downloads-active-64.png       (images/downloads-active-64.png)
   skin/images/settings-default-64.png       (images/settings-default-64.png)
+  skin/images/settings-default-rtl-64.png   (images/settings-default-rtl-64.png)
+  skin/images/settings-active-64.png        (images/settings-active-64.png)
+  skin/images/settings-active-rtl-64.png    (images/settings-active-rtl-64.png)
+  skin/images/settings-open-64.png          (images/settings-open-64.png)
+  skin/images/settings-open-rtl-64.png      (images/settings-open-rtl-64.png)
   skin/images/preferences-default-64.png    (images/preferences-default-64.png)
+  skin/images/preferences-active-64.png     (images/preferences-active-64.png)
   skin/images/console-default-64.png        (images/console-default-64.png)
+  skin/images/console-active-64.png         (images/console-active-64.png)
   skin/images/newtab-default-64.png         (images/newtab-default-64.png)
+  skin/images/newtab-active-64.png          (images/newtab-active-64.png)
+  skin/images/remotetabs-24.png             (images/remotetabs-24.png)
   skin/images/remotetabs-32.png             (images/remotetabs-32.png)
   skin/images/remotetabs-48.png             (images/remotetabs-48.png)
+  skin/images/tab-32.png                    (images/tab-32.png)
   skin/images/mozilla-32.png                (images/mozilla-32.png)
+  skin/images/leftcap-default-64.png        (images/leftcap-default-64.png)
+  skin/images/leftcap-active-64.png         (images/leftcap-active-64.png)
+  skin/images/leftcapEV-default-64.png      (images/leftcapEV-default-64.png)
+  skin/images/leftcapEV-active-64.png       (images/leftcapEV-active-64.png)
+  skin/images/leftcapSSL-default-64.png     (images/leftcapSSL-default-64.png)
+  skin/images/leftcapSSL-active-64.png      (images/leftcapSSL-active-64.png)
+  skin/images/rightcapEV-default-64.png     (images/rightcapEV-default-64.png)
+  skin/images/rightcapEV-active-64.png      (images/rightcapEV-active-64.png)
+  skin/images/rightcapSSL-default-64.png    (images/rightcapSSL-default-64.png)
+  skin/images/rightcapSSL-active-64.png     (images/rightcapSSL-active-64.png)
+  skin/images/rightcap-default-64.png       (images/rightcap-default-64.png)
+  skin/images/rightcap-active-64.png        (images/rightcap-active-64.png)
+  skin/images/identity-64.png               (images/identity-64.png)
+  skin/images/identityEV-64.png             (images/identityEV-64.png)
+  skin/images/identitySSL-64.png            (images/identitySSL-64.png)
   skin/images/toggleoff-active-64.png       (images/toggleoff-active-64.png)
   skin/images/toggleoff-active-rtl-64.png   (images/toggleoff-active-rtl-64.png)
   skin/images/toggleoff-inactive-64.png     (images/toggleoff-inactive-64.png)

mobile/themes/core/platform.css

@@ -58,6 +58,10 @@ label {
 }
 
 /* Override any OS inverse themes */
+richlistbox {
+  -moz-user-focus: ignore;
+}
+
 richlistbox,
 textbox {
   color: black;
@@ -86,18 +90,18 @@ textbox[isempty="true"] {
 /* panels ------------------------------------------------------------------ */
 .panel-dark {
   color: white;
-  background: -moz-linear-gradient(top, rgb(118,121,126) 10%, rgb(94,97,102) 90%);
+  background-color: #36373b;
 }
 
 /* sidebars spacer --------------------------------------------------------- */
 .sidebar-spacer {
-  background-color: #767973;
+  background-color: #36373b;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {
   color: #fff;
-  background-color: #767973;
+  background-color: #36373b;
   border-width: 4px 3px 4px 3px;
   border-style: solid;
   -moz-border-top-colors: black #4a4b4f;
@@ -129,7 +133,7 @@ dialog > .prompt-header {
   padding: 8px;
   font-size: 18px !important;
   -moz-border-radius: 8px 8px 0 0;
-  background-color: #767973;
+  background-color: #36373b;
   border-style: solid;
   border-width: 4px 3px 2px 3px;
   -moz-border-top-colors: black #4a4b4f;
@@ -316,6 +320,15 @@ toolbarbutton.button-dark[type="checkbox"][checked="true"] {
   padding: 2px 4px !important;
 }
 
+/* image buttons ----------------------------------------------------------- */
+.button-image {
+  padding: 0 !important;
+  background: #36373b !important;
+  border: none !important;
+  min-width: 0 !important; /* the image drives the size */
+  min-height: 0 !important; /* the image drives the size */
+}
+
 /* checkbox buttons ----------------------------------------------------------- */
 .button-checkbox {
   color: #fff;
@@ -353,7 +366,7 @@ radiogroup {
 }
 
 radio {
-  color: #767973;
+  color: #36373b;
   min-width: 48px !important; /* button size */
   min-height: 48px !important;
   padding: 2px !important;
@@ -520,7 +533,6 @@ radio.checkbox-radio-off:not([selected]) .radio-label-box {
 
 /* richlistbox ------------------------------------------------------------- */
 richlistbox {
-  -moz-user-focus: ignore;
   margin: 0;
 }
 
@@ -594,11 +606,11 @@ richlistitem[typeName="message"] {
 
 /* colorpicker ------------------------------------------------------------- */
 colorpicker > panel {
-  background-color: #767973;
+  background-color: #36373b;
 }
 
 colorpicker > vbox {
-  background-color: #767973;
+  background-color: #36373b;
 }
 
 /* textbox ----------------------------------------------------------------- */
@@ -692,104 +704,3 @@ progressmeter {
 .progress-bar {
   background-color: #8db8d8;
 }
-
-/*.panel-row-header ------------------------------------------------------------ */
-.panel-row-header {
-  border-bottom: 4px solid rgb(101,121,227);
-  background-color: rgb(94,97,102);
-  padding: 0 !important;
-}
-
-.panel-row-header > toolbarbutton {
-  -moz-appearance: none;
-  background: -moz-linear-gradient(bottom, rgba(0,0,0,0.4) 2%, rgba(94,97,102,0) 8%), rgb(94,97,102);
-  color: white;
-  border: 0px solid transparent !important;
-  -moz-border-start: 1px solid rgba(255,255,255,0.2) !important;
-  -moz-border-end: 1px solid rgba(0,0,0,0.2) !important;
-  padding-top: 3px !important;
-  padding-bottom: 3px !important;
-  -moz-padding-start: 2px !important;
-  -moz-padding-end: 2px !important;
-  -moz-box-flex: 1;
-  -moz-user-focus: ignore;
-  -moz-user-select: none;
-}
-
-.panel-row-header > toolbarbutton.choice-all {
-  list-style-image: url(chrome://browser/skin/images/allpages-48.png);
-}
-
-.panel-row-header > toolbarbutton.choice-bookmarks {
-  list-style-image: url(chrome://browser/skin/images/bookmarks-48.png);
-}
-
-.panel-row-header > toolbarbutton.choice-history {
-  list-style-image: url(chrome://browser/skin/images/history-48.png);
-}
-
-.panel-row-header > toolbarbutton.choice-remotetabs {
-  list-style-image: url(chrome://browser/skin/images/remotetabs-48.png);
-}
-
-.panel-row-header > toolbarbutton:hover:active {
-  background: -moz-radial-gradient(50% -40%, circle, rgba(94,97,102,0) 70%, rgba(46,46,46,0.8) 90%, rgba(46,46,46,1) 100%);
-}
-
-.panel-row-header > toolbarbutton:first-child {
-  -moz-border-start-width: 0 !important;
-}
-
-.panel-row-header > toolbarbutton:last-child {
-  -moz-border-end-width: 0 !important;
-}
-
-@media (max-width: 499px) {
-  .panel-row-header > toolbarbutton {
-    -moz-box-orient: vertical;
-  }
-
-  .panel-row-header > toolbarbutton .toolbarbutton-text {
-    font-size: 14px !important;
-  }
-}
-
-.panel-row-header > toolbarbutton .toolbarbutton-text {
-  text-align: left;
-  text-shadow: rgba(0,0,0,0.3) 0 2px;
-}
-
-.panel-row-header > toolbarbutton .toolbarbutton-text:-moz-locale-dir(rtl) {
-  text-align: right;
-}
-
-.panel-row-header > toolbarbutton[disabled="true"] {
-  pointer-events: none;
-}
-
-.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
-  color: #aaa;
-}
-
-.panel-row-header > toolbarbutton[checked="true"] {
-  color: white !important;
-  background-color: rgba(94,97,102,1) !important;
-  background: -moz-radial-gradient(50% 125%, circle, rgba(101,121,227,1) 20%, rgba(77,95,186,0) 40%), -moz-radial-gradient(50% -40%, circle, rgba(94,97,102,0) 70%, rgba(46,46,46,0.8) 90%, rgba(46,46,46,1) 100%);
-}
-
-.panel-row-header > toolbarbutton[checked="true"],
-.panel-row-header > toolbarbutton[disabled="true"] {
-  pointer-events: none;
-}
-
-.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
-  color: #aaa;
-}