Revamp desktop Autofill settings, round 2

chrome/browser/resources/options/autofill_options_list.js

Index: chrome/browser/resources/options/autofill_options_list.js
diff --git a/chrome/browser/resources/options/autofill_options_list.js b/chrome/browser/resources/options/autofill_options_list.js
index 493199cada09400cc8efdea3282dfa4639731545..04446a241715e88fc04d8be95a7b0c7f6e495ebf 100644
--- a/chrome/browser/resources/options/autofill_options_list.js
+++ b/chrome/browser/resources/options/autofill_options_list.js
@@ -14,7 +14,8 @@ cr.define('options.autofillOptions', function() {
   function AutofillEditProfileButton(edit) {
     var editButtonEl = /** @type {HTMLButtonElement} */(
         document.createElement('button'));
-    editButtonEl.className = 'list-inline-button custom-appearance';
+    editButtonEl.className =
+        'list-inline-button hide-until-hover custom-appearance';
     editButtonEl.textContent =
         loadTimeData.getString('autofillEditProfileButton');
     editButtonEl.onclick = edit;
@@ -30,6 +31,16 @@ cr.define('options.autofillOptions', function() {
   }
 
   /**
+   * @return {!HTMLSpanElement}
+   */
+  function CreateGooglePaymentsLabel() {
+    var label = document.createElement('div');
+    label.className = 'deemphasized hides-on-hover';
+    label.textContent = loadTimeData.getString('autofillFromGooglePayments');
+    return label;
+  }
+
+  /**
    * Creates a new address list item.
    * @param {Object} entry An object with metadata about an address profile.
    * @constructor
@@ -53,14 +64,20 @@ cr.define('options.autofillOptions', function() {
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
-      // The stored label.
       var label = this.ownerDocument.createElement('div');
       label.className = 'autofill-list-item';
       label.textContent = this.label;
       this.contentElement.appendChild(label);
 
-      if (!this.isLocal)
+      var sublabel = this.ownerDocument.createElement('div');
+      sublabel.className = 'deemphasized';
+      sublabel.textContent = this.sublabel;
+      this.contentElement.appendChild(sublabel);
+
+      if (!this.isLocal) {
         this.deletable = false;
+        this.contentElement.appendChild(CreateGooglePaymentsLabel());
+      }
 
       // The 'Edit' button.
       var guid = this.guid;
@@ -94,18 +111,25 @@ cr.define('options.autofillOptions', function() {
     decorate: function() {
       DeletableItem.prototype.decorate.call(this);
 
-      // The stored label.
       var label = this.ownerDocument.createElement('div');
       label.className = 'autofill-list-item';
       label.textContent = this.label;
       this.contentElement.appendChild(label);
 
-      if (!this.isLocal)
+      var sublabel = this.ownerDocument.createElement('div');
+      sublabel.className = 'deemphasized';
+      sublabel.textContent = this.sublabel;
+      this.contentElement.appendChild(sublabel);
+
+      if (!this.isLocal) {
         this.deletable = false;
+        this.contentElement.appendChild(CreateGooglePaymentsLabel());
+      }
 
       var guid = this.guid;
       if (this.isCached) {
         var localCopyText = this.ownerDocument.createElement('span');
+        localCopyText.className = 'hide-until-hover deemphasized';
         localCopyText.textContent =
             loadTimeData.getString('autofillDescribeLocalCopy');
         this.contentElement.appendChild(localCopyText);