Bug 1172357 - Use new tree-container class for about:welcomeback tree. r=jaws
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 17 Jul 2015 14:35:51 -0700
changeset 253550 879c46e60e5c5052d209e8f4c32d1d7a78047b4a
parent 253549 d253511f576583d7b556d6f195c77eeb423f27de
child 253551 4d3cd827af576b3838f8d5060f9ee65cbcb53046
push id29070
push userttaubert@mozilla.com
push dateMon, 20 Jul 2015 07:15:19 +0000
treeherdermozilla-central@202e9233d130 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1172357
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1172357 - Use new tree-container class for about:welcomeback tree. r=jaws
browser/components/migration/content/aboutWelcomeBack.xhtml
browser/components/sessionstore/content/aboutSessionRestore.js
browser/components/sessionstore/content/aboutSessionRestore.xhtml
browser/themes/shared/aboutWelcomeBack.css
toolkit/themes/shared/in-content/info-pages.inc.css
--- a/browser/components/migration/content/aboutWelcomeBack.xhtml
+++ b/browser/components/migration/content/aboutWelcomeBack.xhtml
@@ -10,17 +10,17 @@
   <!ENTITY % netErrorDTD SYSTEM "chrome://global/locale/netError.dtd">
   %netErrorDTD;
   <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
   %globalDTD;
   <!ENTITY % restorepageDTD SYSTEM "chrome://browser/locale/aboutSessionRestore.dtd">
   %restorepageDTD;
 ]>
 
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
     <title>&restorepage.tabtitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/in-content/info-pages.css" type="text/css" media="all"/>
     <link rel="stylesheet" href="chrome://browser/skin/aboutWelcomeBack.css" type="text/css" media="all"/>
     <link rel="icon" type="image/png" href="chrome://global/skin/icons/information-16.png"/>
 
     <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutSessionRestore.js"/>
   </head>
@@ -47,34 +47,36 @@
           </div>
 
           <div class="radioRestoreContainer">
             <input class="radioRestoreButton" id="radioRestoreChoose" type="radio"
                    name="restore"/>
             <label class="radioRestoreLabel" for="radioRestoreChoose">&welcomeback2.label.restoreSome;</label>
           </div>
         </div>
+      </div>
 
-        <tree xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-              id="tabList" flex="1" seltype="single" hidecolumnpicker="true"
-              onclick="onListClick(event);" onkeydown="onListKeyDown(event);"
-              _window_label="&restorepage.windowLabel;">
-          <treecols>
-            <treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
-            <splitter class="tree-splitter"/>
-            <treecol primary="true" id="title" label="&restorepage.listHeader;" flex="1"/>
-          </treecols>
-          <treechildren flex="1"/>
-        </tree>
+      <div class="tree-container">
+        <xul:tree id="tabList" flex="1" seltype="single" hidecolumnpicker="true"
+                  onclick="onListClick(event);" onkeydown="onListKeyDown(event);"
+                  _window_label="&restorepage.windowLabel;">
+          <xul:treecols>
+            <xul:treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
+            <xul:splitter class="tree-splitter"/>
+            <xul:treecol primary="true" id="title" label="&restorepage.listHeader;" flex="1"/>
+          </xul:treecols>
+          <xul:treechildren flex="1"/>
+        </xul:tree>
+      </div>
 
-        <hbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="button-container">
-          <button class="primary"
-                  id="errorTryAgain"
-                  label="&welcomeback2.restoreButton;"
-                  accesskey="&welcomeback2.restoreButton.access;"
-                  oncommand="restoreSession();"/>
-        </hbox>
+      <div class="button-container">
+        <xul:button class="primary"
+                    id="errorTryAgain"
+                    label="&welcomeback2.restoreButton;"
+                    accesskey="&welcomeback2.restoreButton.access;"
+                    oncommand="restoreSession();"/>
+      </div>
 
-        <input type="text" id="sessionData" style="display: none;"/>
-      </div>
+      <input type="text" id="sessionData" style="display: none;"/>
+
     </div>
   </body>
 </html>
--- a/browser/components/sessionstore/content/aboutSessionRestore.js
+++ b/browser/components/sessionstore/content/aboutSessionRestore.js
@@ -49,17 +49,17 @@ window.onload = function() {
   sessionData.dispatchEvent(event);
 
   initTreeView();
 
   document.getElementById("errorTryAgain").focus();
 };
 
 function isTreeViewVisible() {
-  let tabList = document.getElementById("tabList");
+  let tabList = document.querySelector(".tree-container");
   return tabList.hasAttribute("available");
 }
 
 function initTreeView() {
   // If we aren't visible we initialize as we are made visible (and it's OK
   // to initialize multiple times)
   if (!isTreeViewVisible()) {
     return;
@@ -94,21 +94,24 @@ function initTreeView() {
   }, this);
 
   tabList.view = treeView;
   tabList.view.selection.select(0);
 }
 
 // User actions
 function updateTabListVisibility() {
-  let tabList = document.getElementById("tabList");
+  let tabList = document.querySelector(".tree-container");
+  let container = document.querySelector(".container");
   if (document.getElementById("radioRestoreChoose").checked) {
     tabList.setAttribute("available", "true");
+    container.classList.add("restore-chosen");
   } else {
     tabList.removeAttribute("available");
+    container.classList.remove("restore-chosen");
   }
   initTreeView();
 }
 
 function restoreSession() {
   document.getElementById("errorTryAgain").disabled = true;
 
   if (isTreeViewVisible()) {
--- a/browser/components/sessionstore/content/aboutSessionRestore.xhtml
+++ b/browser/components/sessionstore/content/aboutSessionRestore.xhtml
@@ -22,36 +22,36 @@
     <link rel="stylesheet" href="chrome://browser/skin/aboutSessionRestore.css" type="text/css" media="all"/>
     <link rel="icon" type="image/png" href="chrome://global/skin/icons/warning-16.png"/>
 
     <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutSessionRestore.js"/>
   </head>
 
   <body dir="&locale.dir;">
 
-    <div class="container flex">
+    <div class="container restore-chosen">
 
       <div class="title">
         <h1 class="title-text">&restorepage.errorTitle;</h1>
       </div>
       <div class="description">
         <p>&restorepage.problemDesc;</p>
 
         <div id="errorLongDesc">
           <p>&restorepage.tryThis;</p>
           <ul>
             <li>&restorepage.restoreSome;</li>
             <li>&restorepage.startNew;</li>
           </ul>
         </div>
       </div>
-      <div class="tree-container">
+      <div class="tree-container" available="true">
         <xul:tree id="tabList" seltype="single" hidecolumnpicker="true"
               onclick="onListClick(event);" onkeydown="onListKeyDown(event);"
-              available="true" _window_label="&restorepage.windowLabel;">
+              _window_label="&restorepage.windowLabel;">
           <xul:treecols>
             <xul:treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
             <xul:splitter class="tree-splitter"/>
             <xul:treecol primary="true" id="title" label="&restorepage.listHeader;" flex="1"/>
           </xul:treecols>
           <xul:treechildren flex="1"/>
         </xul:tree>
       </div>
--- a/browser/themes/shared/aboutWelcomeBack.css
+++ b/browser/themes/shared/aboutWelcomeBack.css
@@ -8,24 +8,20 @@
 
 .radioRestoreContainer:not(:last-child) {
   margin-bottom: 0.2em;
 }
 
 /* tablist starts out hidden, but JS may make it visible in response to
    clicks on the radio buttons by setting an "available" attribute.
 */
-#tabList {
+.tree-container:not([available]) {
   display: none;
 }
 
-#tabList[available] {
-  display: -moz-box;
-}
-
 treechildren::-moz-tree-image(icon),
 treechildren::-moz-tree-image(noicon) {
   padding-right: 2px;
   margin: 0 2px;
   width: 16px;
   height: 16px;
 }
 
@@ -43,9 +39,9 @@ treechildren::-moz-tree-image(checked, s
   list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
 }
 
 treechildren::-moz-tree-image(partial) {
   list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial");
 }
 treechildren::-moz-tree-image(partial, selected) {
   list-style-image: url("chrome://global/skin/in-content/check-partial.svg#check-partial-inverted");
-}
\ No newline at end of file
+}
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -17,17 +17,17 @@ body {
   justify-content: center;
 }
 
 .container {
   min-width: 13em;
   max-width: 52em;
 }
 
-.container.flex {
+.container.restore-chosen {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   margin: 10vh 0;
 }
 
 /* Typography */
 .title {