MD History: Update history-toolbar to use icon-button-light

chrome/browser/resources/md_history/history_toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://history/browser_service.html">
 <link rel="import" href="chrome://history/icons.html">
 <link rel="import" href="chrome://history/shared_style.html">
 
 <!-- Lazy loaded: iron-dropdown, paper-button, paper-icon-button-light,
   paper-tab, paper-tabs. -->
 
 <dom-module id="history-toolbar">
   <template>
     <style include="shared-style">
       :host {
         color: #fff;
         display: block;
         transition: background-color 150ms;
         width: 100%;
       }
 
+      /* General toolbar layout. */

[calamity, 2016/12/12 05:03:16]

I like these.

+
       cr-toolbar,
       #overlay-buttons,
       #overlay-wrapper,
       #toolbar-container {
         align-items: center;
         display: flex;
         width: 100%;
       }
 
       :host([items-selected_]) {
@@ skipping 21 matching lines @@
       }
 
       :host([has-drawer]) cr-toolbar {
         --cr-toolbar-field-margin: 0;
       }
 
       cr-toolbar .more-actions {
         -webkit-margin-end: 12px;
       }
 
+      /* Info button and dropdown. */
+
       #info-button {
         /* Additional styles for unresolved <button>. */
         background: none;
         border: none;
         color: inherit;
         height: 32px;
         margin: 6px;
         outline: none;
         padding: 0;
         width: 32px;
       }
 
       #info-button-icon {
         height: 20px;
         width: 20px;
+        margin: 0 4px;

[calamity, 2016/12/12 05:03:16]

This doesn't seem to do anything?

[tsergeant, 2016/12/12 23:54:56]

You're right. I started this patch months ago, so I'm not sure what this was
meant to achieve.

Deleted.

       }
 
       iron-dropdown {
         margin-top: 28px;  /** Height of icon + 8px spacing. */
       }
 
       .dropdown-content {
         @apply(--shadow-elevation-2dp);
         background-color: white;
         border-radius: 2px;
         color: var(--paper-grey-800);
         overflow: hidden;
         padding: 12px 20px;
       }
 
+      /* Selection overlay. */
+
       :host(:not([has-drawer])) #overlay-wrapper {
         -webkit-margin-start: var(--side-bar-width);
       }
 
       #overlay-buttons {
         margin: 0 auto;
         max-width: var(--card-max-width);
         padding: 0 var(--card-padding-side);
       }
 
       paper-button {
         font-weight: 500;
       }
 
       #number-selected {
         flex: 1;
       }
 
       #cancel-icon-button {
         -webkit-margin-end: 24px;
         -webkit-margin-start: 2px;
-        height: 36px;
-        min-width: 36px;
-        width: 36px;
       }
 
-      #grouped-nav-container paper-icon-button {
-        --paper-icon-button-ink-color: rgba(255, 255, 255, 0.4);
-        -webkit-margin-start: 24px;
-        flex: 0 0 auto;
+      /* Grouped toolbar. */
+
+      paper-tabs {
+        --paper-tabs-selection-bar-color: #fff;
+        -webkit-margin-start: 32px;

[calamity, 2016/12/12 05:03:16]

Hmm, just noticed that the mocks say this should be moved in even more (aligned
with the card). Unfortunately, our dates are also currently way too long so we
need to deal with that too...

[tsergeant, 2016/12/12 23:54:57]

Acknowledged. This will be a fair amount of work, so I'll defer to a follow-up?

[calamity, 2016/12/13 00:45:23]

Yeah, for sure. I might take a look at date formatting nonsense.

+        height: calc(var(--toolbar-grouped-height) - var(--toolbar-height));
+        min-width: 300px;
       }
 
       paper-tab {
         --paper-tab-ink: rgba(255, 255, 255, 0.4);
         font-size: 13px;
         text-transform: uppercase;
       }
 
-      paper-tabs {
-        --paper-tabs-selection-bar-color: var(--google-blue-500);
-        height: calc(var(--toolbar-grouped-height) - var(--toolbar-height));
-        min-width: 300px;
-      }
-
       #grouped-buttons-container {
         align-items: center;
         display: flex;
       }
 
-      #grouped-range-buttons {
-        -webkit-margin-start: 32px;
-      }
-
       #grouped-nav-container {
-        -webkit-margin-end: 24px;
+        -webkit-margin-end: 16px;
         align-items: center;
         display: flex;
         flex: 1;
         justify-content: flex-end;
         overflow: hidden;
         transition: opacity 150ms;
       }
 
       :host([grouped-range='0']) #grouped-nav-container {
         opacity: 0;
         pointer-events: none;
       }
 
       #grouped-date {
+        -webkit-margin-end: 8px;
         flex: 0 1 auto;
         opacity: 0.7;
         overflow: hidden;
         text-align: right;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
+      #grouped-nav-container button {
+        -webkit-margin-start: 8px;
+        flex: 0 0 auto;
+      }
+
+      #grouped-nav-container button[disabled] {
+        color: rgba(255, 255, 255, 0.5);
+      }
+
       :host-context([dir=rtl]) .rtl-reversible {
         transform: rotate(180deg);
       }
     </style>
     <div id="toolbar-container">
       <cr-toolbar id="main-toolbar"
           page-name="$i18n{title}"
           clear-label="$i18n{clearSearch}"
           search-prompt="$i18n{searchPrompt}"
           hidden$="[[itemsSelected_]]"
@@ skipping 19 matching lines @@
         <iron-dropdown vertical-align="top" horizontal-align="right"
             allow-outside-scroll>
           <div class="dropdown-content">
             $i18nRaw{hasSyncedResults}
           </div>
         </iron-dropdown>
       </template>
       <template is="dom-if" if="[[itemsSelected_]]">
         <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]">
           <div id="overlay-buttons">
-            <paper-icon-button icon="cr:clear" id="cancel-icon-button"
-                on-tap="onClearSelectionTap_" title="$i18n{cancel}">
-            </paper-icon-button>
+            <button is="paper-icon-button-light"
+                id="cancel-icon-button"
+                class="icon-button"
+                on-tap="onClearSelectionTap_"
+                title="$i18n{cancel}">
+              <iron-icon icon="cr:clear"></iron-icon>
+            </button>
             <div id="number-selected">[[numberOfItemsSelected_(count)]]</div>
             <paper-button id="cancel-button" on-tap="onClearSelectionTap_">
               $i18n{cancel}
             </paper-button>
             <paper-button id="delete-button" on-tap="onDeleteTap_">
               $i18n{delete}
             </paper-button>
           </div>
         </div>
       </template>
     </div>
     <template is="dom-if" if="[[isGroupedMode]]">
       <div id="grouped-buttons-container">
-        <paper-tabs attr-for-selected="value" selected="{{groupedRange}}"
-            id="grouped-range-buttons">
+        <paper-tabs attr-for-selected="value" selected="{{groupedRange}}">
           <paper-tab value="0">$i18n{rangeAllTime}</paper-tab>
           <paper-tab value="1">$i18n{rangeWeek}</paper-tab>
           <paper-tab value="2">$i18n{rangeMonth}</paper-tab>
         </paper-tabs>
         <div id="grouped-nav-container">
           <span id="grouped-date">
             {{getHistoryInterval_(queryStartTime, queryEndTime)}}
           </span>
-          <paper-icon-button id="today-button" icon="history:today"
-              alt="$i18n{rangeToday}"
+          <button is="paper-icon-button-light"
+              id="today-button"
+              class="icon-button"
               title="$i18n{rangeToday}"
               on-tap="onTodayTap_"
-              disabled="[[isToday_(groupedOffset)]]"></paper-icon-button>
-          <paper-icon-button id="prev-button" icon="history:chevron-left"
-              alt="$i18n{rangePrevious}"
+              disabled="[[isToday_(groupedOffset)]]">
+            <iron-icon icon="history:today"></iron-icon>
+          </button>
+          <button is="paper-icon-button-light"
+              id="prev-button"
               title="$i18n{rangePrevious}"
-              class="rtl-reversible"
+              class="icon-button rtl-reversible"
               on-tap="onPrevTap_"
-              disabled="[[!hasMoreResults]]"></paper-icon-button>
-          <paper-icon-button id="next-button" icon="cr:chevron-right"
-              alt="$i18n{rangeNext}"
+              disabled="[[!hasMoreResults]]">
+            <iron-icon icon="history:chevron-left"></iron-icon>
+          </button>
+          <button is="paper-icon-button-light"
+              id="next-button"
               title="$i18n{rangeNext}"
-              class="rtl-reversible"
+              class="icon-button rtl-reversible"
               on-tap="onNextTap_"
-              disabled="[[isToday_(groupedOffset)]]"></paper-icon-button>
+              disabled="[[isToday_(groupedOffset)]]">
+            <iron-icon icon="cr:chevron-right"></iron-icon>
+          </button>
         </div>
       </div>
     </template>
   </template>
   <script src="chrome://history/history_toolbar.js"></script>
 </dom-module>