Make initial focus consistent in all instances of cr-drawer.

chrome/browser/resources/md_history/app.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/cr/ui.html">
 <link rel="import" href="chrome://resources/html/cr/ui/command.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-scroll-target-behavior/iron-scroll-target-behavior.html">
 <link rel="import" href="chrome://history/history_list.html">
 <link rel="import" href="chrome://history/history_toolbar.html">
 <link rel="import" href="chrome://history/query_manager.html">
 <link rel="import" href="chrome://history/router.html">
@@ skipping 10 matching lines @@
         color: var(--primary-text-color);
         display: block;
         height: 100%;
         overflow: hidden;
       }
 
       history-toolbar {
         background: var(--md-toolbar-color);
       }
 
+      .drawer-header {
+        outline: none;

[tsergeant, 2017/03/07 01:54:01]

Nit: Can this live in cr-drawer directly, to avoid duplicating it everywhere?

[Dan Beam, 2017/03/07 01:57:36]

if we create a slot and wrap it like in cr-dialog

https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_dialog...

[tsergeant, 2017/03/07 01:58:43]

There's already some CSS in cr-drawer for .drawer-header:
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_drawer...

[Dan Beam, 2017/03/07 02:28:35]

I kind of meant:

<dom-module id="cr-drawer">
  <template>
    <style>
      .header-wrapper {
        outline: none;
      }
    </style>
    <div class="header-wrapper" tabindex="-1">
      <content select=".drawer-header"></content>
    </div>
  </template>
</dom-module>

<dialog is="cr-drawer">
  <div class="drawer-header">$i18n{title}</div>
</dialog>

or just make a drawerHeader: String attribute and lay it out, I guess...

+      }
+
       /* Sizing this with flex causes slow load performance, see
        * crbug.com/618153. TODO(dbeam): is this still an issue? */
       #main-container {
         height: calc(100% - var(--toolbar-height));
         position: relative;
       }
 
       #content-side-bar {
         float: left;
       }
@@ skipping 66 matching lines @@
               sign-in-state="[[isUserSignedIn_]]"
               path="syncedTabs">
           </history-synced-device-manager>
         </template>
       </iron-pages>
       <div id="drop-shadow"></div>
     </div>
 
     <template is="cr-lazy-render" id="drawer">
       <dialog is="cr-drawer" swipe-open>
-        <div class="drawer-header">$i18n{title}</div>
+        <div class="drawer-header" tabindex="-1">$i18n{title}</div>
         <history-side-bar id="drawer-side-bar" class="drawer-content"
             selected-page="{{selectedPage_}}"
             show-footer="[[showSidebarFooter]]">
         </history-side-bar>
       </dialog>
     </template>
 
     <iron-media-query query="(max-width: 1023px)"
         query-matches="{{hasDrawer_}}">
     </iron-media-query>
   </template>
   <script src="chrome://history/app.js"></script>
 </dom-module>