MD Settings: Display: Add unified desktop control and modify api

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="display_layout.html">
 <link rel="import" href="display_overscan_dialog.html">
@@ skipping 34 matching lines @@
      }
 
      .settings-box > paper-button:first-child {
        -webkit-padding-start: 0
      }
 
      paper-tab {
        text-transform: uppercase;
      }
 
+     #controlsDiv > .settings-box:first-of-type {
+       border-top: none;
+     } 
     </style>
     <div class="settings-box first layout vertical self-stretch">
       <div class="title-text layout self-start">
         $i18n{displayArrangementTitle}
       </div>
       <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>
     </div>
     <div hidden="[[!hasMultipleDisplays_(displays)]]" class="settings-box">
       <paper-tabs noink selected="[[selectedDisplay.id]]" class="display-tabs"
           on-iron-select="onSelectDisplayTab_" attr-for-selected="display-id">
         <template is="dom-repeat" items="[[displays]]">
           <paper-tab display-id="[[item.id]]">[[item.name]]</paper-tab>
         </template>
       </paper-tabs>
     </div>
     <div hidden="[[hasMultipleDisplays_(displays)]]"
         class="settings-box line-only"></div>
-    <div class="settings-box layout vertical first">
+
+    <div id="controlsDiv" class="settings-box layout vertical first">
       <h2>[[selectedDisplay.name]]</h2>
-      <div class="settings-box embedded first two-line"
-          hidden$="[[!showMirror_(displays)]]">
-        <div class="start">
-          <div id="displayMirrorCheckboxLabel">$i18n{displayMirror}</div>
-          <div class="secondary">[[getDisplayMirrorText_(displays)]]</div>
+
+      <template is="dom-if" if="[[showMirror_(unifiedDesktopMode_, displays)]]">
+        <div class="settings-box embedded two-line">
+          <div class="start">
+            <div id="displayMirrorCheckboxLabel">$i18n{displayMirror}</div>
+            <div class="secondary">[[getDisplayMirrorText_(displays)]]</div>
+          </div>
+          <paper-toggle-button checked="[[isMirrored_(displays)]]"
+              on-tap="onMirroredTap_"
+              aria-labelledby="displayMirrorCheckboxLabel">
+          </paper-toggle-button>
         </div>
-        <paper-toggle-button checked="[[isMirrored_(displays)]]"
-            on-tap="onMirroredTap_"
-            aria-labelledby="displayMirrorCheckboxLabel">
-      </div>
-      <div class="settings-box embedded"
-          hidden$="[[!showDisplaySelectMenu_(displays, selectedDisplay)]]">
-        <div class="start">$i18n{displayScreenTitle}</div>
-        <div class="md-select-wrapper">
-          <select class="md-select" on-change="updatePrimaryDisplay_"
-              value="[[getDisplaySelectMenuIndex_(
-                  selectedDisplay, primaryDisplayId)]]">
-            <option value="0">$i18n{displayScreenPrimary}</option>
-            <option value="1">$i18n{displayScreenExtended}</option>
-          </select>
-          <span class="md-select-underline"></span>
+      </template>
+
+      <template is="dom-if" if="[[showUnifiedDesktop_(unifiedDesktopAvailable_,
+           unifiedDesktopMode_, displays)]]">
+        <div class="settings-box embedded two-line">
+          <div class="start">
+            <div id="displayUnifiedDesktopCheckboxLabel">
+              $i18n{displayUnfiedDesktop}
+            </div>
+            <div class="secondary">
+              [[getUnifiedDesktopText_(unifiedDesktopMode_)]]
+            </div>
+          </div>
+          <paper-toggle-button checked="[[unifiedDesktopMode_]]"
+              on-tap="onUnifiedDesktopTap_"
+              aria-labelledby="displayUnifiedDesktopCheckboxLabel">
+          </paper-toggle-button>
         </div>
-      </div>
+      </template>
+
+      <template is="dom-if"
+          if="[[showDisplaySelectMenu_(displays, selectedDisplay)]]">
+        <div class="settings-box embedded">
+          <div class="start">$i18n{displayScreenTitle}</div>
+          <div class="md-select-wrapper">
+            <select class="md-select" on-change="updatePrimaryDisplay_"
+                value="[[getDisplaySelectMenuIndex_(
+                    selectedDisplay, primaryDisplayId)]]">
+              <option value="0">$i18n{displayScreenPrimary}</option>
+              <option value="1">$i18n{displayScreenExtended}</option>
+            </select>
+            <span class="md-select-underline"></span>
+          </div>
+        </div>
+      </template>
+
       <div class="settings-box embedded two-line">
         <div class="start textarea layout vertical">
           <div>$i18n{displayResolutionTitle}</div>
           <div class="secondary layout self-start">
             [[getResolutionText_(selectedDisplay, selectedModePref_.value)]]
           </div>
         </div>
         <settings-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
             tick-values="[[modeValues_]]" pref="{{selectedModePref_}}"
             on-change="onSelectedModeChange_">
         </settings-slider>
       </div>
-      <div class="settings-box embedded">
-        <div class="start textarea">$i18n{displayOrientation}</div>
-        <div class="md-select-wrapper">
-          <select class="md-select" value="[[selectedDisplay.rotation]]"
-              on-change="onOrientationChange_">
-            <option value="0">$i18n{displayOrientationStandard}</option>
-            <option value="90">90</option>
-            <option value="180">180</option>
-            <option value="270">270</option>
-          </select>
-          <span class="md-select-underline"></span>
+
+      <template is="dom-if" if="[[!unifiedDesktopMode_]]">      
+        <div class="settings-box embedded">
+          <div class="start textarea">$i18n{displayOrientation}</div>
+          <div class="md-select-wrapper">
+            <select class="md-select" value="[[selectedDisplay.rotation]]"
+                on-change="onOrientationChange_"">

[malaykeshav, 2017/04/05 23:02:57]

remove extra "

[stevenjb, 2017/04/06 01:56:08]

opps, thanks. done.

+              <option value="0">$i18n{displayOrientationStandard}</option>
+              <option value="90">90</option>
+              <option value="180">180</option>
+              <option value="270">270</option>
+            </select>
+            <span class="md-select-underline"></span>
+          </div>
         </div>
-      </div>
+      </template>
+
       <div class="settings-box embedded two-line"
           on-tap="onOverscanTap_" hidden$="[[selectedDisplay.isInternal]]"
           actionable>
         <div class="start">
           $i18n{displayOverscanPageTitle}
           <div class="secondary" id="displayOverscanSecondary">
             $i18n{displayOverscanPageText}
           </div>
         </div>
         <button class="subpage-arrow" is="paper-icon-button-light"
@@ skipping 16 matching lines @@
           </div>
         </div>
         <button class="subpage-arrow" is="paper-icon-button-light"
             aria-label="$i18n{displayTouchCalibrationTitle}"
             aria-describedby="touchCalibrationSecondary"></button>
       </div>
     </div>
   </template>
   <script src="display.js"></script>
 </dom-module>