[MD settings] clickable toggle labels on category default toggles

chrome/browser/resources/settings/site_settings/category_default_setting.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.
 
 /**
  * @fileoverview
  * 'category-default-setting' is the polymer element for showing a certain
  * category under Site Settings.
  */
 Polymer({
   is: 'category-default-setting',
 
   behaviors: [SiteSettingsBehavior, WebUIListenerBehavior],
 
   properties: {
+    /* The second line, shown under the |optionLabel_| line. (optional) */
+    optionDescription: String,
+
+    /* The second line, shown under the |subOptionLabel| line. (optional) */
+    subOptionDescription: String,
+
+    /* The sub-option is a separate toggle. Setting this label will show the
+     * additional toggle. Shown above |subOptionDescription|. (optional) */
+    subOptionLabel: String,
+
+    /* The on/off text for |optionLabel_| below. */
+    toggleOffLabel: String,
+    toggleOnLabel: String,

[stevenjb, 2017/04/01 00:15:37]

This is fine, but I still personally think label, desc, sublabel, subdesc would
be easier to follow. *shrug*

[dschuyler, 2017/04/01 00:20:59]

Seems reasonable. I'd like to rework this code to make the second (desc) line
change with the toggle on/off and keep the first (label) line consistent. I'll
keep this in mind.

+
     /** @private {chrome.settingsPrivate.PrefObject} */
     controlParams_: {
       type: Object,
       value: function() {
         return /** @type {chrome.settingsPrivate.PrefObject} */({});
       },
     },
 
+    /**
+     * The label to be shown next to the toggle (above |optionDescription|).
+     * This will be either toggleOffLabel or toggleOnLabel.
+     * @private
+     */
+    optionLabel_: String,
+
     /** @private {!DefaultContentSetting} */
     priorDefaultContentSetting_: {
       type: Object,
       value: function() {
         return /** @type {DefaultContentSetting} */({});
       },
     },
 
     /**
-     * The description to be shown next to the slider.
-     * @private
-     */
-    sliderDescription_: String,
-
-    /**
      * Cookies and Flash settings have a sub-control that is used to mimic a
      * tri-state value.
      * @private {chrome.settingsPrivate.PrefObject}
      */
     subControlParams_: {
       type: Object,
       value: function() {
         return /** @type {chrome.settingsPrivate.PrefObject} */({});
       },
     },
-
-    /* Labels for the toggle on/off positions. */
-    toggleOffLabel: String,
-    toggleOnLabel: String,
-
-    subOptionLabel: String,
-    subOptionSecondary: {
-      type: String,
-      value: null,  // Needs default value so binding fires upon initialization.
-    },
   },
 
   observers: [
     'onCategoryChanged_(category)',
     'onChangePermissionControl_(category, controlParams_.value, ' +
         'subControlParams_.value)',
   ],
 
   ready: function() {
     this.addWebUIListener('contentSettingCategoryChanged',
@@ skipping 117 matching lines @@
   /**
    * Handles changes to the category pref and the |category| member variable.
    * @private
    */
   onCategoryChanged_: function() {
     this.browserProxy
         .getDefaultValueForContentType(
           this.category).then(function(defaultValue) {
             this.updateControlParams_(defaultValue);
 
-            // Flash only shows ALLOW or BLOCK descriptions on the slider.
+            // Flash only shows ALLOW or BLOCK descriptions on the toggle.
             var setting = defaultValue.setting;
             if (this.category == settings.ContentSettingsTypes.PLUGINS &&
                 setting == settings.PermissionValues.IMPORTANT_CONTENT) {
               setting = settings.PermissionValues.ALLOW;
             } else if (
                 this.category == settings.ContentSettingsTypes.COOKIES &&
                 setting == settings.PermissionValues.SESSION_ONLY) {
               setting = settings.PermissionValues.ALLOW;
             }
             var categoryEnabled = setting != settings.PermissionValues.BLOCK;
-            this.sliderDescription_ =
+            this.optionLabel_ =
                 categoryEnabled ? this.toggleOnLabel : this.toggleOffLabel;
           }.bind(this));
   },
 
   /**
    * @return {boolean}
    * @private
    */
   isToggleDisabled_: function() {
     return this.category == settings.ContentSettingsTypes.POPUPS &&
         loadTimeData.getBoolean('isGuest');
   },
-
-  /**
-   * Returns classname to indicate secondary label exists.
-   * @param {boolean} subOptionLabel
-   * @return {string}
-   * @private
-   */
-  subOptionClass_: function(subOptionLabel) {
-    return subOptionLabel ? 'two-line' : '';
-  }
 });