Bug 1209060 - Use html elements instead of xul ones for fullscreen warning box. draft
authorXidorn Quan <quanxunzhen@gmail.com>
Tue, 29 Sep 2015 13:27:11 +1000
changeset 297781 1c8d97b1a189206a5782c739599943c9d4e2d05c
parent 297780 6db042ca0db5edf63512bf6cf6afd565687ebb0f
child 509802 a0b0b71cfe5c2933d1190a3075e7f396d868f878
push id5994
push userxquan@mozilla.com
push dateThu, 01 Oct 2015 00:00:45 +0000
bugs1209060
milestone44.0a1
Bug 1209060 - Use html elements instead of xul ones for fullscreen warning box.
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
@@ -655,48 +655,48 @@ 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 {
   pointer-events: auto;
 }
 
 /* ::::: Ctrl-Tab Panel ::::: */
--- 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>
+    </html:div>
     <button id="fullscreen-exit-button"
+            oncommand="FullScreen.exitDomFullScreen();">
 #ifdef XP_MACOSX
-            label="&exitDOMFullscreenMac.button;"
+            &exitDOMFullscreenMac.button;
 #else
-            label="&exitDOMFullscreen.button;"
+            &exitDOMFullscreen.button;
 #endif
-            oncommand="FullScreen.exitDomFullScreen();"/>
-  </hbox>
+    </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,52 @@
 %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;
+  padding: 5px 30px;
   font: message-box;
   font-size: 14px;
   font-weight: lighter;
   margin: 0;
-  height: 28px;
   box-sizing: content-box;
+  text-align: center;
 }