MD History: Refactored design for displaying history information

chrome/browser/resources/md_history/history_item.js

Index: chrome/browser/resources/md_history/history_item.js
diff --git a/chrome/browser/resources/md_history/history_item.js b/chrome/browser/resources/md_history/history_item.js
index 242660db8aaf7a02a7c50c78b4db2e6fa31360de..d5f02a15f9126f52cf09628b8d3420e5f881a74b 100644
--- a/chrome/browser/resources/md_history/history_item.js
+++ b/chrome/browser/resources/md_history/history_item.js
@@ -6,12 +6,18 @@ Polymer({
   is: 'history-item',
 
   properties: {
-    timeAccessed_: {
+    // The date of these history items.
+    historyDate: {
       type: String,
       value: ''
     },
 
-    websiteTitle_: {
+    timeAccessed: {
+      type: String,
+      value: ''
+    },
+
+    websiteTitle: {
       type: String,
       value: ''
     },
@@ -20,7 +26,7 @@ Polymer({
     // Gives the user some idea of which history items are different pages
     // belonging to the same site, and can be used to look for more items
     // from the same site.
-    websiteDomain_: {
+    websiteDomain: {
       type: String,
       value: ''
     },
@@ -28,7 +34,7 @@ Polymer({
     // The website url is used to define where the link should take you if
     // you click on the title, and also to define which icon the history-item
     // should display.
-    websiteUrl_: {
+    websiteUrl: {

[tsergeant, 2016/02/02 05:58:00]

A bunch of these went from private to public. I'm not sure if it was intentional
or a result of the merge, but...I think it's okay? I don't think they should
have been private in the first place.

[yingran, 2016/02/02 06:49:11]

dbeam asked me to change them to private but yeah, i don't see why they have to
be private either...

       type: String,
       value: '',
       observer: 'showIcon_'
@@ -42,7 +48,7 @@ Polymer({
     },
 
     // The time in seconds of when the website was accessed.
-    timestamp_: {
+    timestamp: {
       type: Number,
       value: 0
     },
@@ -51,6 +57,23 @@ Polymer({
       type: Boolean,
       value: false,
       notify: true
+    },
+
+    isFirstCard: {

[tsergeant, 2016/02/02 05:58:00]

Rename to something like isCardStart. isFirstCard makes it sound like it's the
first thing on the page.

[yingran, 2016/02/02 06:49:11]

Done.

+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+
+    isLastCard: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+
+    hasTimeGap: {
+      type: Boolean,
+      value: false
     }
   },
 
@@ -59,7 +82,7 @@ Polymer({
    * or decreases its count of selected items accordingly.
    * @private
    */
-  onCheckboxSelected_: function() {
+  checkboxSelected: function() {

[tsergeant, 2016/02/02 05:58:00]

This rename should change back

[yingran, 2016/02/02 06:49:11]

Done.

     this.fire('history-checkbox-select', {
       countAddition: this.$.checkbox.checked ? 1 : -1
     });
@@ -72,20 +95,20 @@ Polymer({
    */
   showIcon_: function() {
     this.$['website-icon'].style.backgroundImage =
-        getFaviconImageSet(this.websiteUrl_);
+        getFaviconImageSet(this.websiteUrl);
   },
 
   /**
    * Fires a custom event when the menu button is clicked. Sends the details of
    * the history item and where the menu should appear.
    */
-  onMenuButtonTap_: function(e) {
+  openMenu: function(e) {

[tsergeant, 2016/02/02 05:58:00]

And this one

[yingran, 2016/02/02 06:49:11]

Done.

     var position = this.$['menu-button'].getBoundingClientRect();
 
     this.fire('toggle-menu', {
       x: position.left,
       y: position.top,
-      accessTime: this.timestamp_
+      accessTime: this.timestamp
     });
 
     // Stops the 'tap' event from closing the menu when it opens.