Bug 1080934 - add radio buttons to about:welcomeback. r=Unfocused

browser/components/migration/content/aboutWelcomeBack.xhtml

@@ -52,6 +52,20 @@
 
         <!-- Short Description -->
         <div id="errorTrailerDesc">
+          <div>
+            <div class="radioRestoreContainer">
+              <input class="radioRestoreButton" id="radioRestoreAll" type="radio"
+                     name="restore" checked="checked"/>
+              <label class="radioRestoreLabel" for="radioRestoreAll">&welcomeback2.label.restoreAll;</label>
+            </div>
+
+            <div class="radioRestoreContainer">
+              <input class="radioRestoreButton" id="radioRestoreChoose" type="radio"
+                     name="restore"/>
+              <label class="radioRestoreLabel" for="radioRestoreChoose">&welcomeback2.label.restoreSome;</label>
+            </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);"

browser/components/sessionstore/content/aboutSessionRestore.js

@@ -20,6 +20,14 @@ window.onload = function() {
     anchor.setAttribute("href", baseURL + "troubleshooting");
   }
 
+  // wire up click handlers for the radio buttons if they exist.
+  for (let radioId of ["radioRestoreAll", "radioRestoreChoose"]) {
+    let button = document.getElementById(radioId);
+    if (button) {
+      button.addEventListener("click", updateTabListVisibility);
+    }
+  }
+
   // the crashed session state is kept inside a textbox so that SessionStore picks it up
   // (for when the tab is closed or the session crashes right again)
   var sessionData = document.getElementById("sessionData");
@@ -40,7 +48,17 @@ window.onload = function() {
   document.getElementById("errorTryAgain").focus();
 };
 
+function isTreeViewVisible() {
+  let tabList = document.getElementById("tabList");
+  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;
+  }
   var tabList = document.getElementById("tabList");
   var winLabel = tabList.getAttribute("_window_label");
 
@@ -75,31 +93,42 @@ function initTreeView() {
 }
 
 // User actions
+function updateTabListVisibility() {
+  let tabList = document.getElementById("tabList");
+  if (document.getElementById("radioRestoreChoose").checked) {
+    tabList.setAttribute("available", "true");
+  } else {
+    tabList.removeAttribute("available");
+  }
+  initTreeView();
+}
 
 function restoreSession() {
   document.getElementById("errorTryAgain").disabled = true;
 
-  if (!gTreeData.some(aItem => aItem.checked)) {
-    // This should only be possible when we have no "cancel" button, and thus
-    // the "Restore session" button always remains enabled.  In that case and
-    // when nothing is selected, we just want a new session.
-    startNewSession();
-    return;
-  }
+  if (isTreeViewVisible()) {
+    if (!gTreeData.some(aItem => aItem.checked)) {
+      // This should only be possible when we have no "cancel" button, and thus
+      // the "Restore session" button always remains enabled.  In that case and
+      // when nothing is selected, we just want a new session.
+      startNewSession();
+      return;
+    }
 
-  // remove all unselected tabs from the state before restoring it
-  var ix = gStateObject.windows.length - 1;
-  for (var t = gTreeData.length - 1; t >= 0; t--) {
-    if (treeView.isContainer(t)) {
-      if (gTreeData[t].checked === 0)
-        // this window will be restored partially
-        gStateObject.windows[ix].tabs =
-          gStateObject.windows[ix].tabs.filter(function(aTabData, aIx)
-                                                 gTreeData[t].tabs[aIx].checked);
-      else if (!gTreeData[t].checked)
-        // this window won't be restored at all
-        gStateObject.windows.splice(ix, 1);
-      ix--;
+    // remove all unselected tabs from the state before restoring it
+    var ix = gStateObject.windows.length - 1;
+    for (var t = gTreeData.length - 1; t >= 0; t--) {
+      if (treeView.isContainer(t)) {
+        if (gTreeData[t].checked === 0)
+          // this window will be restored partially
+          gStateObject.windows[ix].tabs =
+            gStateObject.windows[ix].tabs.filter(function(aTabData, aIx)
+                                                   gTreeData[t].tabs[aIx].checked);
+        else if (!gTreeData[t].checked)
+          // this window won't be restored at all
+          gStateObject.windows.splice(ix, 1);
+        ix--;
+      }
     }
   }
   var stateString = JSON.stringify(gStateObject);

browser/components/sessionstore/content/aboutSessionRestore.xhtml

@@ -57,7 +57,7 @@
           <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;">
+                available="true" _window_label="&restorepage.windowLabel;">
             <treecols>
               <treecol cycler="true" id="restore" type="checkbox" label="&restorepage.restoreHeader;"/>
               <splitter class="tree-splitter"/>

browser/themes/shared/aboutWelcomeBack.css

@@ -4,4 +4,39 @@
 
 #errorPageContainer {
   background-image: url("chrome://global/skin/icons/information-64.png");
+  height: auto;
+}
+
+/* tablist starts out hidden, but JS may make it visible in response to
+   clicks on the radio buttons by setting an "available" attribute.
+*/
+#tabList {
+  display: none;
+}
+
+#tabList[available] {
+  display: -moz-box;
+}
+
+.radioRestoreContainer {
+  display: flex;
+}
+
+.radioRestoreButton {
+  flex: 0 0 auto;
+}
+
+.radioRestoreButton:-moz-focusring {
+  outline: 1px dotted black;
+}
+
+.radioChooseLabel {
+  flex: 1 1 auto;
+}
+
+/* We want errorTrailerDesc to have the same padding-top as errorShortDesc
+   has padding-bottom
+*/
+#errorTrailerDesc {
+  padding-top: 1em;
 }