[MD settings] move extra options in category settings

chrome/browser/resources/settings/privacy_page/privacy_page.html

 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_vars_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="/clear_browsing_data_dialog/clear_browsing_data_dialog.html">
 <link rel="import" href="/controls/settings_checkbox.html">
 <link rel="import" href="/controls/settings_toggle_button.html">
 <link rel="import" href="/lifetime_browser_proxy.html">
 <link rel="import" href="/route.html">
 <link rel="import" href="/settings_page/settings_animated_pages.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="/site_settings/all_sites.html">
+<link rel="import" href="/site_settings/category_default.html">
 <link rel="import" href="/site_settings/constants.html">
 <link rel="import" href="/site_settings/media_picker.html">
 <link rel="import" href="/site_settings/pdf_documents.html">
 <link rel="import" href="/site_settings/protocol_handlers.html">
 <link rel="import" href="/site_settings/site_data_details_subpage.html">
 <link rel="import" href="/site_settings/site_settings_category.html">
 <link rel="import" href="/site_settings/usb_devices.html">
 <link rel="import" href="/site_settings/site_data.html">
 <link rel="import" href="/site_settings/zoom_levels.html">
 <link rel="import" href="/site_settings_page/site_settings_page.html">
@@ skipping 185 matching lines @@
           <all-sites selected-site="{{selectedSite}}"></all-sites>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/automaticDownloads" no-search>
         <settings-subpage page-title="$i18n{siteSettingsAutomaticDownloads}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.AUTOMATIC_DOWNLOADS}}">
+            <category-default class="category-default"

[tommycli, 2016/12/09 00:13:19]

I see that each of these has the class="category-default". What's the reason?

[dschuyler, 2016/12/13 23:57:38]

The category-default holds those top one or two toggles that enable/disable the
category. 

+                category="{{ContentSettingsTypes.AUTOMATIC_DOWNLOADS}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/backgroundSync" no-search>
           no-search>
         <settings-subpage page-title="$i18n{siteSettingsBackgroundSync}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.BACKGROUND_SYNC}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.BACKGROUND_SYNC}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/camera" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryCamera}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.CAMERA}}">
             <media-picker type="camera" class="media-picker"></media-picker>
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.CAMERA}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/cookies" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryCookies}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.COOKIES}}">
-            <div class="settings-box cookie-controls">
+            <category-default class="category-default"

[tommycli, 2016/12/09 00:13:19]

Does every single site-settings-category node have a category-default as a child
element?

If so - I would recommend just making category-default part of
site-settings-category. You can pass in the extra options such as
sub-option-label and sub-option-secondary as attributes of
site-settings-category.

That would also allow you to avoid the one-off differences per data type.

I see you also sometimes need to put some extra controls either before OR after
the main controls.

In that case I suggest using
https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-distribution

So the template of site-settings-category might look like:

<template>
  <content select=".before-default-controls"></content>

  <!-- All the controls within category-default here -->

  <content select=".after-default-controls"></content>
</template>

[dschuyler, 2016/12/13 23:57:38]

The intent of the CL is to move the bits that are specific to different
categories out of the general site-settings-category page. I can consider other
ways to achieve that.

+                category="{{ContentSettingsTypes.COOKIES}}"
+                sub-option-label="$i18n{deleteDataPostSession}"
+                sub-option-secondary=""><!-- To work with :empty. -->
+            </category-default>
+            <div class="settings-box extra-options">
               <settings-toggle-button class="start"
                   label="$i18n{thirdPartyCookie}"
                   sub-label="$i18n{thirdPartyCookieSublabel}"
                   pref="{{prefs.profile.block_third_party_cookies}}">
               </settings-toggle-button>
             </div>
             <site-data class="site-data"></site-data>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/images" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryImages}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.IMAGES}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.IMAGES}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/location" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryLocation}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.GEOLOCATION}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.GEOLOCATION}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/handlers" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryHandlers}">
           <protocol-handlers></protocol-handlers>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/zoomLevels" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryZoomLevels}">
           <zoom-levels></zoom-levels>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/pdfDocuments" no-search>
         <settings-subpage page-title="$i18n{siteSettingsPdfDocuments}">
           <settings-pdf-documents prefs="{{prefs}}"></settings-pdf-documents>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/javascript" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryJavascript}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.JAVASCRIPT}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.JAVASCRIPT}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/keygen" no-search>
         <settings-subpage page-title="$i18n{siteSettingsKeygen}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.KEYGEN}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.KEYGEN}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/microphone" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryMicrophone}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.MIC}}">
             <media-picker type="mic" class="media-picker"></media-picker>
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.MIC}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/notifications" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryNotifications}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.NOTIFICATIONS}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.NOTIFICATIONS}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/flash" no-search>
         <settings-subpage page-title="$i18n{siteSettingsFlash}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.PLUGINS}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.PLUGINS}}"
+                sub-option-label="$i18n{siteSettingsFlashAskBefore}"
+                sub-option-secondary=
+                    "$i18n{siteSettingsFlashAskBeforeSubtitle}">
+            </category-default>
+<if expr="chromeos">

[tommycli, 2016/12/09 00:13:19]

May be cleaner to add this link in separate CL.

[dschuyler, 2016/12/13 23:57:38]

Done.

+            <div class="settings-box layout horizontal extra-options">
+              <div class="flex">

[tommycli, 2016/12/09 00:13:19]

Can this flex class be consolidated into the parent div. In other words, do we
need the extra div?

[dschuyler, 2016/12/13 23:57:38]

I was trying to avoid making edits to the code I was moving, but this does seem
like a simple change.

Done in a separate CL.

+                  <div class="list-item list-button"
+                      on-tap="onAdobeFlashStorageClicked_">
+                    $i18n{adobeFlashStorage}
+                  </div>
+              </div>
+            </div>
+</if>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/popups" no-search>
         <settings-subpage page-title="$i18n{siteSettingsCategoryPopups}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.POPUPS}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.POPUPS}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/unsandboxedPlugins" no-search>
         <settings-subpage page-title="$i18n{siteSettingsUnsandboxedPlugins}">
           <button class="icon-help subpage-title-extra"
               is="paper-icon-button-light" on-tap="onHelpTap_"></button>
           <site-settings-category
               selected-site="{{selectedSite}}"
               category="{{ContentSettingsTypes.UNSANDBOXED_PLUGINS}}">
+            <category-default class="category-default"
+                category="{{ContentSettingsTypes.UNSANDBOXED_PLUGINS}}">
+            </category-default>
           </site-settings-category>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/usbDevices" no-search>
         <settings-subpage page-title="$i18n{siteSettingsUsbDevices}">
           <usb-devices></usb-devices>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/siteDetails" no-search>
         <settings-subpage page-title="$i18n{siteSettingsSiteDetails}">
           <site-details site="[[selectedSite]]"></site-details>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/cookies/detail"
           no-search>
         <settings-subpage page-title="[[pageTitle]]">
           <paper-button class="subpage-title-extra"
               on-tap="onRemoveAllCookiesFromSite_">
             $i18n{siteSettingsCookieRemoveAll}
           </paper-button>
           <site-data-details-subpage page-title="{{pageTitle}}">
           </site-data-details-subpage>
         </settings-subpage>
       </template>
     </settings-animated-pages>
   </template>
   <script src="privacy_page.js"></script>
 </dom-module>