Bug 575403 - "Create an Android theme for Fennec" [r=mark.finkle r=mbrubeck]

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" class="panel-button button-image" linkedpanel="feedback-container" insertafter="tool-addons"/>
+    <toolbarbutton id="tool-feedback" class="panel-row-button" autocheck="true" type="radio" group="1" linkedpanel="feedback-container" insertafter="tool-addons"/>
   </box>
 
   <deck id="panel-items">

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

@@ -1,13 +1,5 @@
 #tool-feedback {
-  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;
+  list-style-image: url("chrome://feedback/skin/beta-64.png");
 }
 
 #feedback-feedback-happy {

mobile/chrome/content/bindings.xml

@@ -1455,8 +1455,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 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: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: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-image" command="cmd_newTab"/>
+            <toolbarbutton id="newtab-button" class="button-control" 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" class="button-image" oncommand="BrowserUI.switchTask();"/>
+                  <toolbarbutton id="tool-app-switch" oncommand="BrowserUI.switchTask();"/>
 #endif
                   <hbox id="urlbar-container" flex="1" observes="bcast_urlbarState">
-                    <box id="identity-box"
+                    <box id="identity-box" class="urlbar-cap-button"
                          onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
                          onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
                       <box id="urlbar-image-box" mousethrough="always">
@@ -258,15 +258,14 @@
                              readonly="true"
                              ontextentered="BrowserUI.goToURI();"
                              clickSelectsAll="true"/>
-                    <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 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>
                   </hbox>
 #ifndef ANDROID
-                  <toolbarbutton id="tool-app-close" class="urlbar-button button-image" command="cmd_close"/>
+                  <toolbarbutton id="tool-app-close" class="urlbar-button" command="cmd_close"/>
 #endif
                 </toolbar>
               </box>
@@ -305,11 +304,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="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"/>
+          <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"/>
           <toolbarspring/>
-          <toolbarbutton id="tool-panel-open" class="page-button button-image" command="cmd_panel"/>
+          <toolbarbutton id="tool-panel-open" class="button-control" command="cmd_panel"/>
         </vbox>
       </vbox>
     </scrollbox>
@@ -374,14 +373,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" 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"/>
+      <hbox id="panel-controls" class="panel-row-header" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
+        <toolbarbutton id="tool-preferences" class="panel-row-button" type="radio" group="1" checked="true" linkedpanel="prefs-container"/>
+        <toolbarbutton id="tool-downloads" class="panel-row-button" type="radio" group="1" linkedpanel="downloads-container"/>
+        <toolbarbutton id="tool-addons" class="panel-row-button" type="radio" group="1" linkedpanel="addons-container"/>
+        <toolbarbutton id="tool-console" class="panel-row-button" type="radio" group="1" hidden="true" linkedpanel="console-container"/>
 #ifndef ANDROID
         <spacer flex="1"/>
-        <toolbarbutton id="tool-panel-close" class="button-image" command="cmd_panel"/>
+        <toolbarbutton id="tool-panel-close" command="cmd_panel"/>
 #endif
       </hbox>
       <vbox flex="1">
@@ -500,12 +499,12 @@
 
     <vbox id="awesome-panels" hidden="true">
       <!-- Awesome header row -->
-      <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"/>
+      <hbox id="awesome-header" class="panel-row-header">
+        <toolbarbutton type="radio" group="awesome-header" label="&allPagesHeader.label;" command="cmd_openLocation" class="choice-all panel-row-button show-text" checked="true"/>
+        <toolbarbutton type="radio" group="awesome-header" label="&bookmarksHeader.label;" command="cmd_bookmarks" class="choice-bookmarks panel-row-button show-text"/>
+        <toolbarbutton type="radio" group="awesome-header" label="&historyHeader.label;" command="cmd_history" class="choice-history panel-row-button show-text"/>
 #ifdef MOZ_SERVICES_SYNC
-        <toolbarbutton type="radio" group="awesome-header" label="&desktopHeader.label;" command="cmd_remoteTabs" class="choice-remotetabs show-text"/>
+        <toolbarbutton type="radio" group="awesome-header" label="&desktopHeader.label;" command="cmd_remoteTabs" class="choice-remotetabs panel-row-button show-text"/>
 #endif
       </hbox>
 

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="106" height="64" moz-opaque="true" empty="true"
+        <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" width="104" height="65" moz-opaque="true" empty="true"
           onclick="document.getBindingParent(this)._onClick()"/>
-        <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: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:image anonid="close" class="documenttab-close" mousethrough="always"/>
         </xul:hbox>
       </xul:stack>
@@ -60,8 +60,8 @@
         <parameter name="height"/>
         <body>
           <![CDATA[
-            const tabWidth = 106;
-            const tabHeight = 64;
+            const tabWidth = 104;
+            const tabHeight = 65;
 
             let ratio = tabHeight / tabWidth;
             height = width * ratio;
@@ -180,10 +180,13 @@
           <![CDATA[
             let firstBox = this.children.firstChild.getBoundingClientRect();
             let lastBox = this.children.lastChild.getBoundingClientRect();
-            let columnsCount = Math.ceil(this.children.childNodes.length / Math.floor(this.children.style.height / firstBox.height));
+
+            // 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)));
             if (this._columnsCount != columnsCount) {
               let width = Math.max(lastBox.right - firstBox.left, firstBox.right - lastBox.left);
-              this.children.style.width = width + "px";
+              // XXX we can do better than using a constant
+              this.children.style.width = (width + 20) + "px";
               this._columnsCount = columnsCount;
             }
           ]]>

mobile/themes/core/browser.css

@@ -39,7 +39,7 @@
 #toolbar-main {
   -moz-appearance: none;
   -moz-box-align: center;
-  padding: 4px 8px; /* half core spacing & core spacing */
+  padding: 0 8px; /* 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 */
-  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 */
+  -moz-margin-end: -8px !important; /* force the button to go to the edge */
   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,13 +116,148 @@ toolbarbutton.urlbar-button {
 }
 %endif
 
+/* URL bar ----------------------------------------------------------------- */
+#urlbar-container {
+  color: #000;
+  border-radius: 8px;
+  margin: 8px;
+  background-color: #fff;
+  border-bottom: 3px rgba(0,0,0,0.1) solid;
+}
+
+#urlbar-container[mode="edit"] > #identity-box {
+  visibility: collapse;
+}
+
+#urlbar-container[mode="edit"] > #urlbar-edit {
+  background-color: #fff;
+  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 */
-toolbarbutton.urlbar-cap-button {
-  margin: 0;
-  padding: 0;
-  min-width: 0 !important;
-  min-height: 0 !important;
+.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;
+}
+
+.urlbar-cap-button[open="true"],
+.urlbar-cap-button:hover:active {
+  background-color: rgb(189,192,197);
+}
+
+/* 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-color: rgb(137,215,21);
+}
+
+#identity-box[mode="verifiedIdentity"]:hover:active,
+#identity-box[mode="verifiedIdentity"][open] {
+  background-color: rgb(115,181,16);
+}
+
+/* add special color */
+#identity-box[mode="verifiedDomain"] {
+  background-color: rgb(101,121,227);
+}
+
+#identity-box[mode="verifiedDomain"]:hover:active,
+#identity-box[mode="verifiedDomain"][open] {
+  background-color: rgb(86,102,189);
+}
+
+#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;
+  border-radius: 0;
+  border: 0 solid transparent;
+  border-left: 1px solid white;
+  border-right: 1px solid white;
+  background: transparent;
+}
+
+#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;
+}
+
+/* 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);
 }
 
 #tool-reload {
@@ -152,256 +287,66 @@ toolbarbutton.urlbar-cap-button {
   visibility: collapse;
 }
 
-/* URL bar ----------------------------------------------------------------- */
-#urlbar-container {
-  color: #000;
-  -moz-box-align: center;
-}
-
-/* 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;
-}
-
-#identity-box:-moz-locale-dir(rtl) {
-  background: url("images/rightcap-default-64.png") top left no-repeat;
-}
-
-#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? */
+  padding: 0;
   -moz-border-start: 3px solid #262629;
+  background: rgb(94,97,102);
+  min-width: 80px !important;
 }
 
-toolbarbutton.browser-control-button,
-toolbarbutton.panel-button,
-toolbarbutton.page-button {
-  /* space out the buttons a bit vertically */
-  margin-bottom: 8px; /* core spacing */
+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;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+toolbarbutton.button-control[disabled="true"] {
+  opacity: 0.5;
+}
+
+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;
 }
 
 #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-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) {
-  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-back,
 #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-back:-moz-locale-dir(rtl),
+#tool-forward {
+  list-style-image: url("chrome://browser/skin/images/forward-default-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 {
@@ -421,64 +366,53 @@ toolbarbutton.page-button {
 }
 %endif
 
+/* awesomescreen buttons --------------------------------------------------- */
+toolbarbutton.choice-all {
+  list-style-image: url(chrome://browser/skin/images/allpages-48.png);
+}
+
+toolbarbutton.choice-bookmarks {
+  list-style-image: url(chrome://browser/skin/images/bookmarks-48.png);
+}
+
+toolbarbutton.choice-history {
+  list-style-image: url(chrome://browser/skin/images/history-48.png);
+}
+
+toolbarbutton.choice-remotetabs {
+  list-style-image: url(chrome://browser/skin/images/remotetabs-48.png);
+}
+
+/* browsers ---------------------------------------------------------------- */
+#content-stack > div:-moz-focusring {
+  outline: 0 !important;
+}
+
 /* 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 {
-  font-weight: bold;
-  color: white;
-  background-color: #6576eb;
   margin: 0;
-  padding: 2px;
+  padding: 4px 8px 8px 8px;
+  font-weight: bold;
+  color: white !important;
+  background-color: rgb(101, 121, 227) !important;
 }
 
 #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 {
@@ -555,8 +489,7 @@ richlistitem[isDisabled="true"] image {
 richlistitem[typeName="banner"],
 richlistitem[typeName="showmore"] {
   background-color: rgb(255,255,255);
-  background: url(chrome://browser/skin/images/browseaddons-bg.png) repeat-x center top,
-              -moz-linear-gradient(top, rgb(220,236,253) 10%, rgb(255,255,255) 90%)
+  background: url(chrome://browser/skin/images/browseaddons-bg.jpg) repeat-x center top;
 }
 
 /* downloads panel UI   ---------------------------------------------------- */
@@ -707,6 +640,7 @@ placeitem[ui="manage"] > .bookmark-manage > image {
   visibility: collapse;
 }
 
+/* autocomplete-items */
 .autocomplete-items {
   background-color: white;
 }
@@ -721,10 +655,10 @@ placeitem {
   min-height: 70px; /* row size */
 }
 
-autocompleteresult:active,
-placelist placeitem:active:not([selected="true"]),
-historylist placeitem:active:not([selected="true"]):not([class="history-item-title"]),
-historylist placeitem:active:not([selected="true"]):not([class="remotetabs-item-title"]),
+autocompleteresult:hover:active,
+placelist placeitem:hover:active:not([selected="true"]),
+historylist placeitem:hover:active:not([selected="true"]):not([class="history-item-title"]),
+remotetabslist placeitem:hover:active:not([selected="true"]):not([class="remotetabs-item-title"]),
 .autocompleteresult-selected {
   background-color: #8db8d8;
 }
@@ -869,7 +803,7 @@ autocompleteresult.noresults {
   border-bottom: none;
 }
 
-autocompleteresult.noresults:active {
+autocompleteresult.noresults:hover:active {
   background-color: white;
 }
 
@@ -878,138 +812,26 @@ autocompleteresult.noresults > .autocomplete-item-container {
   color: grey;
 }
 
-#awesome-header {
-  min-height: 70px; /* row size */
-}
-
-#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;
+  background: rgb(94,97,102);
+}
+
+#tabs:-moz-locale-dir(rtl) {
+  -moz-box-align: start;
 }
 
 #tabs > * {
   display: block;
-  -moz-column-width: 128px;
+  -moz-column-width: 121px;
   -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 {
@@ -1018,25 +840,30 @@ autocompleteresult.noresults > .autocomplete-item-container {
 
 #tabs-controls {
   margin-top: 8px; /* core spacing */
-  -moz-box-pack: start;
+  -moz-box-pack: center;
 }
 
 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-color: rgb(101,121,227);
+  border-bottom: 3px rgb(66,78,146) solid;
+  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: 65px;
+  -moz-margin-end: 49px;
 }
 
 documenttab .documenttab-close-container > .documenttab-close {
@@ -1053,22 +880,17 @@ documenttab .documenttab-reload {
   display: none;
 }
 
-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[selected="true"] {
+  opacity: 1;
+}
+
+documenttab[reload="true"] {
+  background-color: rgb(70,70,70);
+  border-bottom: 3px rgb(60,60,60) solid;
+  opacity: 1;
 }
 
 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;
 }
 
@@ -1077,35 +899,19 @@ documenttab[reload="true"] .documenttab-close-container {
 }
 
 documenttab[reload="true"] .documenttab-reload {
-  background: url("chrome://browser/skin/images/reload-tab.png") no-repeat center center, -moz-radial-gradient(circle, rgba(137,215,21,0.8) 10%, rgba(68,108,17,0) 40%);
+  background: rgba(137,215,21,0.8) url("chrome://browser/skin/images/reload-tab.png") no-repeat center center;
   display: -moz-box;
 }
 
 #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-image: url("chrome://browser/skin/images/panel-shadow.png");
-  background-repeat: repeat-x;
+  background: rgb(94,97,102);
   -moz-box-shadow: black 0 2px 2px;
 }
 
@@ -1123,8 +929,7 @@ documenttab[reload="true"] .documenttab-reload {
 
 /* Identity popup   -------------------------------------------------------- */
 #identity-container {
-  background-image: url("chrome://browser/skin/images/panel-shadow.png");
-  background-repeat: repeat-x;
+  background: rgb(94,97,102);
   -moz-box-shadow: black 0 2px 2px;
   -moz-border-radius-bottomleft: 8px;
   -moz-border-radius-bottomright: 8px;
@@ -1132,22 +937,14 @@ documenttab[reload="true"] .documenttab-reload {
 
 #identity-popup-container {
   padding: 8px; /* core spacing */
-  background-image: -moz-linear-gradient(bottom, rgb(94,95,99) 0%, rgb(54,55,59) 25%, transparent);
+  background-color: rgb(94,95,99);
   padding-bottom: 16px;
 }
 
 /* Popup Icons */
 #identity-popup-icon {
   padding: 0;
-  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");
+  list-style-image: url("chrome://browser/skin/images/larry-48.png");
 }
 
 /* Popup Body Text */
@@ -1470,6 +1267,14 @@ 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;
@@ -1544,7 +1349,7 @@ pageaction:hover:active > vbox > .pageaction-desc {
   -moz-border-end: none;
 }
 
-.form-helper-autofill-label:active {
+.form-helper-autofill-label::hover:active {
   background-color: #8db8d8;
 }
 
@@ -1580,7 +1385,7 @@ pageaction:hover:active > vbox > .pageaction-desc {
   background-color: #8db8d8;
 }
 
-.chrome-select-option[disabled="true"] {
+echrome-select-option[disabled="true"] {
   pointer-events: none;
   color: #aaa !important;
 }

mobile/themes/core/header.css

@@ -38,7 +38,7 @@
 body {
   font-family: helvetica,arial,clean,sans-serif;
   color: #69645c;
-  background: white url("images/aboutBackground.png") top center repeat-x;
+  background: white url("images/aboutBackground.jpg") top center repeat-x;
 }
 
 #wrapper {

mobile/themes/core/jar.mn

@@ -14,9 +14,8 @@ chrome.jar:
   skin/notification.css                     (notification.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 
-  skin/images/addons.png                    (images/addons.png)
-  skin/images/weave.png                     (images/weave.png)
-  skin/images/aboutBackground.png           (images/aboutBackground.png)
+  skin/images/aboutBackground.jpg           (images/aboutBackground.jpg)
+  skin/images/browseaddons-bg.jpg           (images/browseaddons-bg.jpg)
   skin/images/panel-shadow.png              (images/panel-shadow.png)
   skin/images/addons-32.png                 (images/addons-32.png)
   skin/images/arrowleft-16.png              (images/arrowleft-16.png)
@@ -46,53 +45,21 @@ 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/allpages-48.png               (images/allpages-48.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)
@@ -117,7 +84,6 @@ chrome.jar:
   skin/images/toggledarkright-inactive-64.png   (images/toggledarkright-inactive-64.png)
   skin/images/toggledarkboth-active-64.png      (images/toggledarkboth-active-64.png)
   skin/images/toggledarkboth-inactive-64.png    (images/toggledarkboth-inactive-64.png)
-  skin/images/browseaddons-bg.png           (images/browseaddons-bg.png)
   skin/images/button-default-64.png         (images/button-default-64.png)
   skin/images/button-active-64.png          (images/button-active-64.png)
   skin/images/buttondark-default-64.png     (images/buttondark-default-64.png)

mobile/themes/core/platform.css

@@ -58,10 +58,6 @@ label {
 }
 
 /* Override any OS inverse themes */
-richlistbox {
-  -moz-user-focus: ignore;
-}
-
 richlistbox,
 textbox {
   color: black;
@@ -90,18 +86,18 @@ textbox[isempty="true"] {
 /* panels ------------------------------------------------------------------ */
 .panel-dark {
   color: white;
-  background-color: #36373b;
+  background: rgb(94,97,102);
 }
 
 /* sidebars spacer --------------------------------------------------------- */
 .sidebar-spacer {
-  background-color: #36373b;
+  background-color: #767973;
 }
 
 /* dialog popups ----------------------------------------------------------- */
 .dialog-dark {
   color: #fff;
-  background-color: #36373b;
+  background-color: #767973;
   border-width: 4px 3px 4px 3px;
   border-style: solid;
   -moz-border-top-colors: black #4a4b4f;
@@ -133,7 +129,7 @@ dialog > .prompt-header {
   padding: 8px;
   font-size: 18px !important;
   -moz-border-radius: 8px 8px 0 0;
-  background-color: #36373b;
+  background-color: #767973;
   border-style: solid;
   border-width: 4px 3px 2px 3px;
   -moz-border-top-colors: black #4a4b4f;
@@ -189,7 +185,7 @@ button {
 }
 
 button[type="checkbox"][checked="true"],
-button:not([disabled="true"]):active:hover {
+button:not([disabled="true"]):hover:active {
   -moz-border-image: url("chrome://browser/skin/images/button-active-64.png") 8 repeat repeat;
 }
 
@@ -220,8 +216,8 @@ notification button {
 }
 
 button.button-dark[type="checkbox"][checked="true"],
-button.button-dark:not([disabled="true"]):active:hover,
-notification button:not([disabled="true"]):active:hover {
+button.button-dark:not([disabled="true"]):hover:active,
+notification button:not([disabled="true"]):hover:active {
   -moz-border-image: url("chrome://browser/skin/images/buttondark-active-64.png") 8 repeat repeat;
 }
 
@@ -305,7 +301,7 @@ toolbarbutton.button-dark {
 }
 
 toolbarbutton.button-dark[type="checkbox"][checked="true"],
-toolbarbutton.button-dark:not([disabled="true"]):active:hover {
+toolbarbutton.button-dark:not([disabled="true"]):hover:active {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkboth-active-64.png") 10 repeat repeat;
 }
 
@@ -320,15 +316,6 @@ 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;
@@ -366,7 +353,7 @@ radiogroup {
 }
 
 radio {
-  color: #36373b;
+  color: #767973;
   min-width: 48px !important; /* button size */
   min-height: 48px !important;
   padding: 2px !important;
@@ -381,7 +368,7 @@ radio .radio-icon, radio .radio-check {
   display: none;
 }
 
-radio:not([disabled=true]):active:hover,
+radio:not([disabled=true]):hover:active,
 radio[selected] {
   color: #000;
   -moz-border-image: url("chrome://browser/skin/images/togglemiddle-active-64.png") 8 repeat repeat;
@@ -395,12 +382,12 @@ radio:first-child:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggleright-inactive-64.png") 8 repeat repeat;
 }
 
-radio:not([disabled=true]):first-child:active:hover,
+radio:not([disabled=true]):first-child:hover:active,
 radio:first-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggleleft-active-64.png") 8 repeat repeat;
 }
 
-radio:not([disabled=true]):first-child:active:hover:-moz-locale-dir(rtl),
+radio:not([disabled=true]):first-child:hover:active:-moz-locale-dir(rtl),
 radio:first-child[selected]:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggleright-active-64.png") 8 repeat repeat;
 }
@@ -413,12 +400,12 @@ radio:last-child:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggleleft-inactive-64.png") 8 repeat repeat;
 }
 
-radio:not([disabled=true]):last-child:active:hover,
+radio:not([disabled=true]):last-child:hover:active,
 radio:last-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggleright-active-64.png") 8 repeat repeat;
 }
 
-radio:not([disabled=true]):last-child:active:hover:-moz-locale-dir(rtl),
+radio:not([disabled=true]):last-child:hover:active:-moz-locale-dir(rtl),
 radio:last-child[selected]:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggleleft-active-64.png") 8 repeat repeat;
 }
@@ -427,7 +414,7 @@ radio:first-child:last-child {
   -moz-border-image: url("chrome://browser/skin/images/toggleboth-inactive-64.png") 8 repeat repeat;
 }
 
-radio:not([disabled=true]):first-child:last-child:active:hover,
+radio:not([disabled=true]):first-child:last-child:hover:active,
 radio:first-child:last-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggleboth-active-64.png") 8 repeat repeat;
 }
@@ -480,7 +467,7 @@ radio.checkbox-radio-off:not([selected]) .radio-label-box {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkmiddle-inactive-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:active:hover,
+.toggle-dark:not([disabled=true]) radio:hover:active,
 .toggle-dark radio[selected] {
   color: #fff;
   -moz-border-image: url("chrome://browser/skin/images/toggledarkmiddle-active-64.png") 8 repeat repeat;
@@ -494,12 +481,12 @@ radio.checkbox-radio-off:not([selected]) .radio-label-box {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkright-inactive-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:first-child:active:hover,
+.toggle-dark:not([disabled=true]) radio:first-child:hover:active,
 .toggle-dark radio:first-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkleft-active-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:first-child:active:hover:-moz-locale-dir(rtl),
+.toggle-dark:not([disabled=true]) radio:first-child:hover:active:-moz-locale-dir(rtl),
 .toggle-dark radio:first-child[selected]:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkright-active-64.png") 8 repeat repeat;
 }
@@ -512,12 +499,12 @@ radio.checkbox-radio-off:not([selected]) .radio-label-box {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkleft-inactive-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:last-child:active:hover,
+.toggle-dark:not([disabled=true]) radio:last-child:hover:active,
 .toggle-dark radio:last-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkright-active-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:last-child:active:hover:-moz-locale-dir(rtl),
+.toggle-dark:not([disabled=true]) radio:last-child:hover:active:-moz-locale-dir(rtl),
 .toggle-dark radio:last-child[selected]:-moz-locale-dir(rtl) {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkleft-active-64.png") 8 repeat repeat;
 }
@@ -526,13 +513,14 @@ radio.checkbox-radio-off:not([selected]) .radio-label-box {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkboth-inactive-64.png") 8 repeat repeat;
 }
 
-.toggle-dark:not([disabled=true]) radio:first-child:last-child:active:hover,
+.toggle-dark:not([disabled=true]) radio:first-child:last-child:hover:active,
 .toggle-dark radio:first-child:last-child[selected] {
   -moz-border-image: url("chrome://browser/skin/images/toggledarkboth-active-64.png") 8 repeat repeat;
 }
 
 /* richlistbox ------------------------------------------------------------- */
 richlistbox {
+  -moz-user-focus: ignore;
   margin: 0;
 }
 
@@ -573,7 +561,7 @@ richlistitem[selected="true"] {
   background-color: white;
 }
 
-richlistitem:active:not([selected="true"]):not([nohighlight="true"]) {
+richlistitem::hover:active:not([selected="true"]):not([nohighlight="true"]) {
   background-color: #8db8d8;
 }
 
@@ -606,11 +594,11 @@ richlistitem[typeName="message"] {
 
 /* colorpicker ------------------------------------------------------------- */
 colorpicker > panel {
-  background-color: #36373b;
+  background-color: #767973;
 }
 
 colorpicker > vbox {
-  background-color: #36373b;
+  background-color: #767973;
 }
 
 /* textbox ----------------------------------------------------------------- */
@@ -641,7 +629,7 @@ menulist {
   -moz-appearance: none !important;
 }
 
-menulist:not([disabled="true"]):active:hover {
+menulist:not([disabled="true"]):hover:active {
   -moz-border-image: url("chrome://browser/skin/images/button-active-64.png") 8 repeat repeat;
 }
 
@@ -655,7 +643,7 @@ menulist.button-dark {
   -moz-border-image: url("chrome://browser/skin/images/buttondark-default-64.png") 8 repeat repeat;
 }
 
-menulist.button-dark:not([disabled="true"]):active:hover {
+menulist.button-dark:not([disabled="true"]):hover:active {
   -moz-border-image: url("chrome://browser/skin/images/buttondark-active-64.png") 8 repeat repeat;
 }
 
@@ -704,3 +692,79 @@ 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-button {
+  -moz-appearance: none;
+  background-color: 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-button:hover:active {
+  background-color: rgb(94,97,102);
+}
+
+.panel-row-button:first-child {
+  -moz-border-start-width: 0 !important;
+}
+
+.panel-row-button:last-child {
+  -moz-border-end-width: 0 !important;
+}
+
+@media (max-width: 499px) {
+  .panel-row-button {
+    -moz-box-orient: vertical;
+  }
+
+  .panel-row-button .toolbarbutton-text {
+    font-size: 14px !important;
+  }
+}
+
+.panel-row-button .toolbarbutton-text {
+  text-align: left;
+  text-shadow: rgba(0,0,0,0.3) 0 2px;
+}
+
+.panel-row-button .toolbarbutton-text:-moz-locale-dir(rtl) {
+  text-align: right;
+}
+
+.panel-row-button[disabled="true"] {
+  pointer-events: none;
+}
+
+.panel-row-button[disabled="true"] .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+.panel-row-button[disabled="true"] .toolbarbutton-text {
+  color: #aaa;
+}
+
+.panel-row-button[checked="true"] {
+  color: white !important;
+  background-color: rgb(94,97,102) !important;
+}
+
+.panel-row-button[checked="true"],
+.panel-row-button[disabled="true"] {
+  pointer-events: none;
+}