From fe0d1969665ed1d03b5a242a990a95e3bd69fa42 Mon Sep 17 00:00:00 2001
From: Jonathan Wilde <jwilde@jwilde.me>
Date: Tue, 16 Jul 2013 13:38:05 -0700
Subject: [PATCH] Bug 867543 - Part 2 - Add static labels. r=mbrubeck

--HG--
extra : rebase_source : bc7b5b58ecc667982160e325b99a45eb2cd9fd2a
---
 browser/metro/base/content/browser.xul | 22 ++++++++++++++++------
 browser/metro/theme/browser.css        |  3 +++
 browser/metro/theme/defines.inc        |  1 +
 browser/metro/theme/platform.css       | 15 ++++++++++++++-
 4 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/browser/metro/base/content/browser.xul b/browser/metro/base/content/browser.xul
index 50c6d36fc28..cc03b52e925 100644
--- a/browser/metro/base/content/browser.xul
+++ b/browser/metro/base/content/browser.xul
@@ -361,12 +361,22 @@
 
     <!-- Context button bar -->
     <appbar id="contextappbar">
-      <toolbar id="contextualactions-tray" flex="1">
-        <toolbarbutton id="delete-selected-button" class="appbar-secondary" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('delete')"/>
-        <toolbarbutton id="restore-selected-button" class="appbar-secondary" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('restore')"/>
-        <toolbarbutton id="pin-selected-button" class="appbar-secondary" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('pin')"/>
-        <toolbarbutton id="unpin-selected-button" class="appbar-secondary" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('unpin')"/>
-        <toolbarbutton id="clear-selected-button" class="appbar-secondary" hidden="true" fade="true" oncommand="Appbar.dispatchContextualAction('clear')"/>
+      <toolbar id="contextualactions-tray" labelled="true" flex="1">
+        <toolbarbutton id="delete-selected-button" class="appbar-secondary"
+                       hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('delete')"/>
+        <toolbarbutton id="restore-selected-button" class="appbar-secondary"
+                       hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('restore')"/>
+        <toolbarbutton id="pin-selected-button" class="appbar-secondary"
+                       hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('pin')"/>
+        <toolbarbutton id="unpin-selected-button" class="appbar-secondary"
+                       hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('unpin')"/>
+        <toolbarbutton id="clear-selected-button" class="appbar-secondary"
+                       hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('clear')"/>
       </toolbar>
     </appbar>
 
diff --git a/browser/metro/theme/browser.css b/browser/metro/theme/browser.css
index e905e8cf1c9..c03f87a5316 100644
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -414,6 +414,9 @@ documenttab[selected] .documenttab-selection {
   transition-timing-function: ease-in;
   transition-delay: 80ms;
 }
+#contextualactions-tray > toolbarbutton > .toolbarbutton-text {
+  color: white;
+}
 
 #pin-selected-button {
   -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
diff --git a/browser/metro/theme/defines.inc b/browser/metro/theme/defines.inc
index 871984be1ee..17a6801aeda 100644
--- a/browser/metro/theme/defines.inc
+++ b/browser/metro/theme/defines.inc
@@ -19,6 +19,7 @@
 %define toolbar_vertical_spacing 5px
 %define toolbar_horizontal_spacing 20px
 %define toolbar_height 68px
+%define labelled_toolbar_height 90px
 %define tabs_height 178px
 %define findbar_height 54px
 
diff --git a/browser/metro/theme/platform.css b/browser/metro/theme/platform.css
index 32b7c21ecdd..02e2a9ff471 100644
--- a/browser/metro/theme/platform.css
+++ b/browser/metro/theme/platform.css
@@ -498,7 +498,6 @@ notification {
   -moz-box-flex: 9999;
 }
 
-
 /* Dialogs ----------------------------------------------------------------- */
 
 .modal-block,
@@ -708,6 +707,20 @@ appbar toolbar > toolbarbutton[disabled] {
   visibility: collapse;
 }
 
+appbar toolbar[labelled] {
+  min-height: @labelled_toolbar_height@;
+}
+
+appbar toolbar[labelled] > toolbarbutton {
+  -moz-box-orient: vertical;
+}
+
+appbar toolbar[labelled] > toolbarbutton > .toolbarbutton-text {
+  display: block;
+  padding-top: @metro_spacing_small@;
+  font-size: 0.75rem;
+}
+
 /* Sprites */
 
 .appbar-primary > .toolbarbutton-icon,