Network settings: Fix click targets for list items

Bug: 804686
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I12f8b20ee210f436e1d4858eddb66a6fa112faaf
Reviewed-on: https://chromium-review.googlesource.com/952033
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Toni Barzic <tbarzic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541487}

chrome/browser/resources/settings/internet_page/internet_known_networks_page.html

@@ -8,7 +8,7 @@
 
 <dom-module id="settings-internet-known-networks-page">
   <template>
-    <style include="internet-shared">
+    <style include="internet-shared iron-flex">
       cr-policy-indicator {
         -webkit-margin-start: var(--settings-controlled-by-spacing);
       }
@@ -22,23 +22,25 @@
       <div class="secondary">$i18n{knownNetworksPreferred}</div>
     </div>
     <div class="list-frame vertical-list">
-      <div class="list-item"
-          hidden$="[[havePreferred_(networkStateList_)]]">
+      <div class="list-item" hidden$="[[havePreferred_(networkStateList_)]]">
         $i18n{internetNoNetworks}
       </div>
       <template is="dom-repeat" items="[[networkStateList_]]"
           filter="networkIsPreferred_">
         <div class="list-item">
-          <div class="start">[[item.Name]]</div>
-          <template is="dom-if" if="[[isPolicySource(item.Source))]]">
-            <cr-policy-indicator
-                indicator-type="[[getIndicatorTypeForSource(item.Source)]]">
-            </cr-policy-indicator>
-          </template>
-          <button class="subpage-arrow" is="paper-icon-button-light"
-              actionable on-click="fireShowDetails_" tabindex$="[[tabindex]]"
-              aria-label$="[[item.Name]]">
-          </button>
+          <div actionable class="flex layout horizontal"
+              on-click="fireShowDetails_">
+            <div class="flex">[[item.Name]]</div>
+            <template is="dom-if" if="[[isPolicySource(item.Source))]]">
+              <cr-policy-indicator on-click="doNothing_"
+                  indicator-type="[[getIndicatorTypeForSource(item.Source)]]">
+              </cr-policy-indicator>
+            </template>
+            <button class="subpage-arrow" is="paper-icon-button-light"
+                tabindex$="[[tabindex]]" aria-label$="[[item.Name]]">
+            </button>
+          </div>
+
           <div class="separator"></div>
           <button is="paper-icon-button-light" class="icon-more-vert"
               preferred tabindex$="[[tabindex]]" on-click="onMenuButtonTap_"
@@ -56,16 +58,19 @@
       <template is="dom-repeat" items="[[networkStateList_]]"
           filter="networkIsNotPreferred_">
         <div class="list-item">
-          <div class="start">[[item.Name]]</div>
-          <template is="dom-if" if="[[isPolicySource(item.Source))]]">
-            <cr-policy-indicator
-                indicator-type="[[getIndicatorTypeForSource(item.Source)]]">
-            </cr-policy-indicator>
-          </template>
-          <button class="subpage-arrow" is="paper-icon-button-light"
-              actionable on-click="fireShowDetails_" tabindex$="[[tabindex]]"
-              aria-label$="[[item.Name]]">
-          </button>
+          <div actionable class="flex layout horizontal"
+              on-click="fireShowDetails_">
+            <div class="flex">[[item.Name]]</div>
+            <template is="dom-if" if="[[isPolicySource(item.Source))]]">
+              <cr-policy-indicator on-click="doNothing_"
+                  indicator-type="[[getIndicatorTypeForSource(item.Source)]]">
+              </cr-policy-indicator>
+            </template>
+            <button class="subpage-arrow" is="paper-icon-button-light"
+                tabindex$="[[tabindex]]" aria-label$="[[item.Name]]">
+            </button>
+          </div>
+
           <div class="separator"></div>
           <button is="paper-icon-button-light" class="icon-more-vert"
               tabindex$="[[tabindex]]" on-click="onMenuButtonTap_"

chrome/browser/resources/settings/internet_page/internet_known_networks_page.js

@@ -183,4 +183,13 @@ Polymer({
     this.fire('show-detail', state);
     event.stopPropagation();
   },
+
+  /**
+   * Make sure events in embedded components do not propagate to onDetailsTap_.
+   * @param {!Event} event
+   * @private
+   */
+  doNothing_: function(event) {
+    event.stopPropagation();
+  },
 });

chrome/browser/resources/settings/internet_page/network_summary_item.html

@@ -12,9 +12,9 @@
 
 <dom-module id="network-summary-item">
   <template>
-    <style include="internet-shared">
+    <style include="internet-shared iron-flex">
       network-siminfo {
-        padding: 0 var(--settings-box-row-padding);
+        -webkit-padding-start: var(--settings-box-row-padding);
       }
 
       #details {
@@ -34,40 +34,42 @@
         font-weight: 400;
       }
     </style>
-    <div actionable class="settings-box two-line" on-click="onShowDetailsTap_">
-      <div id="details" no-flex$="[[showSimInfo_(deviceState)]]">
-        <cr-network-icon network-state="[[activeNetworkState]]"
-            device-state="[[deviceState]]">
-        </cr-network-icon>
-        <div class="flex">
-          <div id="networkName">[[getNetworkName_(activeNetworkState)]]</div>
-          <div id="networkState">
-            [[getNetworkStateText_(activeNetworkState, deviceState)]]
+    <div class="settings-box two-line">
+      <div actionable class="flex layout horizontal"
+          on-click="onShowDetailsTap_">
+        <div id="details" no-flex$="[[showSimInfo_(deviceState)]]">
+          <cr-network-icon network-state="[[activeNetworkState]]"
+              device-state="[[deviceState]]">
+          </cr-network-icon>
+          <div class="flex">
+            <div id="networkName">[[getNetworkName_(activeNetworkState)]]</div>
+            <div id="networkState">
+              [[getNetworkStateText_(activeNetworkState, deviceState)]]
+            </div>
           </div>
         </div>
-      </div>
 
-      <template is="dom-if" if="[[showSimInfo_(deviceState)]]" restamp>
-        <network-siminfo editable on-click="doNothing_"
-            network-properties="[[getCellularState_(deviceState)]]"
-            networking-private="[[networkingPrivate]]">
-        </network-siminfo>
-      </template>
+        <template is="dom-if" if="[[showSimInfo_(deviceState)]]" restamp>
+          <network-siminfo editable on-click="doNothing_"
+              network-properties="[[getCellularState_(deviceState)]]"
+              networking-private="[[networkingPrivate]]">
+          </network-siminfo>
+        </template>
 
-      <template is="dom-if" if="[[showPolicyIndicator_(activeNetworkState)]]">
-        <cr-policy-indicator indicator-type="[[getIndicatorTypeForSource(
-            activeNetworkState.Source)]]"
-            on-click="doNothing_">
-        </cr-policy-indicator>
-      </template>
+        <template is="dom-if" if="[[showPolicyIndicator_(activeNetworkState)]]">
+          <cr-policy-indicator indicator-type="[[getIndicatorTypeForSource(
+              activeNetworkState.Source)]]" on-click="doNothing_">
+          </cr-policy-indicator>
+        </template>
 
-      <template is="dom-if" if="[[showDetailsIsVisible_(activeNetworkState,
-          deviceState, networkStateList)]]">
-        <button class="subpage-arrow" is="paper-icon-button-light"
-            aria-label$="[[getDetailsA11yString_(activeNetworkState,
-                deviceState, networkStateList)]]">
-        </button>
-      </template>
+        <template is="dom-if" if="[[showDetailsIsVisible_(activeNetworkState,
+            deviceState, networkStateList)]]">
+          <button class="subpage-arrow" is="paper-icon-button-light"
+              aria-label$="[[getDetailsA11yString_(activeNetworkState,
+                  deviceState, networkStateList)]]">
+          </button>
+        </template>
+      </div>
 
       <template is="dom-if" if="[[enableToggleIsVisible_(deviceState)]]">
         <div class="separator"></div>