From 8bc86039bc2a8530d7781a098887e5bfdae942b4 Mon Sep 17 00:00:00 2001 From: Mark Hammond Date: Thu, 24 Mar 2016 08:52:12 +1100 Subject: [PATCH] Bug 1247345 - arrange for the searchbox to not scroll in the SyncedTabs sidebar. r=Gijs --HG-- extra : rebase_source : 54e0babbe19bb5fba2f8b61f4564545e2174b9dd --- .../syncedtabs/SyncedTabsDeckView.js | 9 ++++-- browser/components/syncedtabs/TabListView.js | 15 +++++----- browser/components/syncedtabs/sidebar.js | 2 +- browser/components/syncedtabs/sidebar.xhtml | 30 ++++++++++++------- .../browser/browser_sidebar_syncedtabslist.js | 2 +- .../themes/shared/syncedtabs/sidebar.inc.css | 30 +++++++++++++++++-- 6 files changed, 62 insertions(+), 26 deletions(-) diff --git a/browser/components/syncedtabs/SyncedTabsDeckView.js b/browser/components/syncedtabs/SyncedTabsDeckView.js index ced98fc6d597..e756c49fd742 100644 --- a/browser/components/syncedtabs/SyncedTabsDeckView.js +++ b/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")); } } }, diff --git a/browser/components/syncedtabs/TabListView.js b/browser/components/syncedtabs/TabListView.js index 846e56e21627..df17c9b793ee 100644 --- a/browser/components/syncedtabs/TabListView.js +++ b/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(); diff --git a/browser/components/syncedtabs/sidebar.js b/browser/components/syncedtabs/sidebar.js index dc19ff843dbc..84df95e9deca 100644 --- a/browser/components/syncedtabs/sidebar.js +++ b/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 = () => { diff --git a/browser/components/syncedtabs/sidebar.xhtml b/browser/components/syncedtabs/sidebar.xhtml index d382bcbf4ed9..8d4f783d9458 100644 --- a/browser/components/syncedtabs/sidebar.xhtml +++ b/browser/components/syncedtabs/sidebar.xhtml @@ -63,17 +63,6 @@ @@ -98,5 +87,24 @@ +
+ +
+
+
+
+ +
+ + +
+
+
+
+
+ +
+
+
diff --git a/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js b/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js index 00c9d39f4eea..b52011bd5b5a 100644 --- a/browser/components/syncedtabs/test/browser/browser_sidebar_syncedtabslist.js +++ b/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(); diff --git a/browser/themes/shared/syncedtabs/sidebar.inc.css b/browser/themes/shared/syncedtabs/sidebar.inc.css index 7825805083c7..89dd9b1105be 100644 --- a/browser/themes/shared/syncedtabs/sidebar.inc.css +++ b/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; }