MD History: Display synced tabs history

chrome/browser/resources/md_history/side_bar.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Polymer({
+  is: 'side-bar',
+
+  attached: function() {
+    this.showHistory();
+  },
+
+  properties: {
+    selectedDisplay: {
+      type: String,
+      value: 'history'
+    }
+  },
+
+  // TODO(yingran): possibly use polymer properties to change the styles of the
+  // menu. Also somehow simplify the below since there is repetition.
+  /**
+   * Fires event to display the synced tabs page.
+   */
+  showSyncedTabs: function() {
+    this.selectedPage = 'synced-tabs';
+    this.fire('switch-display', {
+      display: this.selectedPage
+    });
+
+    this.$['tab-button'].style.cursor = 'default';
+    this.$['synced-tabs'].style.color = '#47d';
+    this.$['history-button'].style.cursor = 'pointer';
+    this.$['history'].style.color = '#333';
+  },
+
+  /**
+   * Fires event to display the history item page.
+   */
+  showHistory: function() {

[calamity, 2016/02/02 04:09:47]

Needing both of these is kinda lame. You should be able to make a generic
'showTab' method instead which sends the id of the button being clicked.

[yingran, 2016/02/09 04:21:34]

Done.

+    this.selectedPage = 'history';
+    this.fire('switch-display', {
+      display: this.selectedPage
+    });
+
+    this.$['history-button'].style.cursor = 'default';
+    this.$['history'].style.color = '#47d';
+    this.$['tab-button'].style.cursor = 'pointer';
+    this.$['synced-tabs'].style.color = '#333';

[calamity, 2016/02/02 04:09:47]

Use a CSS style that changes between these when an attribute is set. Setting
styles in JS is messy.

[yingran, 2016/02/09 04:21:34]

Done.

+  }
+});