[MD settings] icons for clickable rows

chrome/browser/resources/settings/site_settings_page/site_settings_page.html

Index: chrome/browser/resources/settings/site_settings_page/site_settings_page.html
diff --git a/chrome/browser/resources/settings/site_settings_page/site_settings_page.html b/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
index ed509727067eb294b9199210d51be04ebadd18cb..e34157f8e6790c67fbafb3f07058da93b9b2a979 100644
--- a/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
+++ b/chrome/browser/resources/settings/site_settings_page/site_settings_page.html
@@ -17,6 +17,8 @@
         on-tap="onTapCategory">
       <iron-icon icon="settings:list"></iron-icon>
       <div class="middle">$i18n{siteSettingsCategoryAllSites}</div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>

[tommycli, 2016/09/20 17:44:08]

I hate to do this to you, but is it possible to do this with CSS instead?

i.e. Make a .settings-box.clickable class? 

Perhaps with a background-image or using the CSS :after selector?

[dschuyler, 2016/09/23 17:29:18]

The control needs to do more than just be a picture. It's an a11y 
target for example. I was able to leverage your suggestion and 
reduce the number of dom-nodes and shadow-roots (vs. what
it would have been otherwise).

Done.

     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.COOKIES]]" on-tap="onTapCategory">
@@ -28,6 +30,8 @@
         </div>
         <div id="cookies" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.GEOLOCATION]]" on-tap="onTapCategory">
@@ -37,7 +41,9 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.GEOLOCATION)]]
         <div id="geolocation" class="secondary"></div>
       </div>
-    </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
+   </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.CAMERA]]" on-tap="onTapCategory">
       <iron-icon icon="[[computeIconForContentCategory(
@@ -46,6 +52,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.CAMERA)]]
         <div id="camera" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line" category$="[[ContentSettingsTypes.MIC]]"
         on-tap="onTapCategory">
@@ -55,6 +63,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.MIC)]]
         <div id="mic" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.NOTIFICATIONS]]"
@@ -65,6 +75,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.NOTIFICATIONS)]]
         <div id="notifications" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.JAVASCRIPT]]"
@@ -75,6 +87,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.JAVASCRIPT)]]
         <div id="javascript" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.PLUGINS]]"
@@ -85,6 +99,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.PLUGINS)]]
         <div id="plugins" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.IMAGES]]" on-tap="onTapCategory">
@@ -94,6 +110,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.IMAGES)]]
         <div id="images" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.POPUPS]]" on-tap="onTapCategory">
@@ -103,6 +121,8 @@
         [[computeTitleForContentCategory(ContentSettingsTypes.POPUPS)]]
         <div id="popups" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.BACKGROUND_SYNC]]"
@@ -114,6 +134,8 @@
             ContentSettingsTypes.BACKGROUND_SYNC)]]
         <div id="backgroundSync" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.KEYGEN]]"
@@ -125,6 +147,8 @@
             ContentSettingsTypes.KEYGEN)]]
         <div id="keygen" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.AUTOMATIC_DOWNLOADS]]"
@@ -136,6 +160,8 @@
             ContentSettingsTypes.AUTOMATIC_DOWNLOADS)]]
         <div id="automaticDownloads" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.UNSANDBOXED_PLUGINS]]"
@@ -147,6 +173,8 @@
             ContentSettingsTypes.UNSANDBOXED_PLUGINS)]]
         <div id="unsandboxedPlugins" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box two-line"
         category$="[[ContentSettingsTypes.PROTOCOL_HANDLERS]]"
@@ -158,6 +186,8 @@
             ContentSettingsTypes.PROTOCOL_HANDLERS)]]
         <div id="handlers" class="secondary"></div>
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box" category$="[[ContentSettingsTypes.ZOOM_LEVELS]]"
         on-tap="onTapCategory">
@@ -166,6 +196,8 @@
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.ZOOM_LEVELS)]]
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
     <div class="settings-box" category$="[[ContentSettingsTypes.USB_DEVICES]]"
         on-tap="onTapCategory">
@@ -174,6 +206,8 @@
       <div class="middle">
         [[computeTitleForContentCategory(ContentSettingsTypes.USB_DEVICES)]]
       </div>
+      <iron-icon icon="settings:arrow-drop-up" class="settings-arrow-right">
+      </iron-icon>
     </div>
   </template>
   <script src="site_settings_page.js"></script>