Bug 1033364 - Change window layout to accomodate custom app color for…

… the status bar. r=alive
mozilla-b2g · Jul 11, 2014 · 88a22c3 · 88a22c3
1 parent bd9c3fb
commit 88a22c3
Show file tree

Hide file tree

Showing 16 changed files with 245 additions and 210 deletions.
diff --git a/apps/system/index.html b/apps/system/index.html
@@ -312,6 +312,7 @@
     <!-- Windows -->
     <!-- Any module that wants to intercept the Home button and prevent the -->
     <!-- homescreen from being displayed must come before this script. -->
+    <link rel="stylesheet" type="text/css" href="style/window_layout.css">
     <link rel="stylesheet" type="text/css" href="style/window.css">
     <script defer src="js/base_ui.js"></script>
     <script defer src="js/browser_context_menu.js"></script>

diff --git a/apps/system/js/activity_window.js b/apps/system/js/activity_window.js
@@ -167,6 +167,7 @@
             '" id="activity-window-' + _id++ + '">' +
             '<div class="screenshot-overlay"></div>' +
             '<div class="fade-overlay"></div>' +
+            '<div class="statusbar-overlay"></div>' +
             '</div>';
   };
 

diff --git a/apps/system/js/app_window.js b/apps/system/js/app_window.js
@@ -1,4 +1,4 @@
-/* global SettingsListener, OrientationManager, StatusBar */
+/* global SettingsListener, OrientationManager */
 'use strict';
 
 (function(exports) {
@@ -490,8 +490,8 @@
     return '<div class=" ' + this.CLASS_LIST +
             ' " id="' + this.instanceID +
             '" transition-state="closed">' +
-              '<div class="screenshot-overlay">' +
-              '</div>' +
+              '<div class="screenshot-overlay"></div>' +
+              '<div class="statusbar-overlay"></div>' +
               '<div class="identification-overlay">' +
                 '<div>' +
                   '<div class="icon"></div>' +
@@ -553,6 +553,7 @@
     // End intentional
 
     this.screenshotOverlay = this.element.querySelector('.screenshot-overlay');
+    this.statusbarOverlay = this.element.querySelector('.statusbar-overlay');
     this.fadeOverlay = this.element.querySelector('.fade-overlay');
 
     var overlay = '.identification-overlay';
@@ -753,9 +754,6 @@
     // Resize only the overlays not the app
     var width = self.layoutManager.width;
     var height = self.layoutManager.height + this.calibratedHeight();
-    if (this.isFullScreen()) {
-      height += StatusBar.height;
-    }
 
     this.iframe.style.width = this.width + 'px';
     this.iframe.style.height = this.height + 'px';
@@ -904,6 +902,7 @@
     function aw__handle_mozbrowsermetachange(evt) {
       if (evt.detail.name === 'brand-color') {
         this.brandColor = evt.detail.content;
+        this.statusbarOverlay.style.backgroundColor = this.brandColor;
         this.publish('brandcolorchange');
       }
     };

diff --git a/apps/system/js/attention_screen.js b/apps/system/js/attention_screen.js
@@ -27,6 +27,14 @@ var AttentionScreen = {
             !this.mainScreen.classList.contains('active-statusbar'));
   },
 
+  get statusHeight() {
+    if (this.isVisible() && !this.isFullyVisible()) {
+      return this.attentionScreen.getBoundingClientRect().height;
+    }
+
+    return 0;
+  },
+
   init: function as_init() {
     window.addEventListener('mozbrowseropenwindow', this.open.bind(this), true);
 

diff --git a/apps/system/js/homescreen_window.js b/apps/system/js/homescreen_window.js
@@ -166,6 +166,7 @@
   HomescreenWindow.prototype.view = function hw_view() {
     return '<div class="appWindow homescreen" id="homescreen">' +
               '<div class="fade-overlay"></div>' +
+              '<div class="statusbar-overlay"></div>' +
            '</div>';
   };
 

diff --git a/apps/system/js/layout_manager.js b/apps/system/js/layout_manager.js
@@ -1,5 +1,5 @@
-/* global KeyboardManager, softwareButtonManager, StatusBar,
-          System */
+/* global KeyboardManager, softwareButtonManager, System,
+          AttentionScreen */
 'use strict';
 
 (function(exports) {
@@ -55,7 +55,7 @@
     get height() {
       var height = window.innerHeight -
         (this.keyboardEnabled ? KeyboardManager.getHeight() : 0) -
-        StatusBar.height -
+        AttentionScreen.statusHeight -
         softwareButtonManager.height;
 
       // Normalizing the height so that it always translates to an integral

diff --git a/apps/system/js/lockscreen_window.js b/apps/system/js/lockscreen_window.js
@@ -1,6 +1,5 @@
 /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- /
 /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
-/* global StatusBar */
 'use strict';
 
 (function(exports) {
@@ -93,7 +92,7 @@
     var height, width;
 
     // We want the lockscreen to go below the StatusBar
-    height = self.layoutManager.height + StatusBar.height;
+    height = self.layoutManager.height;
     width = self.layoutManager.width;
 
     this.width = width;

diff --git a/apps/system/style/browser_frame/browser_frame.css b/apps/system/style/browser_frame/browser_frame.css
@@ -1,9 +1,4 @@
 iframe.browser {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   border: none;
 }
 
diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css
@@ -21,6 +21,10 @@
   transform-origin: left top;
 }
 
+#screen.brandcolor-active #statusbar-background {
+  visibility: hidden;
+}
+
 #statusbar {
   position: fixed;
   width: 100%;