From de0ee514be32af0677379b29013e55efb86ec49b Mon Sep 17 00:00:00 2001
From: Ben Francis <ben@tola.me.uk>
Date: Fri, 10 Jan 2014 21:13:51 +0000
Subject: [PATCH] Bug 958582 - Prevent long titles in the Rocketbar displacing
 status icons. r=daleharvey

---
 apps/system/index.html                    | 91 ++++++++++++-----------
 apps/system/style/statusbar/statusbar.css | 47 ++++++++++--
 2 files changed, 86 insertions(+), 52 deletions(-)

diff --git a/apps/system/index.html b/apps/system/index.html
index c8b9c7812492..8a7a43d77bb6 100644
--- a/apps/system/index.html
+++ b/apps/system/index.html
@@ -419,50 +419,53 @@
       <div id="statusbar" data-z-index-level="statusbar">
         <!-- Browser chrome title-->
         <div id="statusbar-title"></div>
-        <!-- Carrier & date label -->
-        <div id="statusbar-label" class="sb-start-upper"></div>
-        <!-- CDMA emergency callback Notification -->
-        <div id="statusbar-emergency-cb-notification" class="sb-start sb-icon sb-emergency-cb-icon-notification" hidden></div>
-        <!-- Notification -->
-        <div id="statusbar-notification" class="sb-start sb-icon sb-icon-notification"
-          data-num="" hidden></div>
-
-        <!-- Time -->
-        <div id="statusbar-time"></div>
-
-        <!-- Status -->
-        <div id="statusbar-battery" class="sb-icon sb-icon-battery"
-          data-level="100" charging hidden></div>
-        <div id="statusbar-wifi" class="sb-icon sb-icon-wifi"
-          data-level="4" hidden></div>
-        <div id="statusbar-flight-mode" class="sb-icon sb-icon-flight-mode" hidden></div>
-        <div id="statusbar-connections"></div>
-        <div id="statusbar-headphones" class="sb-icon sb-icon-headphones" hidden></div>
-        <div id="statusbar-bluetooth-headphones" class="sb-icon sb-icon-bluetooth-headphones" hidden></div>
-        <div id="statusbar-bluetooth-transferring" class="sb-icon sb-icon-bluetooth-transferring" hidden></div>
-
-        <!-- Permissions -->
-        <div id="statusbar-tethering" class="sb-icon sb-icon-tethering" hidden></div>
-        <div id="statusbar-alarm" class="sb-icon sb-icon-alarm" hidden></div>
-        <div id="statusbar-bluetooth" class="sb-icon sb-icon-bluetooth" hidden></div>
-        <div id="statusbar-mute" class="sb-icon sb-icon-mute" hidden></div>
-        <div id="statusbar-recording" class="sb-icon sb-icon-recording" hidden></div>
-        <div id="statusbar-sms" class="sb-icon sb-icon-sms" hidden></div>
-        <div id="statusbar-geolocation" class="sb-icon sb-icon-geolocation" hidden></div>
-        <div id="statusbar-usb" class="sb-icon sb-icon-usb" hidden></div>
-        <div id="statusbar-call-forwarding" class="sb-icon sb-icon-call-forwarding" hidden></div>
-        <div id="statusbar-playing" class="sb-icon sb-icon-playing" hidden></div>
-
-        <!-- Activity -->
-        <!-- HACK: We use images instead of divs to enforce allocation of a
-             dedicated layer just for this animated icons, remove after bug
-             717872 gets fixed -->
-        <img id="statusbar-system-downloads"
-             src="style/statusbar/images/system-downloads.png"
-             class="sb-icon-system-downloads" hidden>
-        <img id="statusbar-network-activity"
-             src="style/statusbar/images/network-activity.png"
-             class="sb-icon-network-activity" hidden>
+
+        <div id="statusbar-icons">
+          <!-- Time -->
+          <div id="statusbar-time"></div>
+
+          <!-- Status -->
+          <div id="statusbar-battery" class="sb-icon sb-icon-battery"
+            data-level="100" charging hidden></div>
+          <div id="statusbar-wifi" class="sb-icon sb-icon-wifi"
+            data-level="4" hidden></div>
+          <div id="statusbar-flight-mode" class="sb-icon sb-icon-flight-mode" hidden></div>
+          <div id="statusbar-connections"></div>
+          <div id="statusbar-headphones" class="sb-icon sb-icon-headphones" hidden></div>
+          <div id="statusbar-bluetooth-headphones" class="sb-icon sb-icon-bluetooth-headphones" hidden></div>
+          <div id="statusbar-bluetooth-transferring" class="sb-icon sb-icon-bluetooth-transferring" hidden></div>
+
+          <!-- Permissions -->
+          <div id="statusbar-tethering" class="sb-icon sb-icon-tethering" hidden></div>
+          <div id="statusbar-alarm" class="sb-icon sb-icon-alarm" hidden></div>
+          <div id="statusbar-bluetooth" class="sb-icon sb-icon-bluetooth" hidden></div>
+          <div id="statusbar-mute" class="sb-icon sb-icon-mute" hidden></div>
+          <div id="statusbar-recording" class="sb-icon sb-icon-recording" hidden></div>
+          <div id="statusbar-sms" class="sb-icon sb-icon-sms" hidden></div>
+          <div id="statusbar-geolocation" class="sb-icon sb-icon-geolocation" hidden></div>
+          <div id="statusbar-usb" class="sb-icon sb-icon-usb" hidden></div>
+          <div id="statusbar-call-forwarding" class="sb-icon sb-icon-call-forwarding" hidden></div>
+          <div id="statusbar-playing" class="sb-icon sb-icon-playing" hidden></div>
+
+          <!-- Activity -->
+          <!-- HACK: We use images instead of divs to enforce allocation of a
+               dedicated layer just for this animated icons, remove after bug
+               717872 gets fixed -->
+          <img id="statusbar-system-downloads"
+               src="style/statusbar/images/system-downloads.png"
+               class="sb-icon-system-downloads" hidden>
+          <img id="statusbar-network-activity"
+               src="style/statusbar/images/network-activity.png"
+               class="sb-icon-network-activity" hidden>
+
+          <!-- Carrier & date label -->
+          <div id="statusbar-label" class="sb-start-upper"></div>
+          <!-- CDMA emergency callback Notification -->
+          <div id="statusbar-emergency-cb-notification" class="sb-start sb-icon sb-emergency-cb-icon-notification" hidden></div>
+          <!-- Notification -->
+          <div id="statusbar-notification" class="sb-start sb-icon sb-icon-notification"
+            data-num="" hidden></div>
+        </div>
       </div>
       <div id="search-bar" data-z-index-level="search-bar">
         <form id="search-form" class="skin-dark">
diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css
index 7e5d747d465e..565ffdeae4ec 100644
--- a/apps/system/style/statusbar/statusbar.css
+++ b/apps/system/style/statusbar/statusbar.css
@@ -20,6 +20,10 @@ body, html {
   padding: 0.2rem 0;
   -moz-box-sizing: border-box;
   -moz-user-focus: ignore;
+
+  display: flex;
+  flex-direction: row;
+  -moz-user-select: none;
 }
 
 #screen.locked:not(.attention) #statusbar{
@@ -30,27 +34,54 @@ body, html {
   display: block;
 }
 
-#statusbar > * {
+#statusbar-icons > * {
   pointer-events: none;
   float: right;
   margin: 0 0.2rem;
 }
 
+#statusbar-title {
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-width: 33%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 0.3rem;
+}
+
+body:not(.rb-enabled) #statusbar-title {
+  display: none;
+}
+
+#statusbar-icons {
+  flex-grow: 1;
+  flex-shrink: 0;
+  min-width: 33%;
+  max-width: 67%;
+  -moz-user-focus: ignore;
+  -moz-user-select: none;
+}
+
+body:not(.rb-enabled) #statusbar-icons {
+  max-width: 100%;
+}
+
 #statusbar-title,
-body:not(.rb-enabled) #statusbar > .sb-start {
+body:not(.rb-enabled) #statusbar-icons > .sb-start {
   float: left;
   -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
 }
 
-*[dir=rtl] #statusbar > * {
+*[dir=rtl] #statusbar-icons > * {
   float: left;
 }
 
-*[dir=rtl] #statusbar > .sb-start {
+*[dir=rtl] #statusbar-icons > .sb-start {
   float: right;
 }
 
-#statusbar > .sb-start-upper {
+#statusbar-icons > .sb-start-upper {
   visibility: hidden;
   position: absolute;
   top: -2rem;
@@ -59,19 +90,19 @@ body:not(.rb-enabled) #statusbar > .sb-start {
   -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease;
 }
 
-*[dir=rtl] #statusbar > .sb-start-upper {
+*[dir=rtl] #statusbar-icons > .sb-start-upper {
   left: auto;
   right: 0;
 }
 
-.utility-tray #statusbar > .sb-start-upper,
+.utility-tray #statusbar-icons > .sb-start-upper,
 .utility-tray #statusbar > #statusbar-title,
 #statusbar-title.hidden {
   visibility: visible;
   -moz-transform: translateY(2rem);
 }
 
-.utility-tray #statusbar > .sb-start {
+.utility-tray #statusbar-icons > .sb-start {
   visibility: hidden;
   -moz-transform: translateY(2rem);
 }