Bug 1141832 - merge pull request #29298 from julienw:1141832-secure-l…

…ock to mozilla-b2g:master

apps/system/js/app_chrome.js

@@ -66,10 +66,6 @@
 
   AppChrome.prototype._DEBUG = false;
 
-  AppChrome.prototype.LOCK_ICON_WIDTH = 30;
-  AppChrome.prototype.CLOSE_BUTTON_WIDTH = 50;
-  AppChrome.prototype.PRIVATE_ICON_WIDTH = 35;
-
   AppChrome.prototype.reConfig = function() {
     var chrome = this.app.config.chrome;
     if (!chrome) {
@@ -112,16 +108,16 @@
   AppChrome.prototype.combinedView = function an_combinedView() {
     var className = this.CLASS_NAME + this.instanceID;
 
-    return `<div class="chrome" id="${className}">
+    return `<div class="chrome chrome-combined" id="${className}">
               <gaia-progress></gaia-progress>
               <div class="controls">
                 <button type="button" class="back-button"
                         data-l10n-id="back-button" disabled></button>
                 <button type="button" class="forward-button"
                         data-l10n-id="forward-button" disabled></button>
-                <div class="urlbar">
+                <div class="urlbar js-chrome-ssl-information">
                   <span class="pb-icon"></span>
-                  <div class="title" data-ssl=""></div>
+                  <div class="title chrome-ssl-indicator"></div>
                   <button type="button" class="reload-button"
                           data-l10n-id="reload-button" disabled></button>
                   <button type="button" class="stop-button"
@@ -137,11 +133,15 @@
   AppChrome.prototype.view = function an_view() {
     var className = this.CLASS_NAME + this.instanceID;
 
-    return `<div class="chrome" id="${className}">
+    return `<div class="chrome chrome-plain" id="${className}">
             <gaia-progress></gaia-progress>
             <section role="region" class="bar">
-              <gaia-header action="close">
+              <gaia-header action="close" class='js-chrome-ssl-information'>
+                <div class="chrome-ssl-indicator chrome-ssl-indicator-ltr">
+                </div>
                 <h1 class="title"></h1>
+                <div class="chrome-ssl-indicator chrome-ssl-indicator-rtl">
+                </div>
               </gaia-header>
             </section>
           </div>`;
@@ -186,6 +186,8 @@
     this.menuButton = this.element.querySelector('.menu-button');
     this.windowsButton = this.element.querySelector('.windows-button');
     this.title = this.element.querySelector('.title');
+    this.sslIndicator =
+      this.element.querySelector('.js-chrome-ssl-information');
 
     this.bar = this.element.querySelector('.bar');
     if (this.bar) {
@@ -260,11 +262,6 @@
       case '_namechanged':
         this.handleNameChanged(evt);
         break;
-
-      case 'localized':
-        // may need to re-layout header if document direction has changed
-        this._updateHeaderBarLayout();
-        break;
     }
   };
 
@@ -384,7 +381,6 @@
     this.app.element.addEventListener('_loading', this);
     this.app.element.addEventListener('_loaded', this);
     this.app.element.addEventListener('_namechanged', this);
-    window.addEventListener('localized', this);
 
     var element = this.element;
 
@@ -439,7 +435,6 @@
     this.app.element.removeEventListener('_loading', this);
     this.app.element.removeEventListener('_loaded', this);
     this.app.element.removeEventListener('_namechanged', this);
-    window.removeEventListener('localized', this);
     this.app = null;
   };
 
@@ -483,38 +478,12 @@
   };
 
   AppChrome.prototype.handleSecurityChanged = function(evt) {
-    this.title.dataset.ssl = this.app.getSSLState();
-    // we may need to show or hide the lock icon
-    this._updateHeaderBarLayout();
-  };
-
-  AppChrome.prototype._updateHeaderBarLayout = function() {
-    if (this.useCombinedChrome()) {
-      return;
-    }
-    // we need to create space for the lock icon at the correct edge
-    // NOTE: gaia-header doesn't handle RTL - see bug 1140668
-    // when it does, we'll need to revisit/remove this
     var sslState = this.app.getSSLState();
-    var isRTL = (document.documentElement.dir === 'rtl');
-    var showLockIcon = (sslState == 'secure' || sslState == 'broken');
-    var beforeIndent = 0;
-
-    if (this.app.isPrivateBrowser()) {
-      beforeIndent += this.PRIVATE_ICON_WIDTH;
-    }
-    if (showLockIcon) {
-      beforeIndent += this.LOCK_ICON_WIDTH;
-    }
-    if (isRTL) {
-      // close button is currently on left in gaia-header in LTR & RTL
-      this.header.titleStart = this.CLOSE_BUTTON_WIDTH;
-      this.header.titleEnd = beforeIndent;
-    } else {
-      this.header.titleEnd = 0;
-      this.header.titleStart = this.CLOSE_BUTTON_WIDTH + beforeIndent;
-    }
-  },
+    this.sslIndicator.dataset.ssl = sslState;
+    this.sslIndicator.classList.toggle(
+      'chrome-has-ssl-indicator', sslState === 'broken' || sslState === 'secure'
+    );
+  };
 
   AppChrome.prototype.handleTitleChanged = function(evt) {
     if (this._gotName || this._fixedTitle) {

apps/system/style/chrome/chrome.css

@@ -149,7 +149,7 @@
   background-color: rgba(204, 204, 204, 0.2);
 }
 
-.chrome .controls .urlbar .title {
+.chrome-combined .title {
   width: calc(100% - 3.2rem);
   padding-top: 0;
   padding-bottom: 0;
@@ -180,11 +180,11 @@
   background-position: center right;
 }
 
-.appWindow.light .chrome:not(.maximized) .controls .urlbar .title {
+.appWindow.light .chrome-combined:not(.maximized) .title {
   background-color: rgba(204,204,204,0.4);
 }
 
-.maximized .controls .urlbar .title {
+.chrome-combined.maximized .title {
   background-color: transparent;
 }
 
@@ -260,27 +260,48 @@
 
 
 /* SSL Lock Icons in rocketbar */
-.chrome.maximized .title[data-ssl="secure"] {
+.chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
   -moz-padding-start: 3rem;
-  background: url("images/light/ssl.png") no-repeat 0.1rem center / 3rem 3rem;
+
+  background-repeat: no-repeat;
+  background-position: 0.1rem center;
+  background-size: 3rem;
 }
 
-.chrome.maximized .title[data-ssl="broken"] {
-  -moz-padding-start: 3rem;
-  background: url("images/light/ssl_broken.png") no-repeat 0.1rem center / 3rem 3rem;
+.private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  -moz-padding-start: 6.5rem;
+  background-position: 3.7rem 0.1rem;
 }
 
-.chrome.maximized .bar .title[data-ssl="secure"],
-.chrome.maximized .bar .title[data-ssl="broken"] {
-  text-indent: 2.5rem;
+.chrome-plain .chrome-ssl-indicator {
+  display: none;
+
+  width: 1rem;
+
+  background: no-repeat center / 3rem content-box;
 }
 
-.appWindow.private > .chrome.maximized .title[data-ssl="broken"],
-.appWindow.private > .chrome.maximized .title[data-ssl="secure"] {
-  -moz-padding-start: 6.5rem;
-  background-position: 3.7rem 0.1rem;
+.chrome-ssl-indicator-ltr {
+  padding-right: .5rem; /* give some space between the indicator and the title */
+}
+
+.chrome-ssl-indicator-rtl {
+  padding-left: .5rem; /* give some space between the indicator and the title */
+  padding-right: 1rem; /* give some space between the indicator and the window's edge */
+}
+
+.chrome-plain:-moz-dir(ltr) .chrome-has-ssl-indicator .chrome-ssl-indicator-ltr,
+.chrome-plain:-moz-dir(rtl) .chrome-has-ssl-indicator .chrome-ssl-indicator-rtl {
+  display: unset;
+}
+
+.maximized .chrome-has-ssl-indicator[data-ssl="secure"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl.png");
 }
 
+.maximized .chrome-has-ssl-indicator[data-ssl="broken"] .chrome-ssl-indicator {
+  background-image: url("images/light/ssl_broken.png");
+}
 
 /* Handle urlbar sizing when back or forward buttons are disabled */
 .collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
@@ -518,7 +539,7 @@ gaia-overflow-menu button#share {
   width: calc(100% - 8rem);
 }
 
-.appWindow:not(.collapsible) > .chrome .controls .urlbar .title {
+.appWindow:not(.collapsible) > .chrome-combined .title {
   width: calc(100%);
 }
 
@@ -594,14 +615,12 @@ html[dir="rtl"] .light .controls .forward-button:active {
   background-image: url("images/light/back_active.png");
 }
 
-html[dir="rtl"] .chrome.maximized .title[data-ssl="broken"],
-html[dir="rtl"] .chrome.maximized .title[data-ssl="secure"] {
-  background-position: right 0.1rem top 50%;
+html[dir="rtl"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 0.1rem top 0.1rem;
 }
 
-html[dir="rtl"] .appWindow.private > .chrome.maximized .title[data-ssl="broken"],
-html[dir="rtl"] .appWindow.private > .chrome.maximized .title[data-ssl="secure"] {
-  background-position: right 3.7rem top 50%;
+html[dir="rtl"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
+  background-position: right 3.7rem top 0.1rem;
 }
 
 /*