Revamp desktop Autofill settings, round 2

chrome/browser/resources/options/autofill_options_list.js

 // Copyright (c) 2012 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.
 
 cr.define('options.autofillOptions', function() {
   /** @const */ var DeletableItem = options.DeletableItem;
   /** @const */ var DeletableItemList = options.DeletableItemList;
   /** @const */ var InlineEditableItem = options.InlineEditableItem;
   /** @const */ var InlineEditableItemList = options.InlineEditableItemList;
 
   /**
    * @return {!HTMLButtonElement}
    */
   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;
 
     editButtonEl.onmousedown = function(e) {
       // Don't select the row when clicking the button.
       e.stopPropagation();
       // Don't focus on the button when clicking it.
       e.preventDefault();
     };
 
     return editButtonEl;
   }
 
   /**
+   * @return {!HTMLSpanElement}
+   */
+  function CreateGoogleAccountLabel() {
+    var label = document.createElement('div');
+    label.className = 'deemphasized hides-on-hover';
+    label.textContent = loadTimeData.getString('autofillFromGoogleAccount');
+    return label;
+  }
+
+  /**
    * Creates a new address list item.
    * @param {Object} entry An object with metadata about an address profile.
    * @constructor
    * @extends {options.DeletableItem}
    */
   function AddressListItem(entry) {
     var el = cr.doc.createElement('div');
     for (var key in entry) {
       el[key] = entry[key];
     }
     el.__proto__ = AddressListItem.prototype;
     el.decorate();
 
     return el;
   }
 
   AddressListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @override */
     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(CreateGoogleAccountLabel());
+      }
 
       // The 'Edit' button.
       var guid = this.guid;
       var editButtonEl = AutofillEditProfileButton(
           function() { AutofillOptions.loadAddressEditor(guid); });
       this.contentElement.appendChild(editButtonEl);
     },
   };
 
   /**
@@ skipping 13 matching lines @@
     return el;
   }
 
   CreditCardListItem.prototype = {
     __proto__: DeletableItem.prototype,
 
     /** @override */
     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(CreateGoogleAccountLabel());
+      }
 
       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);
 
         var clearLocalCopyButton = AutofillEditProfileButton(
             function() { chrome.send('clearLocalCardCopy', [guid]); });
         clearLocalCopyButton.textContent =
             loadTimeData.getString('autofillClearLocalCopyButton');
         this.contentElement.appendChild(clearLocalCopyButton);
       }
@@ skipping 441 matching lines @@
     CreditCardListItem: CreditCardListItem,
     ValuesListItem: ValuesListItem,
     NameListItem: NameListItem,
     AutofillAddressList: AutofillAddressList,
     AutofillCreditCardList: AutofillCreditCardList,
     AutofillValuesList: AutofillValuesList,
     AutofillNameValuesList: AutofillNameValuesList,
     AutofillPhoneValuesList: AutofillPhoneValuesList,
   };
 });