Bug 818645 User is unable to scroll entries in the browser's Top Sites, Bookmarks, or History tabs

apps/browser/index.html

@@ -72,9 +72,9 @@ <h2 data-l10n-id="top-sites">Top Sites</h2>
             </section>
             <section id="history" role="tabpanel">
             </section>
-            <section id="results">
-            </section>
           </div>
+          <section id="results" class="hidden">
+          </section>
         </div>
 
         <div id="crashscreen">

apps/browser/js/browser.js

@@ -64,6 +64,7 @@ var Browser = {
     this.urlInput.addEventListener('keyup',
       this.handleUrlInputKeypress.bind(this));
     this.tabPanels.addEventListener('click', this.followLink.bind(this));
+    this.results.addEventListener('click', this.followLink.bind(this));
     this.urlButton.addEventListener('click',
       this.handleUrlFormSubmit.bind(this));
     this.tabsBadge.addEventListener('click',
@@ -808,31 +809,14 @@ var Browser = {
     this.bookmarksTab.classList.remove('selected');
     this.history.classList.remove('selected');
     this.historyTab.classList.remove('selected');
-    this.results.classList.remove('selected');
-  },
-
-  showAwesomescreenTabs: function browser_showAwesomescreenTabs() {
-    this.topSites.style.display = '';
-    this.bookmarks.style.display = '';
-    this.history.style.display = '';
-    this.tabHeaders.style.display = '';
-  },
-
-  hideAwesomescreenTabs: function browser_hideAwesomescreenTabs() {
-    this.topSites.style.display = 'none';
-    this.bookmarks.style.display = 'none';
-    this.history.style.display = 'none';
-    this.tabHeaders.style.display = 'none';
   },
 
   updateAwesomeScreen: function browser_updateAwesomeScreen(filter) {
     if (!filter) {
-      this.showAwesomescreenTabs();
-      this.results.classList.remove('selected');
+      this.results.classList.add('hidden');
       filter = false;
     } else {
-      this.hideAwesomescreenTabs();
-      this.results.classList.add('selected');
+      this.results.classList.remove('hidden');
     }
     Places.getTopSites(20, filter, this.showResults.bind(this));
   },
@@ -1348,6 +1332,7 @@ var Browser = {
   },
 
   showAwesomeScreen: function browser_showAwesomeScreen() {
+    this.results.classList.add('hidden');
     this.tabsBadge.innerHTML = '';
     // Ensure the user cannot interact with the browser until the
     // transition has ended, this will not be triggered unless the
@@ -1359,7 +1344,6 @@ var Browser = {
     this.mainScreen.addEventListener('transitionend', pageShown, true);
     this.switchScreen(this.AWESOME_SCREEN);
     this.setUrlButtonMode(this.GO);
-    this.showAwesomescreenTabs();
     this.showTopSitesTab();
   },
 

apps/browser/style/browser.css

@@ -603,6 +603,10 @@ nav[data-role="tabs"] {
   height: 36px;
 }
 
+#tab-panels {
+  height: 100%;
+}
+
 ul[role="tablist"] {
   margin: 0;
   padding: 0;
@@ -642,19 +646,33 @@ li[role="tab"] a.selected {
   background-origin: padding-box;
 }
 
-#results,
 section[role="tabpanel"] {
   padding-top: 5px;
   clear: both;
   background-color: #f3f4f8;
   display: none;
 }
 
-#results.selected,
 section[role="tabpanel"].selected {
   display: block;
 }
 
+#results {
+  padding-top: 5px;
+  background-color: #f3f4f8;
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#results.hidden {
+  display: none;
+}
+
 #awesomescreen h3 {
   font-size: 0.9em;
   margin: 0 10px;
@@ -735,7 +753,7 @@ li[role="listitem"] small {
 }
 
 #history, #bookmarks, #top-sites {
-  height: -moz-calc(100% - 36px);
+  height: calc(100% - 36px);
   overflow-y: auto;
   overflow-x: hidden;
 }