MD History: Convert synced device collapse icon to a button

chrome/browser/resources/md_history/history_item.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.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-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/html/icon.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://history/browser_service.html">
@@ skipping 79 matching lines @@
       }
 
       #domain {
         -webkit-margin-start: 16px;
         color: var(--secondary-text-color);
         flex-shrink: 0;
       }
 
       #menu-button {
         -webkit-margin-end: 12px;
-        -webkit-margin-start: 2px;
-        color: var(--secondary-text-color);
-        height: 36px;
-        width: 36px;
-      }
-
-      #menu-button iron-icon {
-        height: 20px;
-        width: 20px;
       }
 
       #bookmark-star {
-        -webkit-margin-end: 10px;
-        -webkit-margin-start: 20px;
+        -webkit-margin-end: 4px;
+        -webkit-margin-start: 12px;
         color: rgb(68, 136, 255);
-        height: 20px;
+        height: 32px;
         visibility: hidden;
-        width: 20px;
+        width: 32px;
       }
 
       #bookmark-star iron-icon {
         height: 16px;
         width: 16px;
       }
 
       :host([starred]) #bookmark-star {
         visibility: visible;
       }
@@ skipping 21 matching lines @@
               <history-searched-label title="[[cropItemTitle_(item.title)]]"
                   search-term="[[searchTerm]]"></history-searched-label>
             </a>
             <span id="domain">[[item.domain]]</span>
           </div>
           <button is="paper-icon-button-light" id="bookmark-star"
               title="$i18n{removeBookmark}" on-tap="onRemoveBookmarkTap_">
             <iron-icon icon="cr:star"></iron-icon>
           </button>
           <button is="paper-icon-button-light" id="menu-button"
-              on-tap="onMenuButtonTap_" title="$i18n{moreActionsButton}">
+              class="icon-button" title="$i18n{moreActionsButton}"
+              on-tap="onMenuButtonTap_">
             <iron-icon icon="cr:more-vert"></iron-icon>
           </button>
         </div>
         <template is="dom-if" if="[[hasTimeGap]]">
           <div id="time-gap-separator"></div>
         </template>
       </div>
     </div>
   </template>
   <script src="chrome://history/history_item.js"></script>
 </dom-module>