MD Bookmarks: Simplify and improve consistency of CSS

- Apply color and line-height to the whole page
- Set iron-icon-width/height globally, reducing the number of places
  where specific sizing is necessary
- Import cr-shared-style into Bookmarks' shared style module, which
  removes the need to specify some button styles
- Use paper-icon-button-light in folder-node, which simplifies CSS and
  slightly improves performance
- Make item highlight colors consistent

BUG=715394
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2846673003
Cr-Commit-Position: refs/heads/master@{#468296}

chrome/browser/resources/md_bookmarks/app.html

@@ -15,9 +15,11 @@
   <template>
     <style>
       :host {
+        color: var(--primary-text-color);
         display: flex;
         flex-direction: column;
         height: 100%;
+        line-height: 154%;  /* 20px. */
       }
 
       #main-container {

chrome/browser/resources/md_bookmarks/folder_node.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.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/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/actions.html">
 <link rel="import" href="chrome://bookmarks/icons.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
@@ -52,19 +51,14 @@
       }
 
       iron-icon {
-        --iron-icon-height: 20px;
-        --iron-icon-width: 20px;
-        min-width: 20px;
+        flex-shrink: 0;
       }
 
       #arrow {
         color: var(--secondary-text-color);
-        height: 36px;
         margin: 0 8px;
-        min-width: 36px;
         transform: rotate(-90deg);
         transition: transform 150ms;
-        width: 36px;
       }
 
       :host-context([dir='rtl']) #arrow {
@@ -84,9 +78,10 @@
         draggable="[[!isTopLevelFolder_(depth)]]"
         hidden="[[isRootFolder_(depth)]]">
       <template is="dom-if" if="[[hasChildFolder_(item_.children)]]">
-        <paper-icon-button id="arrow" icon="cr:arrow-drop-down"
+        <button is="paper-icon-button-light" id="arrow"
             is-open$="[[!isClosed_]]" on-tap="toggleFolder_">
-        </paper-icon-button>
+          <iron-icon icon="cr:arrow-drop-down"></iron-icon>
+        </button>
       </template>
       <div id="folder-label" class="v-centered">
         <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"

chrome/browser/resources/md_bookmarks/item.html

@@ -22,7 +22,7 @@
       }
 
       :host([is-selected-item_]) {
-        background-color: rgb(225, 235, 253);
+        background-color: var(--highlight-color);
       }
 
       #website-title {
@@ -34,31 +34,27 @@
         white-space: nowrap;
       }
 
-      #icon {
-        background-repeat: no-repeat;
-        height: 16px;
-        margin: 2px;
-      }
-
       #icon-wrapper {
         -webkit-margin-end: 20px;
+        color: var(--secondary-text-color);
+        display: flex;
         height: 20px;
         width: 20px;
       }
 
-      .more-vert-button {
-        -webkit-margin-end: 12px;
+      #icon {
+        background-repeat: no-repeat;
+        height: 16px;
+        margin: 2px;
+        width: 16px;
       }
 
-      iron-icon {
-        --iron-icon-height: 20px;
-        --iron-icon-width: 20px;
-        color: var(--secondary-text-color);
+      button.more-vert-button {
+        -webkit-margin-end: 12px;
       }
-      </style>
+    </style>
     <div id="icon-wrapper">
-      <iron-icon id="folder-icon" icon="cr:folder"
-          hidden$="[[!isFolder_]]">
+      <iron-icon id="folder-icon" icon="cr:folder" hidden$="[[!isFolder_]]">
       </iron-icon>
       <div id="icon" hidden$="[[isFolder_]]"></div>
     </div>

chrome/browser/resources/md_bookmarks/shared_style.html

 <link rel="import" href="chrome://bookmarks/shared_vars.html">
-<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 
 <dom-module id="shared-style">
   <template>
-    <style include="cr-hidden-style">
+    <style include="cr-shared-style">
       button.more-vert-button {
-        height: 36px;
         padding: 8px;
-        width: 36px;
       }
 
       button.more-vert-button div {
@@ -25,11 +23,6 @@
         margin: 8px 0;
       }
 
-      paper-button {
-        height: 32px;
-        margin: 0;
-      }
-
       .drag-above::before,
       .drag-below::after {
         background-clip: padding-box;
@@ -59,7 +52,7 @@
       }
 
       .drag-on {
-        background-color: rgba(66, 133, 244, 0.16);
+        background-color: var(--highlight-color);
       }
     </style>
   </template>

chrome/browser/resources/md_bookmarks/shared_vars.html

@@ -3,7 +3,11 @@
     --card-max-width: 960px;
     --card-padding-side: 32px;
     --folder-inactive-color: #5a5a5a;
+    /* --google-blue-500 at 16% alpha. */
+    --highlight-color: rgba(65, 132, 243, 0.16);
     --interactive-color: var(--google-blue-500);
+    --iron-icon-height: 20px;
+    --iron-icon-width: 20px;
     --min-sidebar-width: 256px;
     --paper-input-container-focus-color: var(--interactive-color);
     --paper-input-container-input: {