Backed out changeset 5998b7a73bd9 (bug 1801061) for failures on browser_aboutSessionRestore.js. CLOSED TREE

2022-11-26 22:22:30 +02:00 · 2022-11-26 22:22:30 +02:00 · 53391534d7
--- a/browser/components/migration/content/aboutWelcomeBack.xhtml
+++ b/browser/components/migration/content/aboutWelcomeBack.xhtml
@ -24,44 +24,43 @@

  <body>

-    <div class="container tab-list-tree-container">
-      <div class="description-wrapper">
-
-        <div class="title">
-          <h1 class="title-text" data-l10n-id="welcome-back-page-title"></h1>
-        </div>
-
-        <div class="description">
-
-          <p data-l10n-id="welcome-back-page-info"></p>
-          <!-- Note a href in the anchor below is added by JS -->
-          <p data-l10n-id="welcome-back-page-info-link"><a id="linkMoreTroubleshooting" target="_blank" data-l10n-name="link-more"></a></p>
-
-          <div>
-            <label class="radioRestoreContainer radio-container-with-text">
-              <input class="radioRestoreButton" id="radioRestoreAll" type="radio"
-                     name="restore" checked="checked"/>
-              <span class="radioRestoreLabel" data-l10n-id="welcome-back-restore-all-label"></span>
-            </label>
-
-            <label class="radioRestoreContainer radio-container-with-text">
-              <input class="radioRestoreButton" id="radioRestoreChoose" type="radio"
-                     name="restore"/>
-              <span class="radioRestoreLabel" data-l10n-id="welcome-back-restore-some-label"></span>
-            </label>
-          </div>
-        </div>
+    <div class="container">

+      <div class="title">
+        <h1 class="title-text" data-l10n-id="welcome-back-page-title"></h1>
      </div>

-      <xul:tree id="tabList" flex="1" seltype="single" hidecolumnpicker="true" hidden="true">
-        <xul:treecols>
-          <xul:treecol cycler="true" id="restore" type="checkbox" data-l10n-id="restore-page-restore-header"/>
-          <xul:splitter class="tree-splitter"/>
-          <xul:treecol primary="true" id="title" data-l10n-id="restore-page-list-header" flex="1"/>
-        </xul:treecols>
-        <xul:treechildren flex="1"/>
-      </xul:tree>
+      <div class="description">
+
+        <p data-l10n-id="welcome-back-page-info"></p>
+        <!-- Note a href in the anchor below is added by JS -->
+        <p data-l10n-id="welcome-back-page-info-link"><a id="linkMoreTroubleshooting" target="_blank" data-l10n-name="link-more"></a></p>
+
+        <div>
+          <label class="radioRestoreContainer radio-container-with-text">
+            <input class="radioRestoreButton" id="radioRestoreAll" type="radio"
+                   name="restore" checked="checked"/>
+            <span class="radioRestoreLabel" data-l10n-id="welcome-back-restore-all-label"></span>
+          </label>
+
+          <label class="radioRestoreContainer radio-container-with-text">
+            <input class="radioRestoreButton" id="radioRestoreChoose" type="radio"
+                   name="restore"/>
+            <span class="radioRestoreLabel" data-l10n-id="welcome-back-restore-some-label"></span>
+          </label>
+        </div>
+      </div>
+
+      <div class="tree-container">
+        <xul:tree id="tabList" flex="1" seltype="single" hidecolumnpicker="true">
+          <xul:treecols>
+            <xul:treecol cycler="true" id="restore" type="checkbox" data-l10n-id="restore-page-restore-header"/>
+            <xul:splitter class="tree-splitter"/>
+            <xul:treecol primary="true" id="title" data-l10n-id="restore-page-list-header" flex="1"/>
+          </xul:treecols>
+          <xul:treechildren flex="1"/>
+        </xul:tree>
+      </div>

      <div class="button-container">
        <xul:button class="primary"
--- a/browser/components/sessionstore/content/aboutSessionRestore.js
+++ b/browser/components/sessionstore/content/aboutSessionRestore.js
@ -15,19 +15,17 @@ ChromeUtils.defineModuleGetter(

 var gStateObject;
 var gTreeData;
-var gTreeInitialized = false;

 // Page initialization

 window.onload = function() {
  let toggleTabs = document.getElementById("tabsToggle");
  if (toggleTabs) {
-    let tabList = document.getElementById("tabList");
+    let treeContainer = document.querySelector(".tree-container");

    let toggleHiddenTabs = () => {
-      toggleTabs.classList.toggle("tabs-hidden");
-      tabList.hidden = toggleTabs.classList.contains("tabs-hidden");
-      initTreeView();
+      toggleTabs.classList.toggle("show-tabs");
+      treeContainer.classList.toggle("expanded");
    };
    toggleTabs.onclick = toggleHiddenTabs;
  }
@ -84,14 +82,16 @@ window.onload = function() {
 };

 function isTreeViewVisible() {
-  return !document.getElementById("tabList").hidden;
+  let tabList = document.querySelector(".tree-container");
+  return tabList.hasAttribute("available");
 }

 async function initTreeView() {
-  if (gTreeInitialized || !isTreeViewVisible()) {
+  // 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");
  let l10nIds = [];
  for (
@ -137,14 +137,19 @@ async function initTreeView() {

  tabList.view = treeView;
  tabList.view.selection.select(0);
-  gTreeInitialized = true;
 }

 // User actions
 function updateTabListVisibility() {
-  document.getElementById("tabList").hidden = !document.getElementById(
-    "radioRestoreChoose"
-  ).checked;
+  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();
 }

--- a/browser/components/sessionstore/content/aboutSessionRestore.xhtml
+++ b/browser/components/sessionstore/content/aboutSessionRestore.xhtml
@ -22,30 +22,35 @@
    <script src="chrome://browser/content/aboutSessionRestore.js"/>
  </head>

-  <body>
+  <body class="illustrated">

-    <div class="container tab-list-tree-container">
+    <div class="container restore-chosen">
      <div class="description-wrapper">
        <div class="title">
          <h1 class="title-text" data-l10n-id="restore-page-error-title"></h1>
        </div>
        <div class="description">
          <p data-l10n-id="restore-page-problem-desc"></p>
-          <p data-l10n-id="restore-page-try-this"></p>
+
+          <div id="errorLongDesc">
+            <p data-l10n-id="restore-page-try-this"></p>
+          </div>
        </div>
-        <button id="tabsToggle" class="tabs-hidden">
+        <button id="tabsToggle" class="show-tabs">
          <span id="showTabs" data-l10n-id="restore-page-show-tabs"></span>
          <span id="hideTabs" data-l10n-id="restore-page-hide-tabs"></span>
        </button>
      </div>
-      <xul:tree id="tabList" seltype="single" hidecolumnpicker="true" hidden="true">
-        <xul:treecols>
-          <xul:treecol cycler="true" id="restore" type="checkbox" data-l10n-id="restore-page-restore-header"/>
-          <xul:splitter class="tree-splitter"/>
-          <xul:treecol primary="true" id="title" data-l10n-id="restore-page-list-header" flex="1"/>
-        </xul:treecols>
-        <xul:treechildren flex="1"/>
-      </xul:tree>
+      <div class="tree-container" available="true">
+        <xul:tree id="tabList" seltype="single" hidecolumnpicker="true">
+          <xul:treecols>
+            <xul:treecol cycler="true" id="restore" type="checkbox" data-l10n-id="restore-page-restore-header"/>
+            <xul:splitter class="tree-splitter"/>
+            <xul:treecol primary="true" id="title" data-l10n-id="restore-page-list-header" flex="1"/>
+          </xul:treecols>
+          <xul:treechildren flex="1"/>
+        </xul:tree>
+      </div>
      <div class="button-container">
 #ifdef XP_UNIX
        <xul:button id="errorCancel"
--- a/browser/themes/shared/aboutSessionRestore.css
+++ b/browser/themes/shared/aboutSessionRestore.css
@ -2,7 +2,13 @@
 * 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/. */

-@import url("chrome://browser/skin/tab-list-tree.css");
+.container.restore-chosen {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  margin: 5vh 0;
+}

 #tabsToggle {
  cursor: pointer;
@ -35,21 +41,56 @@
  background-position-x: left;
 }

-#tabsToggle:not(.tabs-hidden)::after {
+#tabsToggle:not(.show-tabs)::after {
  background-image: url("chrome://global/skin/icons/arrow-up.svg");
 }

-#tabsToggle.tabs-hidden > #hideTabs,
-#tabsToggle:not(.tabs-hidden) > #showTabs {
+#tabsToggle.show-tabs > #hideTabs,
+#tabsToggle:not(.show-tabs) > #showTabs {
  display: none;
 }

-#tabList {
-  flex: 1;
-  min-height: 12em;
-  margin-top: 1.2em;
+.tree-container:not(.expanded) {
+  visibility: collapse;
 }

 .button-container {
  text-align: end;
 }
+
+treechildren::-moz-tree-image(icon),
+treechildren::-moz-tree-image(noicon) {
+  padding-inline-end: 2px;
+  margin: 0 2px;
+  width: 16px;
+  height: 16px;
+}
+
+treechildren::-moz-tree-image(noicon) {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+treechildren::-moz-tree-image(container, noicon) {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+
+treechildren::-moz-tree-image(checked),
+treechildren::-moz-tree-image(partial) {
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+treechildren::-moz-tree-image(checked, selected),
+treechildren::-moz-tree-image(partial, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
+treechildren::-moz-tree-image(checked) {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+}
+
+treechildren::-moz-tree-image(partial) {
+  list-style-image: url("chrome://global/skin/icons/check-partial.svg");
+}
--- a/browser/themes/shared/aboutWelcomeBack.css
+++ b/browser/themes/shared/aboutWelcomeBack.css
@ -2,14 +2,50 @@
 * 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/. */

-@import url("chrome://browser/skin/tab-list-tree.css");
-
 .radioRestoreContainer:not(:last-child) {
  margin-bottom: 0.3em;
 }

-#tabList {
-  flex: 1;
-  min-height: 12em;
-  margin-top: 1.2em;
+/* tablist starts out hidden, but JS may make it visible in response to
+   clicks on the radio buttons by setting an "available" attribute.
+*/
+.tree-container:not([available]) {
+  display: none;
+}
+
+treechildren::-moz-tree-image(icon),
+treechildren::-moz-tree-image(noicon) {
+  padding-inline-end: 2px;
+  margin: 0 2px;
+  width: 16px;
+  height: 16px;
+}
+
+treechildren::-moz-tree-image(noicon) {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+treechildren::-moz-tree-image(container, noicon) {
+  list-style-image: url("chrome://browser/skin/window.svg");
+}
+
+treechildren::-moz-tree-image(checked),
+treechildren::-moz-tree-image(partial) {
+  -moz-context-properties: fill, stroke;
+  fill: var(--in-content-accent-color);
+}
+
+treechildren::-moz-tree-image(checked, selected),
+treechildren::-moz-tree-image(partial, selected) {
+  fill: var(--in-content-item-selected-text);
+  stroke: var(--in-content-item-selected);
+}
+
+treechildren::-moz-tree-image(checked) {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+}
+
+treechildren::-moz-tree-image(partial) {
+  list-style-image: url("chrome://global/skin/icons/check-partial.svg");
 }
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -12,7 +12,6 @@
  skin/classic/browser/aboutSessionRestore.css                 (../shared/aboutSessionRestore.css)
  skin/classic/browser/aboutTabCrashed.css                     (../shared/aboutTabCrashed.css)
  skin/classic/browser/aboutWelcomeBack.css                    (../shared/aboutWelcomeBack.css)
-  skin/classic/browser/tab-list-tree.css                       (../shared/tab-list-tree.css)
  skin/classic/browser/addon-notification.css                  (../shared/addon-notification.css)
  skin/classic/browser/autocomplete.css                        (../shared/autocomplete.css)
  skin/classic/browser/blockedSite.css                         (../shared/blockedSite.css)
--- a/browser/themes/shared/tab-list-tree.css
+++ b/browser/themes/shared/tab-list-tree.css
@ -1,50 +0,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/. */
-
-/* This file is used by both about:sessionrestore and about:welcomeback */
-
-.tab-list-tree-container {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: center;
-}
-
-treechildren::-moz-tree-image(icon),
-treechildren::-moz-tree-image(noicon) {
-  -moz-context-properties: fill;
-  fill: currentColor;
-  padding-inline-end: 2px;
-  margin: 0 2px;
-  width: 16px;
-  height: 16px;
-}
-
-treechildren::-moz-tree-image(noicon) {
-  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
-}
-
-treechildren::-moz-tree-image(container, noicon) {
-  list-style-image: url("chrome://browser/skin/window.svg");
-}
-
-treechildren::-moz-tree-image(checked),
-treechildren::-moz-tree-image(partial) {
-  -moz-context-properties: fill, stroke;
-  fill: var(--in-content-accent-color);
-}
-
-treechildren::-moz-tree-image(checked, selected),
-treechildren::-moz-tree-image(partial, selected) {
-  fill: var(--in-content-item-selected-text);
-  stroke: var(--in-content-item-selected);
-}
-
-treechildren::-moz-tree-image(checked) {
-  list-style-image: url("chrome://global/skin/icons/check.svg");
-}
-
-treechildren::-moz-tree-image(partial) {
-  list-style-image: url("chrome://global/skin/icons/check-partial.svg");
-}
--- a/toolkit/themes/shared/in-content/info-pages.css
+++ b/toolkit/themes/shared/in-content/info-pages.css
@ -109,18 +109,22 @@ button {
  margin-inline-start: 0;
 }

-.button-container > button:last-child {
-  margin-inline-end: 0;
+/* Trees */
+.tree-container {
+  margin-top: 1.2em;
+  flex: 1 0px;
+  min-height: 12em;
 }

-/* Trees */
+.tree-container > tree {
+  height: 100%;
+}

 tree {
  width: 100%;
 }

 /* Tables */
-
 table {
  background-color: var(--in-content-table-background);
  color: var(--in-content-text-color);