Bug 1247345 - arrange for the searchbox to not scroll in the SyncedTabs sidebar. r=Gijs

--HG--
extra : rebase_source : 54e0babbe19bb5fba2f8b61f4564545e2174b9dd

browser/components/syncedtabs/SyncedTabsDeckView.js

@@ -84,11 +84,16 @@ SyncedTabsDeckView.prototype = {
   },
 
   update(state) {
+    // Note that we may also want to update elements that are outside of the
+    // deck, so use the document to find the class names rather than our
+    // container.
     for (let panel of state.panels) {
       if (panel.selected) {
-        this.container.getElementsByClassName(panel.id).item(0).classList.add("selected");
+        Array.prototype.map.call(this._doc.getElementsByClassName(panel.id),
+                                 item => item.classList.add("selected"));
       } else {
-        this.container.getElementsByClassName(panel.id).item(0).classList.remove("selected");
+        Array.prototype.map.call(this._doc.getElementsByClassName(panel.id),
+                                 item => item.classList.remove("selected"));
       }
     }
   },

browser/components/syncedtabs/TabListView.js

@@ -72,15 +72,13 @@ TabListView.prototype = {
     this._clearChilden();
     this.container.appendChild(wrapper);
 
-    this.tabsFilter = this.container.querySelector(".tabsFilter");
-    this.clearFilter = this.container.querySelector(".textbox-search-clear");
-    this.searchBox = this.container.querySelector(".search-box");
-    this.list = this.container.querySelector(".list");
-    this.searchIcon = this.container.querySelector(".textbox-search-icon");
+    // The search-box is outside of our container (it's not scrollable)
+    this.tabsFilter = this._doc.querySelector(".tabsFilter");
+    this.clearFilter = this._doc.querySelector(".textbox-search-clear");
+    this.searchBox = this._doc.querySelector(".search-box");
+    this.searchIcon = this._doc.querySelector(".textbox-search-icon");
 
-    if (state.filter) {
-      this.tabsFilter.value = state.filter;
-    }
+    this.list = this.container.querySelector(".list");
 
     this._createList(state);
     this._updateSearchBox(state);
@@ -185,6 +183,7 @@ TabListView.prototype = {
     } else {
       this.searchBox.classList.remove("filtered");
     }
+    this.tabsFilter.value = state.filter;
     if (state.inputFocused) {
       this.searchBox.setAttribute("focused", true);
       this.tabsFilter.focus();

browser/components/syncedtabs/sidebar.js

@@ -17,7 +17,7 @@ this.syncedTabsDeckComponent = new SyncedTabsDeckComponent({window, SyncedTabs,
 
 let onLoaded = () => {
   syncedTabsDeckComponent.init();
-  document.body.appendChild(syncedTabsDeckComponent.container);
+  document.getElementById("template-container").appendChild(syncedTabsDeckComponent.container);
 };
 
 let onUnloaded = () => {

browser/components/syncedtabs/sidebar.xhtml

@@ -63,17 +63,6 @@
 
     <template id="tabs-container-template">
       <div class="tabs-container">
-        <div class="sidebar-search-container">
-          <div class="search-box compact">
-            <div class="textbox-input-box">
-              <input type="text" class="tabsFilter textbox-input"/>
-              <div class="textbox-search-icons">
-                <a class="textbox-search-clear"></a>
-                <a class="textbox-search-icon"></a>
-              </div>
-            </div>
-          </div>
-        </div>
         <div class="list" role="listbox" tabindex="1"></div>
       </div>
     </template>
@@ -98,5 +87,24 @@
       </div>
     </template>
 
+    <div class="content-container">
+      <!-- the non-scrollable header -->
+      <div class="content-header">
+        <div class="sidebar-search-container tabs-container sync-state">
+          <div class="search-box compact">
+            <div class="textbox-input-box">
+              <input type="text" class="tabsFilter textbox-input"/>
+              <div class="textbox-search-icons">
+                <a class="textbox-search-clear"></a>
+                <a class="textbox-search-icon"></a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- the scrollable content area where our templates are inserted -->
+      <div id="template-container" class="content-scrollable">
+      </div>
+    </div>
   </body>
 </html>

browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js

@@ -157,7 +157,7 @@ add_task(function* testSyncedTabsSidebarFilteredList() {
   // in updatePanel) resolves, so we wait for it here as well
   yield syncedTabsDeckComponent.tabListComponent._store.getData();
 
-  let filterInput = syncedTabsDeckComponent.container.querySelector(".tabsFilter");
+  let filterInput = syncedTabsDeckComponent._window.document.querySelector(".tabsFilter");
   filterInput.value = "filter text";
   filterInput.blur();
 

browser/themes/shared/syncedtabs/sidebar.inc.css

@@ -4,16 +4,36 @@
 
 /* These styles are intended to mimic XUL trees and the XUL search box. */
 
-:root, body {
-  overflow-x: hidden;
+html {
+  height: 100%;
 }
 
 body {
+  height: 100%;
   margin: 0;
   font: message-box;
   color: #333333;
   -moz-user-select: none;
-  overflow: hidden;
+}
+
+/* The content-container holds the non-scrollable header and the scrollable
+   content area.
+*/
+.content-container {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+/* The content header is not scrollable */
+.content-header {
+  flex: 0 1 auto;
+}
+
+/* The main content area is scrollable and fills the rest of the area */
+.content-scrollable {
+  flex: 1 1 auto;
+  overflow: auto;
 }
 
 .emptyListInfo {
@@ -168,6 +188,10 @@ body {
   opacity: 100;
 }
 
+.sidebar-search-container.tabs-container:not(.selected) {
+  display: none;
+}
+
 .textbox-search-clear:not([disabled]) {
   cursor: default;
 }