WebUI: Replace cr-section with cr-row class

This CLs replaces all usage of the cr-section class with a new cr-row
class. It also removes uses of the class where there isn't much benefit
to using them and cleans up some of the HTML and CSS that were used
to override the class.

Bug: 973674
Change-Id: I1c33ca05626bde382bd7fbd0b54b4ab3b86089dc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134197
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756447}

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.html

@@ -58,26 +58,7 @@
         margin-inline-end: 10px;
       }
 
-      .cr-section {
-        margin-bottom: 10px;
-      }
-
-      .cr-section.first {
-        border-top: none;
-      }
-
-      .cr-section.single-column {
-        align-items: stretch;
-        flex-direction: column;
-        justify-content: center;
-      }
-
-      .cr-section > .start {
-        align-items: center;
-        flex: auto;
-      }
-
-      .cr-section cr-button + cr-button {
+      .cr-row cr-button + cr-button {
         margin-inline-start: 8px;
       }
 
@@ -93,19 +74,17 @@
     </style>
 
     <!-- Title section: Icon + name + connection state. -->
-    <div id="title" class="cr-section first">
-      <div class="start layout horizontal center">
-        <network-icon
-            show-technology-badge="[[showTechnologyBadge_]]"
-            network-state="[[getNetworkState_(managedProperties_)]]">
-        </network-icon>
-        <div id="networkName" class="title">
-          [[getNameText_(managedProperties_)]]
-        </div>
-        <div id="networkState" class="title"
-            connected$="[[isConnectedState_(managedProperties_)]]">
-          [[getStateText_(managedProperties_)]]
-        </div>
+    <div id="title" class="cr-row first">
+      <network-icon
+          show-technology-badge="[[showTechnologyBadge_]]"
+          network-state="[[getNetworkState_(managedProperties_)]]">
+      </network-icon>
+      <div id="networkName" class="title">
+        [[getNameText_(managedProperties_)]]
+      </div>
+      <div id="networkState" class="title flex"
+          connected$="[[isConnectedState_(managedProperties_)]]">
+        [[getStateText_(managedProperties_)]]
       </div>
       <cr-button on-click="onForgetTap_"
           hidden$="[[!showForget_(managedProperties_)]]">
@@ -121,17 +100,17 @@
     <!-- SIM Info (Cellular only). -->
     <template is="dom-if" if="[[showCellularSim_(managedProperties_)]]"
         restamp>
-      <div class="cr-section single-column">
-        <network-siminfo device-state="[[deviceState_]]">
+      <div class="cr-row">
+        <network-siminfo class="flex" device-state="[[deviceState_]]">
         </network-siminfo>
-      <div>
+      </div>
     </template>
 
     <!-- Choose Mobile Network (Cellular only) -->
     <template is="dom-if"
         if="[[showCellularChooseNetwork_(managedProperties_)]]">
-      <div class="cr-section single-column">
-        <network-choose-mobile device-state="[[deviceState_]]"
+      <div class="cr-row">
+        <network-choose-mobile class="flex" device-state="[[deviceState_]]"
             managed-properties="[[managedProperties_]]">
         </network-choose-mobile>
       </div>
@@ -139,25 +118,25 @@
 
     <!-- APN (Cellular only) -->
     <template is="dom-if" if="[[isCellular_(managedProperties_)]]">
-      <div class="cr-section single-column">
-        <network-apnlist editable on-apn-change="onApnChange_"
+      <div class="cr-row">
+        <network-apnlist class="flex" editable on-apn-change="onApnChange_"
             managed-properties="[[managedProperties_]]">
         </network-apnlist>
       </div>
     </template>
 
     <!-- Proxy -->
-    <div class="cr-section single-column">
+    <div class="cr-row">
       <template is="dom-if"
           if="[[shouldShowProxyPolicyIndicator_(managedProperties_)]]">
-        <div class="property-box">
-          <cr-policy-network-indicator-mojo
-              property="[[managedProperties_.proxySettings.type]]">
-          </cr-policy-network-indicator-mojo>
-          <div>$i18n{networkProxyEnforcedPolicy}</div>
-        </div>
+        <cr-policy-network-indicator-mojo
+            property="[[managedProperties_.proxySettings.type]]">
+        </cr-policy-network-indicator-mojo>
+        <div>$i18n{networkProxyEnforcedPolicy}</div>
       </template>
-      <network-proxy editable use-shared-proxies
+    </div>
+    <div class="cr-row continuation">
+      <network-proxy class="flex" editable use-shared-proxies
           on-proxy-change="onProxyChange_"
           managed-properties="[[managedProperties_]]">
       </network-proxy>
@@ -165,38 +144,40 @@
 
     <template is="dom-if" if="[[isRememberedOrConnected_(managedProperties_)]]">
       <!-- IP Config -->
-      <div class="cr-section single-column">
-        <network-ip-config editable on-ip-change="onIPConfigChange_"
+      <div class="cr-row">
+        <network-ip-config class="flex"
+            editable on-ip-change="onIPConfigChange_"
             managed-properties="[[managedProperties_]]">
         </network-ip-config>
       </div>
 
       <!-- Nameservers -->
-      <div class="cr-section single-column">
-        <network-nameservers editable
+      <div class="cr-row">
+        <network-nameservers class="flex" editable
             on-nameservers-change="onIPConfigChange_"
             managed-properties="[[managedProperties_]]">
         </network-nameservers>
       </div>
     </template>
 
-    <div class="cr-section single-column indented">
+    <div class="cr-row">
       <!-- MAC Address. -->
       <div class="property-box single-column two-line"
           hidden$="[[!deviceState_.macAddress]]">
         <div>$i18n{OncMacAddress}</div>
         <div class="secondary">[[deviceState_.macAddress]]</div>
       </div>
+    </div>
 
-      <!-- Other properties to show if present. -->
-      <template is="dom-if" if="[[hasInfoFields_(managedProperties_)]]">
-        <network-property-list-mojo
+    <!-- Other properties to show if present. -->
+    <template is="dom-if" if="[[hasInfoFields_(managedProperties_)]]">
+      <div class="cr-row continuation">
+        <network-property-list-mojo class="flex"
             fields="[[getInfoFields_(managedProperties_)]]"
             property-dict="[[managedProperties_]]">
         </network-property-list-mojo>
-      </template>
-    </div>
-
+      </div>
+    </template>
   </template>
   <script src="internet_detail_dialog.js"></script>
 </dom-module>

chrome/browser/resources/extensions/detail_view.html

@@ -40,25 +40,15 @@
     flex-grow: 1;
   }
 
-  .cr-section.block {
+  .section {
     box-sizing: border-box;
-    display: block;
-    padding-bottom: var(--cr-section-vertical-padding);
-    padding-top: var(--cr-section-vertical-padding);
-  }
-
-  .cr-section.continuation {
-    border-top: none;
+    padding: var(--cr-section-vertical-padding) var(--cr-section-padding);
   }
 
-  .cr-section.control-line {
+  .cr-row.control-line {
     justify-content: space-between;
   }
 
-  .cr-section:first-child {
-    border: none;
-  }
-
   .section-content {
     color: var(--cr-secondary-text-color);
   }
@@ -146,7 +136,7 @@
         [[data.name]]
       </span>
     </div>
-    <div class="cr-section continuation control-line" id="enable-section">
+    <div class="cr-row first control-line" id="enable-section">
       <span class$="[[computeEnabledStyle_(data.state)]]">
         [[computeEnabledText_(data.state, '$i18nPolymer{itemOn}',
             '$i18nPolymer{itemOff}')]]
@@ -178,7 +168,7 @@
     </div>
     <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]">
       <div id="runtime-warnings" hidden$="[[!data.runtimeWarnings.length]]"
-          class="cr-section continuation warning control-line">
+          class="cr-row continuation warning control-line">
         <iron-icon class="warning-icon" icon="cr:error"></iron-icon>
         <span>
           <template is="dom-repeat" items="[[data.runtimeWarnings]]">
@@ -192,7 +182,7 @@
           </cr-button>
         </template>
       </div>
-      <div class="cr-section continuation warning" id="suspicious-warning"
+      <div class="cr-row continuation warning" id="suspicious-warning"
           hidden$="[[!data.disableReasons.suspiciousInstall]]">
         <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
         <span>
@@ -202,7 +192,7 @@
           </a>
         </span>
       </div>
-      <div class="cr-section continuation warning control-line"
+      <div class="cr-row continuation warning control-line"
           id="corrupted-warning"
           hidden$="[[!showRepairButton_(data.disableReasons.corruptInstall)]]">
         <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
@@ -212,18 +202,18 @@
           $i18n{itemRepair}
         </cr-button>
       </div>
-      <div class="cr-section continuation warning" id="blacklisted-warning"
+      <div class="cr-row continuation warning" id="blacklisted-warning"
           hidden$="[[!data.blacklistText]]">
         <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
         <span>[[data.blacklistText]]</span>
       </div>
-      <div class="cr-section continuation warning" id="update-required-warning"
+      <div class="cr-row continuation warning" id="update-required-warning"
           hidden$="[[!data.disableReasons.updateRequired]]">
         <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
         <span>$i18n{updateRequiredByPolicy}</span>
       </div>
     </div>
-    <div class="cr-section continuation block">
+    <div class="section">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemDescriptionLabel}
       </div>
@@ -231,13 +221,13 @@
         [[getDescription_(data.description, '$i18nPolymer{noDescription}')]]
       </div>
     </div>
-    <div class="cr-section block">
+    <div class="section hr">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemVersion}
       </div>
       <div class="section-content">[[data.version]]</div>
     </div>
-    <div class="cr-section block">
+    <div class="section hr">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemSize}
       </div>
@@ -247,14 +237,14 @@
         </paper-spinner-lite>
       </div>
     </div>
-    <div class="cr-section block" id="id-section" hidden$="[[!inDevMode]]">
+    <div class="section hr" id="id-section" hidden$="[[!inDevMode]]">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemIdHeading}
       </div>
       <div class="section-content">[[data.id]]</div>
     </div>
     <template is="dom-if" if="[[inDevMode]]">
-      <div class="cr-section block" id="inspectable-views">
+      <div class="section hr" id="inspectable-views">
         <div class="section-title" role="heading" aria-level="2">
           $i18n{itemInspectViews}
         </div>
@@ -275,7 +265,7 @@
         </div>
       </div>
     </template>
-    <div class="cr-section block">
+    <div class="section hr">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemPermissions}
       </div>
@@ -299,7 +289,7 @@
         </ul>
       </div>
     </div>
-    <div class="cr-section block">
+    <div class="section hr">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemSiteAccess}
       </div>
@@ -328,7 +318,7 @@
     </div>
     <template is="dom-if"
         if="[[hasDependentExtensions_(data.dependentExtensions.splices)]]">
-      <div class="cr-section block">
+      <div class="section hr">
         <div class="section-title" role="heading" aria-level="2">
           $i18n{itemDependencies}
         </div>
@@ -389,7 +379,7 @@
     <cr-link-row class="hr" hidden="[[!data.webStoreUrl.length]]"
         id="viewInStore" label="$i18n{viewInStore}"
         on-click="onViewInStoreTap_" external></cr-link-row>
-    <div class="cr-section block">
+    <div class="section hr">
       <div class="section-title" role="heading" aria-level="2">
         $i18n{itemSource}
       </div>

chrome/test/data/webui/extensions/manager_unit_test.js

@@ -132,7 +132,7 @@ suite(extension_manager_unit_tests.suiteName, function() {
     expectEquals(description, detailsView.data.description);
     expectEquals(
         description,
-        detailsView.$$('.cr-section .section-content').textContent.trim());
+        detailsView.$$('.section .section-content').textContent.trim());
   });
 
   test(
@@ -170,7 +170,7 @@ suite(extension_manager_unit_tests.suiteName, function() {
         expectEquals(newDescription, detailsView.data.description);
         expectEquals(
             newDescription,
-            detailsView.$$('.cr-section .section-content').textContent.trim());
+            detailsView.$$('.section .section-content').textContent.trim());
       });
 
   test(

ui/webui/resources/cr_elements/shared_style_css.html

@@ -89,7 +89,7 @@
         opacity: var(--cr-container-shadow-max-opacity);
       }
 
-      .cr-section {
+      .cr-row {
         align-items: center;
         border-top: var(--cr-separator-line);
         display: flex;
@@ -97,6 +97,11 @@
         padding: 0 var(--cr-section-padding);
       }
 
+      .cr-row.first,
+      .cr-row.continuation {
+        border-top: none;
+      }
+
       /* Typography */
 
       .cr-title-text {

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -155,7 +155,7 @@
     --cr-section-indent-padding: calc(
         var(--cr-section-padding) + var(--cr-section-indent-width));
 
-    /* TODO(crbug.com/973674): Do not use this mixin. Use the class cr-section
+    /* TODO(crbug.com/973674): Do not use this mixin. Use the class cr-row
      * from shared_style_css.html instead. */
     --cr-section: {
       align-items: center;