Merge pull request #21620 from vingtetun/mozbrowsermetachange

Bug 1033364 - Support mozbrowsermetachange in the window manager. r=alive.

apps/settings/elements/developer.html

@@ -123,6 +123,12 @@ <h2 data-l10n-id="window-management">Window Management</h2>
             <span data-l10n-id="app-transition">App transition</span>
           </label>
         </li>
+        <li>
+          <label class="pack-checkbox">
+            <input type="checkbox" name="app-brandcolor.enabled">
+            <span data-l10n-id="app-brandcolor">App brand color</span>
+          </label>
+        </li>
         <li>
           <label class="pack-checkbox">
             <input type="checkbox" name="app-suspending.enabled">

apps/settings/locales/settings.en-US.properties

@@ -1117,6 +1117,7 @@ home-gesture=Home gesture
 continuous-transition=Continuous transition
 debug-gaia-enabled=Gaia debug traces
 app-transition=App transition
+app-brandcolor=App brand color
 app-suspending=App suspending
 window-management=Window management
 

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>

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>';
   };
 

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';
@@ -642,7 +643,7 @@
     ['mozbrowserclose', 'mozbrowsererror', 'mozbrowservisibilitychange',
      'mozbrowserloadend', 'mozbrowseractivitydone', 'mozbrowserloadstart',
      'mozbrowsertitlechange', 'mozbrowserlocationchange',
-     'mozbrowsericonchange', 'mozbrowserasyncscroll',
+     'mozbrowsermetachange', 'mozbrowsericonchange', 'mozbrowserasyncscroll',
      '_localized', '_swipein', '_swipeout', '_kill_suspended',
      '_orientationchange', '_focus'];
 
@@ -676,7 +677,8 @@
     'mozbrowsershowmodalprompt',
     'mozbrowsertitlechange',
     'mozbrowserusernameandpasswordrequired',
-    'mozbrowseropensearch'
+    'mozbrowseropensearch',
+    'mozbrowsermetachange'
   ];
 
   AppWindow.prototype.openAnimation = 'enlarge';
@@ -752,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';
@@ -899,6 +898,15 @@
       this.publish('scroll');
     };
 
+  AppWindow.prototype._handle_mozbrowsermetachange =
+    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');
+      }
+    };
+
   AppWindow.prototype._registerEvents = function aw__registerEvents() {
     if (this.element === null) {
       this._dump();

apps/system/js/app_window_manager.js

@@ -269,6 +269,13 @@
               this.broadcastMessage('kill_suspended');
             }
           }.bind(this)
+        },
+
+        'app-brandcolor.enabled': {
+          defaultValue: false,
+          callback: function(value) {
+            screenElement.classList.toggle('brandcolor-active', value);
+          }
         }
       };
 

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);
 

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>';
   };
 

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

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;

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;
 }
 

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%;