Only show display arrangement section when there are >1 displays

This change hides the arrangement section of Display settings when
there is only one display connected to the device. Since no action can
be taken in this section when there is only one Display, we hide it to
avoid wasting space.

Bug: 997471
Change-Id: Idf367efbeac835b77e99b70671741a60dd42ae58
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1881335
Commit-Queue: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711571}

chrome/browser/resources/settings/device_page/display.html

@@ -56,6 +56,10 @@
         margin-inline-end: var(--cr-controlled-by-spacing);
       }
 
+      .underbar {
+        border-bottom: var(--cr-separator-line);
+      }
+
       #controlsDiv > .settings-box:first-of-type {
         border-top: none;
       }
@@ -71,39 +75,41 @@
     </style>
 
     <!-- Arrangement section -->
-    <div class="settings-box first layout vertical self-stretch">
-      <h2 class="layout self-start">
-        $i18n{displayArrangementTitle}
-      </h2>
-      <div class="secondary layout self-start"
-          hidden="[[!hasMultipleDisplays_(displays)]]">
-        $i18n{displayArrangementText}
-      </div>
-      <display-layout id="displayLayout"
-          selected-display="[[selectedDisplay]]"
-          on-select-display="onSelectDisplay_">
-      </display-layout>
-
-      <template is="dom-if" if="[[showMirror_(unifiedDesktopMode_, displays)]]"
-          restamp>
-        <div class="secondary self-start">
-          <cr-checkbox checked="[[isMirrored_(displays)]]"
-              on-click="onMirroredTap_"
-              aria-label="[[getDisplayMirrorText_(displays)]]">
-            <div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
-          </cr-checkbox>
+    <template is="dom-if"
+        if="[[shouldShowArrangementSection_(displays)]]" restamp>
+      <div class="settings-box first layout vertical self-stretch underbar"
+          id="arrangement-section">
+        <h2 class="layout self-start">
+          $i18n{displayArrangementTitle}
+        </h2>`
+        <div class="secondary layout self-start">
+          $i18n{displayArrangementText}
         </div>
-      </template>
-    </div>
+        <display-layout id="displayLayout"
+            selected-display="[[selectedDisplay]]"
+            on-select-display="onSelectDisplay_">
+        </display-layout>
+
+        <template is="dom-if"
+            if="[[showMirror_(unifiedDesktopMode_, displays)]]" restamp>
+          <div class="secondary self-start">
+            <cr-checkbox checked="[[isMirrored_(displays)]]"
+                on-click="onMirroredTap_"
+                aria-label="[[getDisplayMirrorText_(displays)]]">
+              <div class="text-area">[[getDisplayMirrorText_(displays)]]</div>
+            </cr-checkbox>
+          </div>
+        </template>
+      </div>
+    </template>
 
     <!-- Display tabs -->
-    <div hidden="[[!hasMultipleDisplays_(displays)]]" class="settings-box">
+    <div hidden="[[!hasMultipleDisplays_(displays)]]"
+        class="settings-box first">
       <cr-tabs selected="[[selectedTab_]]" class="display-tabs"
           on-selected-changed="onSelectDisplayTab_"
           tab-names="[[displayTabNames_]]"></cr-tabs>
     </div>
-    <div hidden="[[hasMultipleDisplays_(displays)]]"
-        class="settings-box line-only"></div>
 
     <div id="controlsDiv" class="settings-box layout vertical first">
       <h2>[[selectedDisplay.name]]</h2>
@@ -142,7 +148,7 @@
       </template>
 
       <!-- Display zoom selection slider -->
-      <div class="settings-box indented two-line">
+      <div class="settings-box indented two-line first">
         <div class="start text-area layout vertical">
           <div id="displayZoomTitle">$i18n{displayZoomTitle}</div>
           <div class="secondary self-start">$i18n{displayZoomSublabel}</div>

chrome/browser/resources/settings/device_page/display.js

@@ -194,7 +194,8 @@ Polymer({
     'updateNightLightScheduleSettings_(prefs.ash.night_light.schedule_type.*,' +
         ' prefs.ash.night_light.enabled.*)',
     'onSelectedModeChange_(selectedModePref_.value)',
-    'onSelectedZoomChange_(selectedZoomPref_.value)'
+    'onSelectedZoomChange_(selectedZoomPref_.value)',
+    'onDisplaysChanged_(displays.*)',
   ],
 
   /** @private {number} Selected mode index received from chrome. */
@@ -513,12 +514,11 @@ Polymer({
   },
 
   /**
-   * @param {!Array<!chrome.system.display.DisplayUnitInfo>} displays
    * @return {boolean}
    * @private
    */
-  hasMultipleDisplays_: function(displays) {
-    return displays.length > 1;
+  hasMultipleDisplays_: function() {
+    return this.displays.length > 1;
   },
 
   /**
@@ -952,9 +952,6 @@ Polymer({
     this.setSelectedDisplay_(selectedDisplay);
 
     this.unifiedDesktopMode_ = !!primaryDisplay && primaryDisplay.isUnified;
-
-    this.$.displayLayout.updateDisplays(
-        this.displays, this.layouts, this.mirroringDestinationIds);
   },
 
   /** @private */
@@ -985,4 +982,22 @@ Polymer({
       this.nightLightScheduleSubLabel_ = '';
     }
   },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowArrangementSection_: function() {
+    return this.hasMultipleDisplays_() || this.isMirrored_(this.displays);
+  },
+
+  /** @private */
+  onDisplaysChanged_: function() {
+    Polymer.dom.flush();
+    const displayLayout = this.$$('#displayLayout');
+    if (displayLayout) {
+      displayLayout.updateDisplays(
+          this.displays, this.layouts, this.mirroringDestinationIds);
+    }
+  },
 });

chrome/test/data/webui/settings/chromeos/device_page_tests.js

@@ -790,6 +790,9 @@ cr.define('device_page_tests', function() {
             expectFalse(displayPage.showUnifiedDesktop_(
                 false, false, displayPage.displays));
 
+            // Verify that the arrangement section is not shown.
+            expectEquals(null, displayPage.$$('#arrangement-section'));
+
             // Add a second display.
             addDisplay(2);
             fakeSystemDisplay.onDisplayChanged.callListeners();
@@ -819,6 +822,9 @@ cr.define('device_page_tests', function() {
             expectFalse(displayPage.showUnifiedDesktop_(
                 false, false, displayPage.displays));
 
+            // Verify that the arrangement section is shown.
+            expectTrue(!!displayPage.$$('#arrangement-section'));
+
             // Select the second display and make it primary. Also change the
             // orientation of the second display.
             const displayLayout = displayPage.$$('#displayLayout');
@@ -874,6 +880,9 @@ cr.define('device_page_tests', function() {
             expectTrue(displayPage.showMirror_(false, displayPage.displays));
             expectTrue(displayPage.isMirrored_(displayPage.displays));
 
+            // Verify that the arrangement section is shown while mirroring.
+            expectTrue(!!displayPage.$$('#arrangement-section'));
+
             // Ensure that the zoom value remains unchanged while draggging.
             function pointerEvent(eventType, ratio) {
               const crSlider = displayPage.$.displaySizeSlider.$.slider;