Bug 1678523 - Remove XUL decks from browser/components/places/content/places.xhtml. r=mak

Differential Revision: https://phabricator.services.mozilla.com/D97722

browser/components/places/content/places.js

@@ -717,11 +717,13 @@ var PlacesOrganizer = {
 
   _fillDetailsPane: function PO__fillDetailsPane(aNodeList) {
     var infoBox = document.getElementById("infoBox");
-    var detailsDeck = document.getElementById("detailsDeck");
+    var itemsCountBox = document.getElementById("itemsCountBox");
 
     // Make sure the infoBox UI is visible if we need to use it, we hide it
     // below when we don't.
     infoBox.hidden = false;
+    itemsCountBox.hidden = true;
+
     let selectedNode = aNodeList.length == 1 ? aNodeList[0] : null;
 
     // If an input within a panel is focused, force-blur it so its contents
@@ -746,11 +748,7 @@ var PlacesOrganizer = {
           (selectedNode.itemId == -1 &&
             gEditItemOverlay.uri &&
             gEditItemOverlay.uri == selectedNode.uri);
-        if (
-          nodeIsSame &&
-          detailsDeck.selectedIndex == 1 &&
-          !gEditItemOverlay.multiEdit
-        ) {
+        if (nodeIsSame && !infoBox.hidden && !gEditItemOverlay.multiEdit) {
           return;
         }
       }
@@ -760,8 +758,6 @@ var PlacesOrganizer = {
     gEditItemOverlay.uninitPanel(false);
 
     if (selectedNode && !PlacesUtils.nodeIsSeparator(selectedNode)) {
-      detailsDeck.selectedIndex = 1;
-
       gEditItemOverlay.initPanel({
         node: selectedNode,
         hiddenRows: ["folderPicker"],
@@ -769,13 +765,11 @@ var PlacesOrganizer = {
     } else if (!selectedNode && aNodeList[0]) {
       if (aNodeList.every(PlacesUtils.nodeIsURI)) {
         let uris = aNodeList.map(node => Services.io.newURI(node.uri));
-        detailsDeck.selectedIndex = 1;
         gEditItemOverlay.initPanel({
           uris,
           hiddenRows: ["folderPicker", "location", "keyword", "name"],
         });
       } else {
-        detailsDeck.selectedIndex = 0;
         let selectItemDesc = document.getElementById("selectItemDescription");
         let itemsCountLabel = document.getElementById("itemsCountText");
         selectItemDesc.hidden = false;
@@ -787,7 +781,6 @@ var PlacesOrganizer = {
         infoBox.hidden = true;
       }
     } else {
-      detailsDeck.selectedIndex = 0;
       infoBox.hidden = true;
       let selectItemDesc = document.getElementById("selectItemDescription");
       let itemsCountLabel = document.getElementById("itemsCountText");
@@ -810,6 +803,7 @@ var PlacesOrganizer = {
         );
       }
     }
+    itemsCountBox.hidden = !infoBox.hidden;
   },
 };
 
@@ -1298,7 +1292,7 @@ var ContentArea = {
   _specialViews: new Map(),
 
   init: function CA_init() {
-    this._deck = document.getElementById("placesViewsDeck");
+    this._box = document.getElementById("placesViewsBox");
     this._toolbar = document.getElementById("placesToolbar");
     ContentTree.init();
     this._setupView();
@@ -1362,12 +1356,16 @@ var ContentArea = {
   },
 
   get currentView() {
-    return PlacesUIUtils.getViewForNode(this._deck.selectedPanel);
+    let selectedPane = [...this._box.children].filter(
+      child => !child.hidden
+    )[0];
+    return PlacesUIUtils.getViewForNode(selectedPane);
   },
   set currentView(aNewView) {
     let oldView = this.currentView;
     if (oldView != aNewView) {
-      this._deck.selectedPanel = aNewView.associatedElement;
+      oldView.associatedElement.hidden = true;
+      aNewView.associatedElement.hidden = false;
 
       // If the content area inactivated view was focused, move focus
       // to the new view.
@@ -1399,8 +1397,8 @@ var ContentArea = {
     let options = this.currentViewOptions;
 
     // showDetailsPane.
-    let detailsDeck = document.getElementById("detailsDeck");
-    detailsDeck.hidden = !options.showDetailsPane;
+    let detailsPane = document.getElementById("detailsPane");
+    detailsPane.hidden = !options.showDetailsPane;
 
     // toolbarSet.
     for (let elt of this._toolbar.childNodes) {
@@ -1433,7 +1431,7 @@ var ContentArea = {
   },
 
   focus() {
-    this._deck.selectedPanel.focus();
+    this.currentView.associatedElement.focus();
   },
 };
 

browser/components/places/content/places.xhtml

@@ -356,9 +356,7 @@
     </tree>
     <splitter collapse="none" persist="state"></splitter>
     <vbox id="contentView" flex="4">
-      <deck id="placesViewsDeck"
-            selectedIndex="0"
-            flex="1">
+      <vbox id="placesViewsBox" flex="1">
         <tree id="placeContent"
               class="plain placesTree"
               context="placesContext"
@@ -405,12 +403,13 @@
           <treechildren flex="1" onclick="ContentTree.onClick(event);"/>
         </tree>
         <richlistbox flex="1"
+                     hidden="true"
                      seltype="multiple"
                      id="downloadsRichListBox"
                      context="downloadsContextMenu"/>
-      </deck>
-      <deck id="detailsDeck" style="height: 11em;">
-        <vbox id="itemsCountBox" align="center">
+      </vbox>
+      <vbox id="detailsPane" style="height: 11em;">
+        <vbox id="itemsCountBox" align="center" flex="1" hidden="true">
           <spacer flex="3"/>
           <label id="itemsCountText"/>
           <spacer flex="1"/>
@@ -419,10 +418,10 @@
           </description>
           <spacer flex="3"/>
         </vbox>
-        <vbox id="infoBox">
+        <vbox id="infoBox" flex="1">
 #include editBookmarkPanel.inc.xhtml
         </vbox>
-      </deck>
+      </vbox>
     </vbox>
   </hbox>
 </window>

browser/components/places/tests/browser/head.js

@@ -17,6 +17,7 @@ function openLibrary(callback, aLeftPaneRoot) {
     aLeftPaneRoot
   );
   waitForFocus(function() {
+    checkLibraryPaneVisibility(library, aLeftPaneRoot);
     callback(library);
   }, library);
 
@@ -39,6 +40,7 @@ function promiseLibrary(aLeftPaneRoot) {
           aLeftPaneRoot
         );
       }
+      checkLibraryPaneVisibility(library, aLeftPaneRoot);
       resolve(library);
     } else {
       openLibrary(resolve, aLeftPaneRoot);
@@ -62,6 +64,32 @@ function promiseLibraryClosed(organizer) {
   });
 }
 
+function checkLibraryPaneVisibility(library, selectedPane) {
+  // Make sure right view is shown
+  if (selectedPane == "Downloads") {
+    Assert.ok(
+      library.ContentTree.view.hidden,
+      "Bookmark/History tree is hidden"
+    );
+    Assert.ok(
+      !library.document.getElementById("downloadsRichListBox").hidden,
+      "Downloads are shown"
+    );
+  } else {
+    Assert.ok(
+      !library.ContentTree.view.hidden,
+      "Bookmark/History tree is shown"
+    );
+    Assert.ok(
+      library.document.getElementById("downloadsRichListBox").hidden,
+      "Downloads are hidden"
+    );
+  }
+
+  // Check currentView getter
+  Assert.ok(!library.ContentArea.currentView.hidden, "Current view is shown");
+}
+
 /**
  * Waits for a clipboard operation to complete, looking for the expected type.
  *

browser/themes/linux/places/organizer.css

@@ -91,7 +91,7 @@
 }
 
 /* Info box */
-#detailsDeck {
+#detailsPane {
   padding: 5px;
 }
 

browser/themes/osx/places/organizer.css

@@ -143,7 +143,7 @@
 }
 
 /* Info box */
-#detailsDeck {
+#detailsPane {
   border-top: 1px solid #919191;
   background-color: #f0f0f0;
   padding: 10px;

browser/themes/windows/places/organizer.css

@@ -108,7 +108,7 @@
 
 /* Info box */
 
-#detailsDeck {
+#detailsPane {
   border-top: 1px solid var(--organizer-border-color);
   padding: 5px;
 }
@@ -240,7 +240,7 @@
     background-color: var(--organizer-background-primary-color);
   }
 
-  #detailsDeck {
+  #detailsPane {
     background-color: var(--organizer-background-intermediate-color);
     color: var(--organizer-text-primary-color);
   }