[MD Bookmarks] Add UI for Material Bookmarks.

chrome/browser/resources/md_bookmarks/folder_node.html

Index: chrome/browser/resources/md_bookmarks/folder_node.html
diff --git a/chrome/browser/resources/md_bookmarks/folder_node.html b/chrome/browser/resources/md_bookmarks/folder_node.html
new file mode 100644
index 0000000000000000000000000000000000000000..9a82d04776963507adc6e463ab0415473c4f2714
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/folder_node.html
@@ -0,0 +1,86 @@
+<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://bookmarks/icons.html">
+<link rel="import" href="chrome://bookmarks/shared_style.html">
+
+<dom-module id="bookmarks-folder-node">
+  <template>
+    <style include="shared-style">
+      :host {
+        display: block;
+      }
+
+      .v-centered {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .menu-label {
+        -webkit-margin-start: 24px;
+        color: var(--inactive-folder-color);

[tsergeant, 2017/01/03 23:31:17]

Angela's CL renamed these variables to

--folder-active-color
--folder-inactive-color

[jiaxi, 2017/01/04 02:50:16]

Done.

+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      #container {
+        height: 40px;
+      }
+
+      #descendants {
+        -webkit-padding-start: 40.5px;
+      }
+
+      #folder-label {
+        color: var(--secondary-text-color);
+        cursor: pointer;
+        flex-grow: 1;
+        overflow: hidden;
+      }
+
+      :host([is-selected]) .menu-label,
+      :host([is-selected]) #folder-label {
+        color: var(--active-folder-color);
+      }
+
+      iron-icon {
+        --iron-icon-height: 20px;
+        --iron-icon-width: 20px;
+        min-width: 20px;
+      }
+
+      paper-icon-button {
+        color: var(--secondary-text-color);
+        height: 36px;
+        min-width: 36px;
+        padding: 8px;
+        width: 36px;
+      }
+    </style>
+
+    <div id="container" class="v-centered">
+      <div id="folder-label" class="v-centered" on-tap="selectFolder_">
+        <iron-icon icon="[[getFolderIcon_(isSelected)]]"></iron-icon>
+        <div class="menu-label">[[item.title]]</div>
+      </div>
+      <template is="dom-if" if="[[hasChildFolder_(item.children)]]">
+        <paper-icon-button icon="[[getArrowIcon_(item.isOpen)]]"
+            on-tap="toggleFolder_"></paper-icon-button>
+      </template>
+    </div>
+    <div id="descendants" hidden$="[[!item.isOpen]]">
+      <template is="dom-repeat" items="[[item.children]]" as="child">
+        <template is="dom-if" if="[[!child.url]]">
+          <bookmarks-folder-node item="[[child]]"
+              is-selected="[[child.isSelected]]"></bookmarks-folder-node>
+        </template>
+      </template>
+    </div>
+  </template>
+  <script src="chrome://bookmarks/folder_node.js"></script>
+</dom-module>