MD History: Display synced tabs history.

chrome/browser/resources/md_history/side_bar.html

Index: chrome/browser/resources/md_history/side_bar.html
diff --git a/chrome/browser/resources/md_history/side_bar.html b/chrome/browser/resources/md_history/side_bar.html
new file mode 100644
index 0000000000000000000000000000000000000000..81b7d2cc4eca4606732dbcfc1850e81585214795
--- /dev/null
+++ b/chrome/browser/resources/md_history/side_bar.html
@@ -0,0 +1,47 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/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/paper-ripple/paper-ripple.html">
+
+<dom-module id="side-bar">

[tsergeant, 2016/03/01 03:58:23]

I think we should keep all of these element names 'namespaced' as
'history-side-bar' etc.

Downloads and setting both do this, although they make it a little more terse by
leaving the prefix out of filenames.

[calamity, 2016/03/08 02:46:51]

Done.

+  <template>
+    <style>
+      #navigation-menu {
+        padding-top: 5px;
+        width: 200px;
+      }
+
+      .nav-button {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        cursor: pointer;
+        height: 48px;
+        position: relative;
+      }
+
+      p {
+        -webkit-padding-start: 25px;
+        -webkit-user-select: none;
+        color: #333;
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0;
+      }
+
+      .selected p {
+        color: rgb(68, 119, 221);
+      }
+    </style>
+    <div id="navigation-menu">

[tsergeant, 2016/03/01 03:58:23]

Can you get rid of #navigation-menu and just use :host instead?

Secondly, do you know if there's a reason why paper-menu wasn't used here? Seems
like it would add some nice things like keyboard control.

(md-settings uses a paper-menu with styling kinda similar to what we're doing)

[calamity, 2016/03/08 02:46:51]

Done.

+      <div on-tap="changeDisplay" id="history-button"
+          class="nav-button selected">
+        <p i18n-content="title"></p>
+        <paper-ripple></paper-ripple>
+      </div>
+      <div on-tap="changeDisplay" id="synced-tabs-button" class="nav-button">
+        <p>Open Tabs</p>

[tsergeant, 2016/03/01 03:58:23]

i18n this string

[calamity, 2016/03/08 02:46:51]

Done.

+        <paper-ripple></paper-ripple>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://history/side_bar.js"></script>
+</dom-module>