MD Settings: Internet: Update network property list layout

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

Index: chrome/browser/resources/settings/internet_page/network_property_list.html
diff --git a/chrome/browser/resources/settings/internet_page/network_property_list.html b/chrome/browser/resources/settings/internet_page/network_property_list.html
index 1a8ba7011200212df7131aa42c3e4d87fe526bf4..38ed7389d29fbf3c963d9170ff380edb89348717 100644
--- a/chrome/browser/resources/settings/internet_page/network_property_list.html
+++ b/chrome/browser/resources/settings/internet_page/network_property_list.html
@@ -6,63 +6,41 @@
 
 <dom-module name="network-property-list">
   <template>
-    <style>
-      span {
-        -webkit-margin-end: 5px;
-        margin-bottom: 5px;
-      }
-
-      cr-policy-network-indicator {
-        margin-bottom: 5px;
-      }
-
-      span.fill {
-        border-bottom-color: grey;
-        border-bottom-style: dotted;
-        border-width: thin;
-        min-width: 20px;
-      }
-
+    <style include="settings-shared">
       paper-input-container {
-        -webkit-margin-start: 5px;
-        margin-bottom: -3px;
-        margin-top: -12px;
-      }
-
-      #outerDiv {
-        padding: 5px 0;
+        --paper-input-container-input: {
+          color: var(--paper-grey-600);
+          font-size: 100%;
+          font-weight: 400;
+        };
+        margin-bottom: -12px;
+        margin-top: -8px;
       }
     </style>
-    <div id="outerDiv" class="layout horizontal">
-      <div class="layout vertical">
-        <template is="dom-repeat" items="[[fields]]">
-          <div class="layout horizontal"
-              hidden$="[[!showProperty_(propertyDict, editFieldTypes, item)]]">
-            <span>[[getPropertyLabel_(item)]]</span>
-            <span class="flex fill"></span>
-          </div>
-        </template>
-      </div>
-      <div class="layout vertical">
-        <template is="dom-repeat" items="[[fields]]">
-          <div class="layout horizontal"
-              hidden$="[[!showNoEdit_(propertyDict, editFieldTypes, item)]]">
-            <span>[[getPropertyValue_(propertyDict, item)]]</span>
-            <cr-policy-network-indicator property="[[propertyDict]]">
-            </cr-policy-network-indicator>
-          </div>
-          <div class="layout horizontal" hidden$=
-               "[[!showEdit_(propertyDict, editFieldTypes, item, 'String')]]">
-            <paper-input-container no-label-float>
-              <input id="[[item]]" is="iron-input"
-                  value="[[getPropertyValue_(propertyDict, item)]]"
-                  on-blur="onValueChange_">
-            </paper-input-container>
-          </div>
-          <!-- TODO(stevenjb): Support non-string types. -->
-        </template>
+    <template is="dom-repeat" items="[[fields]]"
+        filter="[[computeFilter_(propertyDict, editFieldTypes)]]">
+      <div class="settings-box two-line single-column">
+        <!-- Propety label -->
+        <div>[[getPropertyLabel_(item)]]</div>
+        <!-- Uneditable property value -->
+        <div class="layout horizontal"
+            hidden$="[[isEditable_(propertyDict, editFieldTypes, item, '')]]">
+          <div class="secondary">[[getPropertyValue_(propertyDict, item)]]</div>
+          <cr-policy-network-indicator property="[[propertyDict]]">
+          </cr-policy-network-indicator>
+        </div>
+        <!-- Editable string property value -->
+        <div class="layout horizontal" hidden$="[[!isEditable_(
+            propertyDict, editFieldTypes, item, 'String')]]">
+          <paper-input-container no-label-float>
+            <input class="embedded-input" id="[[item]]" is="iron-input"
+                value="[[getPropertyValue_(propertyDict, item)]]"
+                on-blur="onValueChange_">
+          </paper-input-container>
+        </div>
+        <!-- TODO(stevenjb): Support non-string types -->
       </div>
-    </div>
+    </template>
   </template>
   <script src="network_property_list.js"></script>
 </dom-module>