Bug 679472 - Theme actionbar on honeycomb. r=mfinkle

mobile/chrome/content/browser.js

@@ -724,6 +724,9 @@ var Browser = {
     newTab.chromeTab.dispatchEvent(event);
     newTab.browser.messageManager.sendAsyncMessage("Browser:TabOpen");
 
+    let cmd = document.getElementById("cmd_showTabs");
+    cmd.setAttribute("label", this._tabs.length - 1);
+
     return newTab;
   },
 
@@ -738,6 +741,9 @@ var Browser = {
     }
 
     tab.browser.messageManager.sendAsyncMessage("Browser:CanUnload", {});
+
+    let cmd = document.getElementById("cmd_showTabs");
+    cmd.setAttribute("label", this._tabs.length - 1);
   },
 
   _doCloseTab: function _doCloseTab(aTab) {

mobile/chrome/content/browser.xul

@@ -102,7 +102,7 @@
     <command id="cmd_openLocation" oncommand="CommandUpdater.doCommand(this.id);"/>
 
     <!-- tabs -->
-    <command id="cmd_showTabs" label="&showTabs.label;" oncommand="CommandUpdater.doCommand(this.id);"/>
+    <command id="cmd_showTabs" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_newTab" label="&newtab.label;" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_closeTab" label="&closetab.label;" oncommand="CommandUpdater.doCommand(this.id);"/>
 #ifdef MOZ_SERVICES_SYNC
@@ -222,6 +222,7 @@
                 <toolbar id="toolbar-main" class="panel-dark window-width" observes="bcast_urlbarState">
                   <toolbarbutton id="tool-back2" class="tool-back button-actionbar" command="cmd_back"/>
                   <toolbarbutton id="tool-forward2" class="tool-forward button-actionbar" command="cmd_forward"/>
+                  <toolbarbutton id="tool-tabs" class="button-actionbar" command="cmd_showTabs"/>
 #ifdef MOZ_PLATFORM_MAEMO
 #if MOZ_PLATFORM_MAEMO != 6
                   <toolbarbutton id="tool-app-switch" oncommand="BrowserUI.switchTask();"/>
@@ -261,8 +262,8 @@
                     </hbox>
                   </hbox>
                   <toolbarbutton id="tool-star2" class="tool-star button-actionbar" command="cmd_star"/>
+                  <spacer flex="1"/>
                   <toolbarbutton id="tool-menu" class="button-actionbar" command="cmd_menu"/>
-                  <toolbarbutton id="tool-tabs" class="button-actionbar" command="cmd_showTabs"/>
 #ifndef ANDROID
                   <toolbarbutton id="tool-app-close" class="urlbar-button" command="cmd_close"/>
 #endif

mobile/themes/core/honeycomb/defines.inc

@@ -0,0 +1,223 @@
+%filter substitution
+
+%define color_background_active #fff
+%define color_text_active #222222
+%define color_background_default_window #fff
+%define color_background_default rgba(255,255,255,0.95)
+%define color_text_default #222222
+%define color_divider_border #333333
+%define color_button_border #5a5a5a
+%define color_background_dialog #fff
+%define color_text_dialog #000
+%define color_dialog_border #5a5a5a
+%define color_background_dlgbuttons #9a9a9a
+%define color_background_panel #d6d6d6
+%define color_text_panel #000
+%define color_background_header #292929
+%define color_text_header #999999
+%define color_background_scroller #9a9a9a
+%define color_background_textbox #fff
+%define color_text_textbox #000
+%define color_text_button #000
+%define color_text_disabled #808080
+%define color_text_placeholder #808080
+%define color_text_as_link #febc2b
+
+%define color_background_highlight #a7c5f4
+%define color_background_highlight_overlay rgba(167, 197, 244, 0.8)
+%define color_text_highlight #000
+%define color_selection #c0e49a
+
+%define color_subtext_default #aaaaaa
+
+%ifdef ANDROID
+%define font_xlarge 6.08mozmm
+%define font_xnormal 3.75mozmm
+%define font_normal 3.54mozmm
+%define font_snormal 3mozmm
+%define font_small 2.91mozmm
+%define font_xsmall 2.69mozmm
+%define font_tiny 2.48mozmm
+%define font_xtiny 2.27mozmm
+
+%define touch_row 10.41mozmm
+%define touch_button_xlarge 10.62mozmm
+%define touch_button_large 9.77mozmm
+%define touch_button_small 8.93mozmm
+%define touch_button_minwidth 11.86mozmm
+%define touch_action_minwidth 21.17mozmm
+%define touch_normal 6.77mozmm
+
+%define margin_context_popup 3.39mozmm
+%define margin_large 2.54mozmm
+%define margin_xxxnormal 1.69mozmm
+%define margin_xnormal 1.06mozmm
+%define margin_normal 0.85mozmm
+%define margin_snormal 0.64mozmm
+%define margin_small 0.42mozmm
+%define margin_tiny 0.21mozmm
+%define margin_xtiny 0.11mozmm
+
+%define padding_xlarge 3.39mozmm
+%define padding_large 2.54mozmm
+%define padding_xxxnormal 1.69mozmm
+%define padding_xxnormal 1.27mozmm
+%define padding_xnormal 1.06mozmm
+%define padding_normal 0.85mozmm
+%define padding_snormal 0.64mozmm
+%define padding_small 0.42mozmm
+%define padding_xsmall 0.21mozmm
+%define padding_tiny 0.11mozmm
+
+%define border_width_xxlarge 0.64mozmm
+%define border_width_xlarge 0.42mozmm
+%define border_width_large 0.32mozmm
+%define border_width_small 0.21mozmm
+%define border_width_tiny 0.11mozmm
+
+%define border_radius_normal 0.85mozmm
+%define border_radius_small 0.64mozmm
+%define border_radius_tiny 0.21mozmm
+
+%define shadow_width_xlarge 1.06mozmm
+%define shadow_width_large 0.64mozmm
+%define shadow_width_small 0.21mozmm
+
+%define textbox_height 5.08mozmm
+
+%define dropmarker_padding 0.53mozmm
+
+%define progressmeter_height 3.39mozmm
+
+%define urlbar_edit_height 6.35mozmm
+%define urlbar_edit_indent 0.85mozmm
+%define urlbar_max_width   96mozmm
+
+%define scroller_thickness 0.64mozmm
+%define scroller_minimum 1.27mozmm
+
+%define sidebar_width_minimum 8.47mozmm
+%define sidebar_button_height 7.41mozmm
+%define documenttab_margin_bottom 0.85mozmm
+
+%define placelabel_padding 8.47mozmm
+%define placeitem_padding 4.23mozmm
+
+%define autocomplete_item_container_image_padding 0.53mozmm
+%define autocomplete_item_container_position 0.21mozmm
+%define autocomplete_item_container_size 2.75mozmm
+%define autocomplete_item_container_padding 5.08mozmm
+
+%define autocomplete_item_subtitle_margin 2.75mozmm
+%define autocomplete_item_label_margin 3.18mozmm
+%define autocomplete_item_tags_margin 3.39mozmm
+
+%define autocompleteresult_padding 0.53mozmm
+
+%define dialog_width 76.2mozmm
+
+%define appmenu_portrait_height 21.17mozmm
+%define appmenu_button_height  10.48mozmm
+
+%define tablet_panel_controls  40mozmm
+%define tablet_panel_minwidth  124mozmm
+%else
+%define font_xlarge 48px
+%define font_xnormal 26px
+%define font_normal 24px
+%define font_snormal 20px
+%define font_small 18px
+%define font_xsmall 16px
+%define font_tiny 14px
+%define font_xtiny 12px
+
+%define touch_row 70px
+%define touch_button_xlarge 72px
+%define touch_button_large 64px
+%define touch_button_small 56px
+%define touch_button_minwidth 112px
+%define touch_action_minwidth 200px
+%define touch_normal 64px
+
+%define margin_context_popup 32px
+%define margin_large 24px
+%define margin_xxxnormal 16px
+%define margin_xnormal 10px
+%define margin_normal 8px
+%define margin_snormal 6px
+%define margin_small 4px
+%define margin_tiny 2px
+%define margin_xtiny 1px
+
+%define padding_xlarge 32px
+%define padding_large 24px
+%define padding_xxxnormal 16px
+%define padding_xxnormal 12px
+%define padding_xnormal 10px
+%define padding_normal 8px
+%define padding_snormal 6px
+%define padding_small 4px
+%define padding_xsmall 2px
+%define padding_tiny 1px
+
+%define border_width_xxlarge 6px
+%define border_width_xlarge 4px
+%define border_width_large 3px
+%define border_width_small 2px
+%define border_width_tiny 1px
+
+%define border_radius_normal 8px
+%define border_radius_small 6px
+%define border_radius_tiny 2px
+
+%define shadow_width_xlarge 10px
+%define shadow_width_large 6px
+%define shadow_width_small 2px
+
+%define textbox_height 48px
+
+%define dropmarker_margin 5px
+
+%define progressmeter_height 32px
+
+%define urlbar_edit_height 60px
+%define urlbar_edit_indent 8px
+%define urlbar_max_width 596px
+
+%define scroller_thickness 6px
+%define scroller_minimum 12px
+
+%define sidebar_width_minimum 80px
+%define sidebar_button_height 70px
+%define documenttab_margin_bottom 8px
+
+%define placelabel_padding 80px
+%define placeitem_padding 40px
+
+%define autocomplete_item_container_image_padding 5px
+%define autocomplete_item_container_position 2px
+%define autocomplete_item_container_size 26px
+%define autocomplete_item_container_padding 48px
+
+%define autocomplete_item_subtitle_margin 26px
+%define autocomplete_item_label_margin 30px
+%define autocomplete_item_tags_margin 32px
+
+%define autocompleteresult_padding 5px
+
+%define dialog_width 500px
+
+%define appmenu_portrait_height 200px
+%define appmenu_button_height 99px
+
+%define tablet_panel_controls  270px
+%define tablet_panel_minwidth  801px
+%endif
+
+%ifdef MOZ_PLATFORM_MAEMO
+%define orientation -moz-device-orientation
+%elifdef ANDROID
+%define orientation -moz-device-orientation
+%else
+%define orientation orientation
+%endif

mobile/themes/core/honeycomb/platform.css

@@ -0,0 +1,772 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Mobile Browser.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 2008
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Mark Finkle <mfinkle@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* global skin ------------------------------------------------------------- */
+@import url(chrome://global/skin/);
+
+%filter substitution
+%include defines.inc
+
+/* general stuff ------------------------------------------------------------ */
+:root {
+  font-family: "Nokia Sans", Tahoma, sans-serif !important;
+  font-size: @font_normal@ !important;
+  background-color: @color_background_default_window@; /* force */
+  color: @color_text_default@; /* force */
+}
+
+::-moz-selection {
+  background-color: @color_selection@;
+  color: @color_text_highlight@;
+}
+
+menu,
+menuitem {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+description,
+label {
+  /* force mac to use the same margins as windows and linux */
+  -moz-margin-start: @margin_snormal@;
+  -moz-margin-end: @margin_snormal@;
+}
+
+/* Override any OS inverse themes */
+textbox {
+  color: @color_text_textbox@;
+  background-color: @color_background_textbox@;
+}
+
+/* textboxes --------------------------------------------------------------- */
+textbox:not([type="number"]) {
+  min-height: @textbox_height@;
+  border: @border_width_small@ solid @color_button_border@;
+  -moz-border-top-colors: -moz-initial;
+  -moz-border-right-colors: -moz-initial;
+  -moz-border-bottom-colors: -moz-initial;
+  -moz-border-left-colors: -moz-initial;
+}
+
+textbox[isempty="true"] {
+  color: @color_text_placeholder@;
+}
+
+textbox.search-bar {
+  border: @border_width_small@ solid rgba(0,0,0,0.4);
+  background-color: #f9f9f9;
+  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
+  background-size: 100% 100%; 
+}
+
+textbox[disabled="true"] {
+  background-color: lightgray;
+}
+
+.link {
+  color: @color_text_as_link@;
+  text-decoration: underline;
+}
+
+/* sidebars spacer --------------------------------------------------------- */
+.sidebar-spacer {
+  background-color: #767973;
+}
+
+/* prompt dialogs ---------------------------------------------------------- */
+.context-block,
+.modal-block,
+.perm-modal-block {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  background-color: rgba(0,0,0,.6);
+}
+
+.context-block {
+  padding: @margin_context_popup@;
+}
+
+.dialog-dark,
+.panel-arrowcontent {
+  background-color: @color_background_dialog@;
+  box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@, black 0 -@border_radius_tiny@ @border_radius_tiny@;
+  padding: 0;
+}
+
+@media (max-width: 499px) {
+  .context-block {
+    padding: @padding_xlarge@;
+  }
+}
+
+dialog > .prompt-header > .prompt-message {
+  white-space: pre-wrap;
+}
+
+dialog > .prompt-header > .button-checkbox {
+  margin-left: @margin_large@;
+}
+
+/* buttons ----------------------------------------------------------------- */
+.button-text,
+.toolbarbutton-text {
+  font-weight: normal;
+  font-size: @font_snormal@ !important;
+}
+
+button {
+  -moz-appearance: none;
+  min-width: @touch_button_minwidth@ !important;
+  min-height: @touch_button_small@ !important; /* button size */
+  color: @color_text_button@;
+  margin: @margin_normal@;
+  padding: @padding_xnormal@;
+  background-image: url("chrome://browser/skin/images/button-bg.png");
+  background-size: auto 100%;
+  border: @border_width_tiny@ solid @color_button_border@;
+}
+
+button[disabled="true"] {
+  color: @color_text_disabled@ !important;
+  border: @border_width_tiny@ solid @color_button_border@ !important;
+}
+
+button:focus > .button-box {
+  border: @border_width_tiny@ solid transparent;
+}
+
+button:not([disabled]):hover:active,
+button:not([disabled])[checked="true"] {
+  background-image: url("chrome://browser/skin/images/toggle-off.png");
+}
+
+/* Override GTK2 system setting */
+.button-icon {
+  display: -moz-initial !important;
+}
+
+/* spinbuttons ------------------------------------------------------------- */
+spinbuttons {
+  border: none !important;
+}
+
+.numberbox-input-box {
+  border: @border_width_small@ solid @color_button_border@;
+  border-right: 0 solid transparent;
+  -moz-border-top-colors: -moz-initial;
+  -moz-border-bottom-colors: -moz-initial;
+  -moz-border-left-colors: -moz-initial;
+}
+
+.numberbox-input-box:-moz-locale-dir(rtl) {
+  border-right: @border_width_small@ solid @color_button_border@;
+  border-left: 0 solid transparent;
+}
+
+.spinbuttons-box {
+  border: none !important;
+  -moz-box-orient: horizontal !important;
+  -moz-box-direction: reverse !important;
+}
+
+.spinbuttons-up .button-icon,
+.spinbuttons-down .button-icon {
+  display: block;
+}
+
+.spinbuttons-up,
+.spinbuttons-down {
+  -moz-appearance: none !important;
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
+  color: @color_text_button@;
+  margin: @margin_normal@;
+  padding: @padding_xnormal@;
+  background-image: url("chrome://browser/skin/images/button-bg.png");
+  background-size: auto 100%;
+  border: @border_width_tiny@ solid @color_button_border@;
+  list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
+}
+
+.spinbuttons-up:hover:active:not([disabled=true]),
+.spinbuttons-down:hover:active:not([disabled=true]) {
+  background-image: url("chrome://browser/skin/images/toggle-on.png");
+}
+
+.spinbuttons-up {
+  list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
+}
+
+/* toolbar buttons --------------------------------------------------------- */
+toolbar {
+  -moz-appearance: none;
+  background-color: @color_background_default@;
+  max-height: @touch_button_large@;
+}
+
+toolbarbutton {
+  min-width: @touch_button_xlarge@ !important; /* primary button size */
+  min-height: @touch_button_xlarge@ !important; /* primary button size */
+  -moz-appearance: none !important;
+  padding: @padding_xsmall@;
+  -moz-margin-end: @margin_xxxnormal@;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-text {
+  display: none;
+}
+
+.toolbarbutton-icon[label]:not([label=""]),
+.toolbarbutton-icon[type="menu"] {
+  -moz-margin-end: @margin_tiny@;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-icon,
+toolbarbutton:not([image]) .toolbarbutton-icon,
+toolbarbutton[image=''] .toolbarbutton-icon {
+  -moz-margin-end: 0;
+}
+
+toolbarbutton:hover,
+toolbarbutton:hover:active,
+toolbarbutton[open="true"] {
+  border-color: transparent;
+}
+
+toolbarbutton:not([disabled="true"]):active,
+toolbarbutton:not([disabled="true"])[open="true"] {
+  background-color: @color_background_highlight@;
+}
+
+/* checkbox buttons ----------------------------------------------------------- */
+.button-checkbox {
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  -moz-border-image: none !important;
+  color: @color_text_default@;
+  -moz-box-align: center;
+  font-size: @font_small@;
+  -moz-box-align: center;
+}
+
+.prompt-checkbox-label {
+  text-align: left;
+}
+
+.button-checkbox > .button-image-icon {
+  -moz-margin-end: @margin_normal@;
+  list-style-image: url("chrome://browser/skin/images/check-unselected-hdpi.png");
+}
+
+.button-checkbox[checked="true"] > .button-image-icon {
+  list-style-image: url("chrome://browser/skin/images/check-selected-hdpi.png");
+}
+
+.button-checkbox > .button-box,
+.button-checkbox:hover:active > .button-box,
+.button-checkbox[checked="true"] > .button-box {
+  padding-top: @padding_tiny@;
+  padding-bottom: @padding_xsmall@;
+  -moz-padding-start: @padding_small@;
+  -moz-padding-end: @padding_small@;
+}
+
+/* radio buttons ----------------------------------------------------------- */
+radiogroup {
+  -moz-box-orient: horizontal;
+}
+
+.radio-label {
+  font-weight: normal;
+  font-size: @font_snormal@ !important;
+}
+
+radio {
+  -moz-appearance: none;
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
+  color: @color_text_button@;
+  padding: @padding_xnormal@;
+  margin: 0;
+  background-image: url("chrome://browser/skin/images/button-bg.png");
+  background-size: auto 100%;
+  border-top: @border_width_tiny@ solid @color_button_border@;
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+}
+
+radio .radio-icon, radio .radio-check {
+  display: none;
+}
+
+radio:not([disabled=true]):hover:active,
+radio[selected] {
+  color: white;
+  background-image: url("chrome://browser/skin/images/toggle-on.png");
+}
+
+radio:first-child {
+  border-left: @border_width_tiny@ solid @color_button_border@;
+}
+
+radio:first-child:-moz-locale-dir(rtl) {
+  border-left: none;
+  border-right: @border_width_tiny@ solid @color_button_border@;
+}
+
+radio:last-child {
+  border-right: @border_width_tiny@ solid @color_button_border@;
+}
+
+radio:last-child:-moz-locale-dir(rtl) {
+  border-right: none;
+  border-left: @border_width_tiny@ solid @color_button_border@;
+}
+
+radio[focused="true"] > .radio-label-box {
+  border: @border_width_tiny@ solid transparent;
+}
+
+/* checkbox  --------------------------------------------------------------- */
+checkbox {
+  margin: @margin_tiny@ @margin_small@ @margin_tiny@ @margin_small@; /* match platform style for buttons */
+  -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox-with-spacing") !important;
+}
+
+/* stop the focus from moving/showing the border around the label, which we don't use */
+checkbox:focus > .checkbox-label-center-box > .checkbox-label-box {
+  border: 1px solid transparent;
+}
+
+.checkbox-check {
+  border: 2px transparent;
+  -moz-border-top-colors: -moz-initial;
+  -moz-border-right-colors: -moz-initial;
+  -moz-border-bottom-colors: -moz-initial;
+  -moz-border-left-colors: -moz-initial;
+  width: 46px;
+  height: 46px;
+  background: url("chrome://browser/skin/images/check-unselected-hdpi.png") no-repeat 50% 50%;
+}
+
+checkbox[checked="true"] > .checkbox-spacer-box > .checkbox-check {
+  background-image: url("chrome://browser/skin/images/check-selected-hdpi.png");
+}
+
+checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check {
+  background-image: url("chrome://browser/skin/images/check-selected-hdpi.png");
+}
+
+/* richlistbox ------------------------------------------------------------- */
+richlistbox {
+  color: @color_text_default@;
+  background-color: @color_background_default@;
+  -moz-user-focus: ignore;
+  margin: 0;
+}
+
+richlistitem {
+  -moz-user-focus: ignore;
+  min-height: @touch_row@; /* row size */
+  padding: @padding_small@;
+  border-bottom: @border_width_tiny@ solid @color_divider_border@;
+}
+
+richlistitem label.title,
+richlistitem description.title {
+  font-size: @font_normal@ !important;
+}
+
+richlistitem label.normal,
+richlistitem description.normal {
+  color: @color_subtext_default@;
+  font-size: @font_small@ !important;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+richlistitem label.normal-black,
+richlistitem description.normal-black {
+  font-size: @font_small@  !important;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+richlistitem label.normal-bold,
+richlistitem description.normal-bold {
+  font-weight: bold;
+  font-size: @font_small@  !important;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+richlistitem[selected="true"] {
+  color: @color_text_default@;
+  background-color: @color_background_default@;
+}
+
+richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]),
+richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]) label.normal,
+richlistitem:hover:active:not([selected="true"]):not([nohighlight="true"]) description.normal {
+  background-color: @color_background_highlight@;
+  color: @color_text_highlight@;
+}
+
+richlistitem.section-header,
+richlistitem[selected="true"].section-header {
+  font-weight: bold;
+  color: @color_text_header@;
+  background-color: @color_background_header@;
+}
+
+richlistitem .show-on-select {
+  visibility: collapse;
+}
+
+richlistitem[selected="true"] .show-on-select {
+  visibility: visible;
+}
+
+richlistitem .hide-on-select {
+  visibility: visible;
+}
+
+richlistitem[selected="true"] .hide-on-select {
+  visibility: collapse;
+}
+
+richlistitem[typeName="message"] {
+  border-bottom: 0;
+}
+
+/* colorpicker ------------------------------------------------------------- */
+colorpicker > panel {
+  background-color: #767973;
+}
+
+colorpicker > vbox {
+  background-color: #767973;
+}
+
+/* textbox ----------------------------------------------------------------- */
+.textbox-search-icon {
+  list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
+  -moz-image-region: auto;
+}
+
+.textbox-search-clear {
+  list-style-image: url("chrome://browser/skin/images/search-clear-30.png");
+  -moz-image-region: auto;
+}
+
+/* menulist ---------------------------------------------------------------- */
+.menulist-label {
+  font-family: "Nokia Sans", Tahoma, sans-serif !important;
+  font-weight: normal;
+  font-size: @font_snormal@  !important;
+  background-color: transparent !important;
+}
+
+menulist {
+  -moz-appearance: none !important;
+  -moz-user-focus: ignore;
+  min-width: @touch_button_minwidth@ !important;
+  min-height: @touch_button_small@ !important; /* button size */
+  color: @color_text_button@ !important;
+  margin: @margin_normal@;
+  padding: @padding_small@ @padding_xnormal@;
+  background-image: url("chrome://browser/skin/images/button-bg.png");
+  background-size: auto 100%;
+  border: @border_width_tiny@ solid @color_button_border@;
+}
+
+menulist[disabled="true"] {
+  color: @color_text_disabled@ !important;
+  border: @border_width_tiny@ solid @color_button_border@ !important;
+}
+
+menulist:not([disabled="true"]):hover:active {
+  background-image: url("chrome://browser/skin/images/toggle-off.png");
+}
+
+menulist > dropmarker {
+  height: 32px;
+  width: 32px;
+  margin-left: @margin_snormal@;
+  background-color: transparent; /* for windows */
+  border: none;                  /* for windows */
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  list-style-image: url("chrome://browser/skin/images/dropmarker-hdpi.png");
+  -moz-image-region: auto;
+  display: block;
+}
+
+menulist[disabled="true"] > dropmarker {
+  opacity: 0.5;
+}
+
+/* progressmeter ----------------------------------------------------------- */
+progressmeter {
+  background-color: #fff;
+  padding: @padding_small@;
+  height: @textbox_height@;
+  border: @border_width_large@ solid #aaa;
+  -moz-border-top-colors: -moz-initial;
+  -moz-border-right-colors: -moz-initial;
+  -moz-border-bottom-colors: -moz-initial;
+  -moz-border-left-colors: -moz-initial;
+}
+
+.progress-bar {
+  background-color: @color_background_highlight@;
+}
+
+/* panels / arrowboxes------------------------------------------------------ */
+arrowbox {
+  -moz-appearance: none;
+  background: transparent !important;
+  border: none;
+}
+
+.arrowbox-dark .panel-arrowcontent {
+  padding: @padding_normal@; /* core spacing */
+}
+
+dialog,
+.arrowbox-dark .panel-arrowcontent,
+.panel-dark {
+  color: @color_text_default@;
+  background: @color_background_default@;
+}
+
+dialog,
+.arrowbox-dark .panel-arrowcontent {
+  border: @border_width_small@ solid @color_dialog_border@;
+  box-shadow: black 0 @shadow_width_small@ @shadow_width_small@;
+}
+
+dialog {
+  margin: @margin_xxxnormal@ !important;
+  max-width: @dialog_width@;
+}
+
+.prompt-message {
+  -moz-box-pack: center;
+  font-size: @font_snormal@;
+  margin: @padding_normal@;
+}
+
+.prompt-title {
+  font-size: @font_xnormal@;
+  padding-top: @padding_xnormal@;
+  padding-left: @padding_normal@;
+}
+
+/* Authentication dialogs do not have a title */
+.prompt-title:empty,
+.prompt-title:empty + .prompt-line {
+  display: none;
+}
+
+.prompt-line {
+  border-bottom: @border_width_tiny@ solid @color_divider_border@;
+  margin: @margin_small@ 0 0 0;
+  height: @padding_normal@ !important;
+}
+
+.prompt-buttons {
+  font-size: @font_snormal@;
+  background-color: @color_background_dlgbuttons@;
+  display: inline-block;
+  text-align: center;
+}
+
+.prompt-edit {
+  margin: @margin_xnormal@;
+  font-size: @font_normal@;
+  text-align: start;
+}
+
+.panel-arrow[side="top"] {
+  list-style-image: url("chrome://browser/skin/images/arrowbox-up.png");
+  margin-bottom: -@margin_snormal@;
+}
+
+.panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://browser/skin/images/arrowbox-down.png");
+  margin-top: -@margin_snormal@;
+}
+
+.panel-arrow[side="left"] {
+  list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
+  margin-right: -@margin_snormal@;
+  -moz-transform: scaleX(-1);
+}
+
+.panel-arrow[side="right"] {
+  list-style-image: url("chrome://browser/skin/images/arrowbox-horiz.png");
+  margin-left: -@margin_snormal@;
+}
+
+/*.panel-row-header ------------------------------------------------------------ */
+.panel-row-header {
+  border-bottom: @border_width_xxlarge@ solid @color_background_active@;
+  background-color: @color_background_header@ !important;
+  color: @color_text_header@;
+  padding: 0 !important;
+}
+
+.panel-row-button {
+  color: @color_text_header@;
+  -moz-appearance: none;
+  background-size: 100% 100%;
+  border: 0 solid transparent !important;
+  -moz-border-start: @border_width_tiny@ solid rgba(255,255,255,0.2) !important;
+  -moz-border-end: @border_width_tiny@ solid rgba(0,0,0,0.2) !important;
+  padding-top: @padding_xsmall@ !important;
+  padding-bottom: @padding_xsmall@ !important;
+  -moz-padding-start: @padding_xsmall@ !important;
+  -moz-padding-end: @padding_xsmall@ !important;
+  -moz-box-flex: 1;
+  -moz-user-focus: ignore;
+  -moz-user-select: none;
+}
+
+.panel-row-button:hover:active {
+  background: @color_background_active@;
+  color: @color_text_active@;
+  background-size: 100% 100%;
+}
+
+.panel-row-button:first-child {
+  -moz-border-start-width: 0 !important;
+}
+
+.panel-row-button:last-child {
+  -moz-border-end-width: 0 !important;
+}
+
+@media (@orientation@: portrait) {
+  .panel-row-button {
+    -moz-box-orient: vertical;
+  }
+
+  .panel-row-button .toolbarbutton-text {
+    font-size: @font_xsmall@ !important;
+  }
+}
+
+.panel-row-button .toolbarbutton-text {
+  text-align: left;
+}
+
+.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: @color_text_disabled@;
+}
+
+.panel-row-button[checked="true"] {
+  background: @color_background_active@;
+  color: @color_text_active@;
+  background-size: 100% 100% !important;
+}
+
+.panel-row-button[checked="true"],
+.panel-row-button[disabled="true"] {
+  pointer-events: none;
+}
+
+#panel-container-inner {
+  -moz-box-orient: vertical;
+}
+
+#panel-controls {
+  -moz-box-orient: horizontal;
+}
+
+@media (min-width: @tablet_panel_minwidth@) {
+  #panel-container-inner {
+    -moz-box-orient: horizontal;
+    -moz-box-pack: center;
+  }
+
+  #panel-items {
+    max-width: @tablet_panel_minwidth@;
+    min-width: 0px !important;
+  }
+  
+  /* This will affect the prefs screen, but not the awesome screen */
+  #panel-controls {
+    -moz-box-orient: vertical !important;
+    -moz-box-align: start;
+  }
+  
+  #panel-controls > .panel-row-button {
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 0;
+    min-width: @tablet_panel_controls@ !important;
+  }
+
+  #panel-controls .toolbarbutton-text {
+    display: -moz-box !important;
+    -moz-box-flex: 1;
+  }
+  
+  #panel-container {
+    -moz-box-pack: center;
+    padding: @padding_xlarge@ 0px;
+  }
+}
+
+/* because the buttons can wrap, we need to use the margin to create inter-button
+  spacing and a bottom margin for the notification */
+notification > button {
+  margin-bottom: @margin_normal@;
+}

mobile/themes/core/jar.mn

@@ -268,13 +268,13 @@ chrome.jar:
   skin/honeycomb/aboutPage.css                        (aboutPage.css)
   skin/honeycomb/about.css                            (about.css)
   skin/honeycomb/aboutHome.css                        (aboutHome.css)
-* skin/honeycomb/browser.css                          (browser.css)
+* skin/honeycomb/browser.css                          (honeycomb/browser.css)
 * skin/honeycomb/content.css                          (content.css)
   skin/honeycomb/config.css                           (config.css)
 * skin/honeycomb/forms.css                            (forms.css)
   skin/honeycomb/header.css                           (header.css)
 * skin/honeycomb/notification.css                     (notification.css)
-* skin/honeycomb/platform.css                         (platform.css)
+* skin/honeycomb/platform.css                         (honeycomb/platform.css)
   skin/honeycomb/touchcontrols.css                    (touchcontrols.css)
 * skin/honeycomb/localePicker.css                     (localePicker.css)
   skin/honeycomb/netError.css                         (netError.css)
@@ -384,10 +384,14 @@ chrome.jar:
   skin/honeycomb/images/scrubber-hdpi.png             (honeycomb/images/scrubber-hdpi.png)
   skin/honeycomb/images/handle-start.png              (images/handle-start.png)
   skin/honeycomb/images/handle-end.png                (images/handle-end.png)
-  skin/honeycomb/images/tabs-hdpi.png                 (images/tabs-hdpi.png)
-  skin/honeycomb/images/menu-hdpi.png                 (images/menu-hdpi.png)
+  skin/honeycomb/images/tabs-hdpi.png                 (honeycomb/images/tabs-hdpi.png)
+  skin/honeycomb/images/menu-hdpi.png                 (honeycomb/images/menu-hdpi.png)
   skin/honeycomb/images/errorpage-warning.png         (images/errorpage-warning.png)
   skin/honeycomb/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/honeycomb/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
   skin/honeycomb/images/homescreen-blank-hdpi.png     (images/homescreen-blank-hdpi.png)
   skin/honeycomb/images/homescreen-default-hdpi.png   (images/homescreen-default-hdpi.png)
+  skin/honeycomb/images/urlbar-border-side.png        (honeycomb/images/urlbar-border-side.png)
+  skin/honeycomb/images/urlbar-border-bottom.png      (honeycomb/images/urlbar-border-bottom.png)
+  skin/honeycomb/images/urlbar-border-side-active.png (honeycomb/images/urlbar-border-side-active.png)
+  skin/honeycomb/images/urlbar-border-bottom-active.png (honeycomb/images/urlbar-border-bottom-active.png)