MD Settings: add extension-control indicator for autofill and password.

chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html

Index: chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html
diff --git a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html
index f86e431fae1a722dd333b50c1f1b9df251c94fa7..4f2e11d43896239458b756e0ed870e75717f28bd 100644
--- a/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html
+++ b/chrome/browser/resources/settings/passwords_and_forms_page/passwords_and_forms_page.html
@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="autofill_section.html">
 <link rel="import" href="passwords_section.html">
+<link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../route.html">
@@ -32,13 +33,24 @@
                 aria-label="$i18n{autofill}"
                 aria-describedby="autofillSecondary"></button>
           </div>
-          <div class="secondary-action">
-            <paper-toggle-button id="autofillToggle"
-                aria-label="$i18n{autofill}"
-                checked="{{prefs.autofill.enabled.value}}">
-            </paper-toggle-button>
+          <div class$="[[secClass_(prefs.autofill.enabled.value)]]">

[scottchen, 2017/03/07 21:39:34]

This conditional "secondary-action" class is to avoid confusing division lines
like this: http://imgur.com/a/cadCV

There's also a TODO comment in the js file mentioning the plans to move this
toggle into the subpage itself.

[dschuyler, 2017/03/07 22:22:48]

I agree that line looks confusing in that case.
Hey, also please avoid abbreviations. i.e. please name secClass_ something else
(maybe just un-abbreviate). 

[scottchen, 2017/03/08 00:40:21]

Done.

+            <settings-toggle-button class="start" id="autofillToggle"

[dschuyler, 2017/03/07 22:22:48]

The class="start" should be just inside a .settings-box or .list-item.
I'd like to suggest an alternative, but I'm not sure what this is trying to
address. Let's chat about this.

[scottchen, 2017/03/08 00:40:20]

This is actually not needed - I originally had other test elements in the same
container, so I added this class to make it look less broken when debugging.
Removing.

+                aria-label="$i18n{autofill}" no-extension-indicator
+                pref="{{prefs.autofill.enabled}}">
+            </settings-toggle-button>
           </div>
         </div>
+        <template is="dom-if" if="[[prefs.autofill.enabled.extensionId]]">
+          <div class="settings-box continuation">
+            <extension-controlled-indicator class="start"
+                extension-id="[[prefs.autofill.enabled.extensionId]]"
+                extension-name="[[prefs.autofill.enabled.controlledByName]]"
+                extension-can-be-disabled="
+                    [[prefs.autofill.enabled.extensionCanBeDisabled]]"
+                on-extension-disable="onExtensionDisable_">
+            </extension-controlled-indicator>
+          </div>
+        </template>
         <div class="settings-box two-line">
           <div class="start two-line" on-tap="onPasswordsTap_"
               id="passwordManagerButton"
@@ -53,13 +65,26 @@
                 aria-label="$i18n{passwords}"
                 aria-describedby="passwordsSecondary"></button>
           </div>
-          <div class="secondary-action">
-            <paper-toggle-button id="passwordToggle"
-                aria-label="$i18n{passwords}"
-                checked="{{prefs.credentials_enable_service.value}}">
-            </paper-toggle-button>
+          <div class$="[[secClass_(prefs.credentials_enable_service.value)]]">

[scottchen, 2017/03/07 21:39:34]

same as above.

+            <settings-toggle-button class="start" id="passwordToggle"
+                aria-label="$i18n{passwords}" no-extension-indicator
+                pref="{{prefs.credentials_enable_service}}">
+            </settings-toggle-button>
           </div>
         </div>
+        <template is="dom-if"
+            if="[[prefs.credentials_enable_service.extensionId]]">
+          <div class="settings-box continuation">
+            <extension-controlled-indicator class="start"
+                extension-id="[[prefs.credentials_enable_service.extensionId]]"
+                extension-name=
+                    "[[prefs.credentials_enable_service.controlledByName]]"
+                extension-can-be-disabled=
+                    "[[prefs.credentials_enable_service.extensionCanBeDisabled]]"

[scottchen, 2017/03/07 21:39:34]

Not sure what I can do about the 80-col situation here.. can't break up anything
starting from the first quotation mark.

[dschuyler, 2017/03/07 22:22:48]

I think we can break after the "[[

[scottchen, 2017/03/08 00:40:21]

looks like this works!

+                on-extension-disable="onExtensionDisable_">
+            </extension-controlled-indicator>
+          </div>
+        </template>
       </neon-animatable>
       <template is="dom-if" route-path="/autofill">
         <settings-subpage