History WebUI: Move sidebar and content within scrolling containers with...

History WebUI: Move sidebar and content within scrolling containers with tabindex of -1 and no outlines

Bug: 906729
Change-Id: I11248b67f99cf6cfcc44d765ff9778ffcf6116b0
Reviewed-on: https://chromium-review.googlesource.com/c/1385852Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#618357}

chrome/browser/resources/md_history/app.html

@@ -37,8 +37,19 @@
         position: relative;
       }
 
-      #content-side-bar {
+      #sidebar-container {
         float: left;
+        height: 100%;
+        outline: none;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: var(--side-bar-width);
+      }
+
+      #content-container {
+        height: 100%;
+        outline: none;
+        overflow: auto;
       }
 
       :host-context([dir='rtl']) #content-side-bar {
@@ -80,10 +91,14 @@
 
     <div id="drop-shadow"></div>
     <div id="main-container">
-      <history-side-bar id="content-side-bar" selected-page="{{selectedPage_}}"
+      <div id="sidebar-container" tabindex="-1">
+        <history-side-bar id="content-side-bar"
+            selected-page="{{selectedPage_}}"
             show-footer="[[showSidebarFooter]]"
             hidden$="[[hasDrawer_]]">
         </history-side-bar>
+      </div>
+      <div id="content-container" tabindex="-1">
         <iron-pages id="content" attr-for-selected="path"
             fallback-selection="history"
             selected="[[getSelectedPage_(selectedPage_, items)]]"
@@ -104,6 +119,7 @@
           </template>
         </iron-pages>
       </div>
+    </div>
 
     <cr-lazy-render id="drawer">
       <template>

chrome/browser/resources/md_history/history_list.html

@@ -19,7 +19,6 @@
       :host {
         box-sizing: border-box;
         display: block;
-        overflow: auto;
       }
 
       iron-list {

chrome/browser/resources/md_history/side_bar.html

@@ -14,10 +14,6 @@
     <style include="shared-style cr-icons">
       :host {
         display: flex;
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-        width: var(--side-bar-width);
       }
 
       div.separator {