Bug 688677 - Polish up the actionbar. r=mbrubeck

mobile/chrome/content/browser.xul

@@ -767,7 +767,7 @@
   <svg:svg height="0">
     <svg:mask id="back-button-mask" maskContentUnits="objectBoundingBox">
       <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
-      <svg:circle cx="-0.5" cy="0.5" r="0.7"/>
+      <svg:circle cx="-0.85" cy="0.5" r="0.96"/>
     </svg:mask>
   </svg:svg>
 

mobile/themes/core/honeycomb/browser.css

@@ -131,10 +131,10 @@ toolbarbutton.urlbar-button {
   color: @color_text_default@;
   background-color: transparent;
   -moz-box-align: center;
-  -moz-margin-end: @margin_xxxnormal@;
-  -moz-margin-start: 0px;
   padding: 0px;
   margin: 0px;
+  -moz-margin-end: @margin_normal@;
+  -moz-margin-start: 0px;
 }
 
 #urlbar-container[mode="edit"] > #identity-box {
@@ -142,6 +142,7 @@ toolbarbutton.urlbar-button {
   background-image: url("chrome://browser/skin/images/urlbar-border-side.png"),
                     url("chrome://browser/skin/images/favicon-default-32.png");
   background-position: bottom left, center center;
+  background-size: auto auto, 24px 24px;
   background-repeat: no-repeat;
 }
 
@@ -152,7 +153,6 @@ toolbarbutton.urlbar-button {
 /* URL bar cap buttons */
 .urlbar-cap-button {
   margin: 0 !important;
-  min-width: @touch_button_small@ !important;
   min-height: @urlbar_edit_height@ !important;
   max-height: @urlbar_edit_height@ !important;
   -moz-box-align: center;
@@ -164,7 +164,7 @@ toolbarbutton.urlbar-button {
   background-image: url("chrome://browser/skin/images/urlbar-border-side.png");
   background-position: bottom left;
   background-repeat: no-repeat;
-  padding: 0px @padding_tiny@;
+  padding: 0px @padding_xnormal@ 0px @padding_xxxnormal@;
   border-bottom: @border_width_small@ solid @color_url_border@;
 }
 
@@ -201,9 +201,8 @@ toolbarbutton.urlbar-button {
 }
 
 #urlbar-favicon {
-  width: 32px;
-  height: 32px;
-  image-rendering: -moz-crisp-edges;
+  width: 24px;
+  height: 24px;
 }
 
 #urlbar-favicon[src=""] {
@@ -211,24 +210,26 @@ toolbarbutton.urlbar-button {
 }
 
 /* Main urlbar textbox */
+#urlbar-title {
+  padding: @padding_xxnormal@ @padding_tiny@ @padding_xxxnormal@;
+}
+
 #urlbar-title.placeholder {
   color: @color_text_placeholder@;
 }
 
 #urlbar-edit,
 #urlbar-title {
-  font-size: @font_snormal@ !important;
+  font-size: @font_xsmall@ !important;
   background: @color_toolbar_background@;
-  padding: @padding_xxnormal@ @padding_small@;
   margin: 0px !important;
   min-height: @urlbar_edit_height@ !important;
   max-height: @urlbar_edit_height@;
   background-image: url("chrome://browser/skin/images/urlbar-border-side.png");
   background-position: bottom right;
   background-repeat: no-repeat;
-}
-
-#urlbar-title {
+  -moz-padding-start: @padding_small@ !important;
+  border: none;
   border-bottom: @border_width_small@ solid @color_url_border@;
 }
 
@@ -243,7 +244,6 @@ toolbarbutton.urlbar-button {
 
 #urlbar-edit {
   -moz-appearance: none !important;
-  border: none;
   border-bottom: @border_width_large@ solid @color_url_border@;
 }
 
@@ -264,8 +264,8 @@ toolbarbutton.urlbar-button {
   background-image: url("chrome://browser/skin/images/urlbar-border-side.png");
   background-position: bottom right;
   background-repeat: no-repeat;
-  padding: 0px 2px 1px;
   border-bottom: @border_width_small@ solid @color_url_border@;
+  padding: 0px @padding_normal@ @padding_tiny@ @padding_tiny@;
 }
 
 #urlbar-icons:-moz-locale-dir(rtl) {
@@ -278,8 +278,9 @@ toolbarbutton.urlbar-button {
 }
 
 #urlbar-icons toolbarbutton {
-  padding: 0px @padding_small@ !important;
+  padding: 0px @padding_normal@ !important;
   margin: 0px !important;
+  border: none;
 }
 
 #urlbar-icons[disabled="true"] {
@@ -287,6 +288,7 @@ toolbarbutton.urlbar-button {
 }
 
 #urlbar-icons[disabled="true"] > toolbarbutton {
+  border: none;
   opacity: 0.5;
 }
 
@@ -383,7 +385,10 @@ toolbarbutton.urlbar-button {
 
 #tool-menu {
   list-style-image: url("chrome://browser/skin/images/menu-hdpi.png");
+  margin: @margin_small@ 0px;
+  padding: @padding_xnormal@ @padding_large@ 0px!important;
   -moz-margin-end: 0px;
+  -moz-border-start: @border_width_tiny@ solid @color_button_border@;
 }
 
 .tool-star {
@@ -400,26 +405,32 @@ toolbarbutton.urlbar-button {
 }
 
 #tool-back2 {
-  margin: @margin_snormal@;
+  margin: @margin_small@ @margin_snormal@;
   /* adjust the min-width of this button to account for padding */
   min-width: -moz-calc(@touch_button_small@ - 2 * @margin_snormal@) !important;
-  border: @border_width_tiny@ solid @color_dialog_border@;
+  min-height: -moz-calc(@touch_button_small@ - 2 * @margin_snormal@) !important;
+  border: @border_width_small@ solid @color_url_border@;
   -moz-border-radius: 100%;
 }
 
 #tool-forward2 {
   margin: 0px;
   padding: 0px;
-  -moz-margin-start: -15px;
-  -moz-margin-end: -1px; /* cover up one pixel of transparent space created by the mask */
+  -moz-margin-start: -@margin_xxxnormal@;
+  -moz-margin-end: -@padding_tiny@;
+  -moz-padding-start: @padding_xxxnormal@ !important;
+  -moz-padding-end: @margin_xnormal@ !important;
   min-height: @urlbar_edit_height@ !important;
   max-height: @urlbar_edit_height@ !important;
+  min-width: 0px !important;
   mask: url(chrome://browser/content/browser.xul#back-button-mask);
-  border-bottom: @border_width_small@ solid @color_url_border@;
+  border: none;
+  border-bottom: @border_width_large@ solid @color_url_border@;
+  -moz-border-bottom-colors: @color_url_border@ transparent;
 }
 
 #tool-forward2[mode="edit"] {
-  border-bottom-width: @border_width_large@;
+  -moz-border-bottom-colors: @color_url_border@;
 }
 
 .tool-back:-moz-locale-dir(rtl),

mobile/themes/core/honeycomb/defines.inc

@@ -8,7 +8,7 @@
 %define color_toolbar_background #eaeaea
 %define color_toolbar_border #d9d9d9
 %define color_divider_border #6699ff
-%define color_url_border #222222
+%define color_url_border #737373
 %define color_button_border rgb(207,207,207)
 %define color_background_dialog #fff
 %define color_text_dialog #000
@@ -59,8 +59,10 @@
 %define touch_normal 6.77mozmm
 
 %define margin_context_popup 3.39mozmm
+%define margin_xlarge 3.39mozmm
 %define margin_large 2.54mozmm
 %define margin_xxxnormal 1.69mozmm
+%define margin_xxnormal 1.27mozmm
 %define margin_xnormal 1.06mozmm
 %define margin_normal 0.85mozmm
 %define margin_snormal 0.64mozmm
@@ -102,7 +104,7 @@
 
 %define progressmeter_height 3.39mozmm
 
-%define urlbar_edit_height 6.35mozmm
+%define urlbar_edit_height 5.25mozmm
 %define urlbar_edit_indent 0.85mozmm
 %define identity_popup_tablet_width 72mozmm
 

mobile/themes/core/honeycomb/platform.css

@@ -240,7 +240,6 @@ toolbarbutton {
   min-height: @touch_button_small@ !important; /* primary button size */
   -moz-appearance: none !important;
   padding: @padding_xsmall@;
-  -moz-margin-end: @margin_xxxnormal@;
 }
 
 toolbarbutton:not(.show-text) .toolbarbutton-text {

mobile/themes/core/tablet.css

@@ -146,6 +146,12 @@ documenttab[selected="true"] > vbox > stack > hbox > .documenttab-close[tablet]
   }
 }
 
+@media (@orientation@: landscape) {
+  #toolbar-main[tablet][tablet_sidebar] {
+    -moz-padding-start: @padding_xxnormal@;
+  }
+}
+
 #identity-container[tablet] #identity-popup-container {
   -moz-stack-sizing: ignore;
   max-width: @identity_popup_tablet_width@;