Merge pull request #15318 from benfrancis/958582

Bug 958582 - Prevent long titles in the Rocketbar displacing status icons r=daleharvey
mozilla-b2g · Jan 15, 2014 · 7dc21df · 7dc21df
2 parents 482a62a + 2ecb9a9
commit 7dc21df
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 52 deletions.
diff --git a/apps/system/index.html b/apps/system/index.html
@@ -421,50 +421,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
@@ -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,55 @@ body, html {
   display: block;
 }
 
-#statusbar > * {
+#statusbar-icons > * {
   pointer-events: none;
   float: right;
   margin: 0 0.2rem;
 }
 
+#statusbar-title {
+  pointer-events: none;
+  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 +91,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);
 }