Bug 1172357 - Use new tree-container class for about:welcomeback tree. r=jaws, a=lmandel
--- 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 {