Bug 1209060 - Use html elements instead of xul ones for fullscreen warning box. r=dao, a=lizzard
authorXidorn Quan <quanxunzhen@gmail.com>
Thu, 01 Oct 2015 21:43:19 +1000
changeset 296267 9dfec714d1dfdddbccc0a86cbf00a8caf90b0efc
parent 296266 d90ef52f0c349985729fc78fe372e5fb36a64000
child 296268 d6f44c82219bb6e493c8db63f21c7d64f975727a
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, lizzard
bugs1209060
milestone43.0a2
Bug 1209060 - Use html elements instead of xul ones for fullscreen warning box. r=dao, a=lizzard
browser/base/content/browser-fullScreen.js
browser/base/content/browser.css
browser/base/content/browser.xul
browser/themes/shared/fullscreen/warning.inc.css
--- a/browser/base/content/browser-fullScreen.js
+++ b/browser/base/content/browser-fullScreen.js
@@ -388,21 +388,21 @@ var FullScreen = {
       try {
         host = uri.host;
       } catch (e) { }
       let textElem = document.getElementById("fullscreen-domain-text");
       if (!host) {
         textElem.setAttribute("hidden", true);
       } else {
         textElem.removeAttribute("hidden");
-        let hostLabel = document.getElementById("fullscreen-domain");
+        let hostElem = document.getElementById("fullscreen-domain");
         // Document's principal's URI has a host. Display a warning including it.
         let utils = {};
         Cu.import("resource://gre/modules/DownloadUtils.jsm", utils);
-        hostLabel.value = utils.DownloadUtils.getURIHost(uri.spec)[0];
+        hostElem.textContent = utils.DownloadUtils.getURIHost(uri.spec)[0];
       }
       this._element.className = gIdentityHandler.fullscreenWarningClassName;
 
       // User should be allowed to explicitly disable
       // the prompt if they really want.
       if (this._timeoutHide.delay <= 0) {
         return;
       }
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -658,52 +658,52 @@ window[chromehidden~="toolbar"] toolbar:
 
 /*  Full Screen UI */
 
 #fullscr-toggler {
   height: 1px;
   background: black;
 }
 
-#fullscreen-warning {
+html|*#fullscreen-warning {
   position: fixed;
   z-index: 2147483647 !important;
   visibility: visible;
   transition: transform 300ms ease-in;
   /* To center the warning box horizontally,
      we use left: 50% with translateX(-50%). */
   top: 0; left: 50%;
   transform: translate(-50%, -100%);
-  /* We must specify a max-width, otherwise word-wrap:break-word doesn't
-     work in descendant <description> and <label> elements. Bug 630864. */
+  box-sizing: border-box;
+  width: -moz-max-content;
   max-width: 95%;
   pointer-events: none;
 }
-#fullscreen-warning:not([hidden]) {
+html|*#fullscreen-warning:not([hidden]) {
   display: flex;
 }
-#fullscreen-warning[onscreen] {
+html|*#fullscreen-warning[onscreen] {
   transform: translate(-50%, 50px);
 }
-#fullscreen-warning[ontop] {
+html|*#fullscreen-warning[ontop] {
   /* Use -10px to hide the border and border-radius on the top */
   transform: translate(-50%, -10px);
 }
 
-#fullscreen-domain-text,
-#fullscreen-generic-text {
+html|*#fullscreen-domain-text,
+html|*#fullscreen-generic-text {
   word-wrap: break-word;
   /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
   min-width: 1px
 }
-#fullscreen-domain-text:not([hidden]) + #fullscreen-generic-text {
+html|*#fullscreen-domain-text:not([hidden]) + html|*#fullscreen-generic-text {
   display: none;
 }
 
-#fullscreen-exit-button {
+html|*#fullscreen-exit-button {
   pointer-events: auto;
 }
 
 /* ::::: Ctrl-Tab Panel ::::: */
 
 .ctrlTab-preview > html|img,
 .ctrlTab-preview > html|canvas {
   min-width: inherit;
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1146,33 +1146,34 @@
                  flex="1"
                  style="min-width: 14em; width: 18em; max-width: 36em;"/>
       </vbox>
       <vbox id="browser-border-end" hidden="true" layer="true"/>
     </hbox>
 #include ../../components/customizableui/content/customizeMode.inc.xul
   </deck>
 
-  <hbox id="fullscreen-warning" hidden="true">
-    <description id="fullscreen-domain-text">
+  <html:div id="fullscreen-warning" hidden="true">
+    <html:div id="fullscreen-domain-text">
       &fullscreenWarning.beforeDomain.label;
-      <label id="fullscreen-domain"/>
+      <html:span id="fullscreen-domain"/>
       &fullscreenWarning.afterDomain.label;
-    </description>
-    <description id="fullscreen-generic-text">
+    </html:div>
+    <html:div id="fullscreen-generic-text">
       &fullscreenWarning.generic.label;
-    </description>
-    <button id="fullscreen-exit-button"
+    </html:div>
+    <html:button id="fullscreen-exit-button"
+                 onclick="FullScreen.exitDomFullScreen();">
 #ifdef XP_MACOSX
-            label="&exitDOMFullscreenMac.button;"
+            &exitDOMFullscreenMac.button;
 #else
-            label="&exitDOMFullscreen.button;"
+            &exitDOMFullscreen.button;
 #endif
-            oncommand="FullScreen.exitDomFullScreen();"/>
-  </hbox>
+    </html:button>
+  </html:div>
 
   <vbox id="browser-bottombox" layer="true">
     <notificationbox id="global-notificationbox"/>
     <toolbar id="developer-toolbar"
              hidden="true">
 #ifdef XP_MACOSX
           <toolbarbutton id="developer-toolbar-closebutton"
                          class="devtools-closebutton"
--- a/browser/themes/shared/fullscreen/warning.inc.css
+++ b/browser/themes/shared/fullscreen/warning.inc.css
@@ -1,52 +1,51 @@
 %if 0
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
-#fullscreen-warning {
+html|*#fullscreen-warning {
   align-items: center;
   background: rgba(45, 62, 72, 0.9);
   border: 2px solid #fafafa;
   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
   padding: 24px 16px;
   font: message-box;
 }
 
-#fullscreen-warning::before {
+html|*#fullscreen-warning::before {
   margin: 0;
   width: 24px; height: 24px;
 }
 
-#fullscreen-warning.verifiedIdentity::before,
-#fullscreen-warning.verifiedDomain::before {
+html|*#fullscreen-warning.verifiedIdentity::before,
+html|*#fullscreen-warning.verifiedDomain::before {
   content: url("chrome://browser/skin/fullscreen/secure.svg");
 }
 
-#fullscreen-warning.unknownIdentity::before {
+html|*#fullscreen-warning.unknownIdentity::before {
   content: url("chrome://browser/skin/fullscreen/insecure.svg");
 }
 
-#fullscreen-domain-text,
-#fullscreen-generic-text {
+html|*#fullscreen-domain-text,
+html|*#fullscreen-generic-text {
   font-size: 21px;
   font-weight: lighter;
   color: #fafafa;
   margin: 0 16px;
 }
 
-#fullscreen-domain {
+html|*#fullscreen-domain {
   font-weight: bold;
   margin: 0;
 }
 
-#fullscreen-exit-button {
-  padding: 0 30px;
+html|*#fullscreen-exit-button {
+  padding: 5px 30px;
   font: message-box;
   font-size: 14px;
   font-weight: lighter;
   margin: 0;
-  height: 28px;
   box-sizing: content-box;
 }