Bug 1172357 - Use new tree-container class for about:welcomeback tree. r=jaws, a=lmandel
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 17 Jul 2015 14:35:51 -0700
changeset 270361 0a803b1d8ed25a066bc23b5b65f71495b114f7b7
parent 270360 0c5a8abf21bbadd8e53c49e76ef60605feaa2a76
child 270362 837a1a106b4275b1eac554da700c2ab25520a178
push id8228
push userryanvm@gmail.com
push dateMon, 20 Jul 2015 17:57:15 +0000
treeherdermozilla-aurora@b4a6171753f2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws, lmandel
bugs1172357
milestone41.0a2
Bug 1172357 - Use new tree-container class for about:welcomeback tree. r=jaws, a=lmandel
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 {