Internet > Details: Restore MAC address

The MAC address is now only associated with deviceState_. This restores
it and moves it to the Network section since that makes a bit more
logical sense (below IP and nameserver config).

This also fixes hiding of the connection state and Advanced sections
while the properties are loading, eliminating a minor initial flash
on load.

Bug: 1006391, 1006405
Change-Id: Ib8e622690fcfeea0fb0348dc050065c361bf650c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1817334Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Auto-Submit: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699138}

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

@@ -150,7 +150,7 @@
         </network-ip-config>
       </div>
 
-      <!-- IP Config, Nameservers -->
+      <!-- Nameservers -->
       <div class="section single-column">
         <network-nameservers editable
             on-nameservers-change="onIPConfigChange_"
@@ -159,15 +159,22 @@
       </div>
     </template>
 
-    <!-- Other properties to show if present. -->
-    <template is="dom-if" if="[[hasInfoFields_(managedProperties_)]]">
-      <div class="section single-column indented">
+    <div class="section single-column indented">
+      <!-- MAC Address. -->
+      <div class="single-column" hidden$="[[!deviceState_.macAddress]]">
+        <div>$i18n{OncMacAddress}</div>
+        <div class="secondary">[[deviceState_.macAddress]]</div>
+      </div>
+
+      <!-- Other properties to show if present. -->
+      <template is="dom-if" if="[[hasInfoFields_(managedProperties_)]]">
         <network-property-list-mojo
             fields="[[getInfoFields_(managedProperties_)]]"
             property-dict="[[managedProperties_]]">
         </network-property-list-mojo>
-      </div>
-    </template>
+      </template>
+    </div>
+
   </template>
   <script src="internet_detail_dialog.js"></script>
 </dom-module>

chrome/browser/resources/chromeos/internet_detail_dialog/internet_detail_dialog.js

@@ -530,7 +530,6 @@ Polymer({
     } else if (type == chromeos.networkConfig.mojom.NetworkType.kWiFi) {
       fields.push('restrictedConnectivity');
     }
-    fields.push('macAddress');
     return fields;
   },
 });

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

@@ -83,7 +83,8 @@
             connected$="[[isConnectedState_(managedProperties_)]]"
             error$="[[isConnectionErrorState_(
                 managedProperties_, outOfRange_)]]">
-          [[getStateText_(managedProperties_, outOfRange_)]]
+          [[getStateText_(managedProperties_, propertiesReceived_,
+              outOfRange_)]]
         </div>
         <template is="dom-if"
             if="[[isPolicySource(managedProperties_.source))]]">
@@ -243,7 +244,8 @@
         </div>
       </template>
 
-      <template is="dom-if" if="[[showAdvanced_(managedProperties_)]]">
+      <template is="dom-if"
+          if="[[showAdvanced_(managedProperties_, propertiesReceived_)]]">
         <!-- Advanced toggle. -->
         <cr-expand-button
             alt="$i18n{networkSectionAdvancedA11yLabel}"
@@ -318,6 +320,13 @@
               </network-nameservers>
             </template>
           </div>
+
+          <!-- MAC Address. -->
+          <div class="settings-box two-line single-column stretch indented"
+              hidden$="[[!deviceState_.macAddress]]">
+            <div>$i18n{OncMacAddress}</div>
+            <div class="secondary">[[deviceState_.macAddress]]</div>
+          </div>
         </iron-collapse>
       </template>
 

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

@@ -575,12 +575,13 @@ Polymer({
 
   /**
    * @param {!mojom.ManagedProperties} managedProperties
+   * @param {boolean} propertiesReceived
    * @param {boolean} outOfRange
    * @return {string} The text to display for the network connection state.
    * @private
    */
-  getStateText_: function(managedProperties, outOfRange) {
-    if (!managedProperties) {
+  getStateText_: function(managedProperties, propertiesReceived, outOfRange) {
+    if (!managedProperties || !propertiesReceived) {
       return '';
     }
 
@@ -1414,10 +1415,6 @@ Polymer({
 
     /** @type {!Array<string>} */ const fields = [];
     const type = this.managedProperties_.type;
-    // All networks except Tether show MAC address.
-    if (type != mojom.NetworkType.kTether) {
-      fields.push('macAddress');
-    }
     switch (type) {
       case mojom.NetworkType.kCellular:
         fields.push(
@@ -1456,12 +1453,15 @@ Polymer({
 
   /**
    * @param {!mojom.ManagedProperties} managedProperties
+   * @param {boolean} propertiesReceived
    * @return {boolean}
    * @private
    */
-  showAdvanced_: function(managedProperties) {
-    if (!managedProperties ||
-        managedProperties.type == mojom.NetworkType.kTether) {
+  showAdvanced_: function(managedProperties, propertiesReceived) {
+    if (!managedProperties || !propertiesReceived) {
+      return false;
+    }
+    if (managedProperties.type == mojom.NetworkType.kTether) {
       // These settings apply to the underlying WiFi network, not the Tether
       // network.
       return false;