Allow switching between extended and unified

chrome/browser/resources/options/chromeos/display_options.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.exportPath('options');
 
 /**
  * @typedef {{
  *   availableColorProfiles: Array<{profileId: number, name: string}>,
  *   colorProfile: number,
@@ skipping 18 matching lines @@
  * values in ash/display/display_controller.cc.
  * @enum {number}
  */
 options.SecondaryDisplayLayout = {
   TOP: 0,
   RIGHT: 1,
   BOTTOM: 2,
   LEFT: 3
 };
 
+/**
+ * Enumeration of multi display mode.  The value has to be same as the
+ * values in ash/display/display_manager..
+ * @enum {number}
+ */
+options.MultiDisplayMode = {
+  EXTENDED: 0,
+  MIRRORING: 1,
+  UNIFIED: 2,
+};
+
 cr.define('options', function() {
   var Page = cr.ui.pageManager.Page;
   var PageManager = cr.ui.pageManager.PageManager;
 
   // The scale ratio of the display rectangle to its original size.
   /** @const */ var VISUAL_SCALE = 1 / 10;
 
   // The number of pixels to share the edges between displays.
   /** @const */ var MIN_OFFSET_OVERLAP = 5;
 
@@ skipping 60 matching lines @@
 
   DisplayOptions.prototype = {
     __proto__: Page.prototype,
 
     /**
      * Whether the current output status is mirroring displays or not.
      * @private
      */
     mirroring_: false,
 
+    /*
+     * Whether the unified desktop is enable or not.
+     * @private
+     */
+    unifiedDesktopEnabled_: false,
+
+    /*
+     * Whether the unified desktop option should be present.
+     * @private
+     */
+    showUnifiedDesktopOption_: false,
+
     /**
      * The current secondary display layout.
      * @private
      */
     layout_: options.SecondaryDisplayLayout.RIGHT,
 
     /**
      * The array of current output displays.  It also contains the display
      * rectangles currently rendered on screen.
      * @type {Array<options.DisplayInfo>}
@@ skipping 84 matching lines @@
         var displayOverscan = options.DisplayOverscan.getInstance();
         displayOverscan.setDisplayId(this.displays_[this.focusedIndex_].id);
         PageManager.showPageByName('displayOverscan');
         chrome.send('coreOptionsUserMetricsAction',
                     ['Options_DisplaySetOverscan']);
       }).bind(this);
 
       $('display-options-done').onclick = function() {
         PageManager.closeOverlay();
       };
+
+      $('display-options-toggle-unified-desktop').onclick = (function() {
+        this.unifiedDesktopEnabled_ = !this.unifiedDesktopEnabled_;
+        chrome.send('setUnifiedDesktopEnabled',
+                    [this.unifiedDesktopEnabled_]);
+      }).bind(this);
     },
 
     /** @override */
     didShowPage: function() {
       var optionTitles = document.getElementsByClassName(
           'selected-display-option-title');
       var maxSize = 0;
       for (var i = 0; i < optionTitles.length; i++)
         maxSize = Math.max(maxSize, optionTitles[i].clientWidth);
       for (var i = 0; i < optionTitles.length; i++)
         optionTitles[i].style.width = maxSize + 'px';
       chrome.send('getDisplayInfo');
     },
 
     /** @override */
     canShowPage: function() {
       return this.enabled_;
     },
 
     /**
      * Enables or disables the page. When disabled, the page will not be able to
      * open, and will close if currently opened.
      * @param {boolean} enabled Whether the page should be enabled.
+     * @param {boolean} showUnifiedDesktop Whether the unified desktop option
+     *     should be present.
      */
-    setEnabled: function(enabled) {
-      if (this.enabled_ == enabled)
+    setEnabled: function(enabled, showUnifiedDesktop) {
+      if (this.enabled_ == enabled &&
+          this.showUnifiedDesktopOption_ == showUnifiedDesktop) {
         return;
+      }
       this.enabled_ = enabled;
+      this.showUnifiedDesktopOption_ = showUnifiedDesktop;
       if (!enabled && this.visible)
         PageManager.closeOverlay();
     },
 
     /**
      * Mouse move handler for dragging display rectangle.
      * @param {Event} e The mouse move event.
      * @private
      */
     onMouseMove_: function(e) {
@@ skipping 663 matching lines @@
               offset.y + 'px';
           break;
         }
         this.secondaryDisplay_.originalPosition = {
           x: secondaryDiv.offsetLeft, y: secondaryDiv.offsetTop};
       }
     },
 
     /**
      * Called when the display arrangement has changed.
-     * @param {boolean} mirroring Whether current mode is mirroring or not.
+     * @param {options.MultiDisplayMode} multi display mode.
      * @param {Array<options.DisplayInfo>} displays The list of the display
      *     information.
      * @param {options.SecondaryDisplayLayout} layout The layout strategy.
      * @param {number} offset The offset of the secondary display.
      * @private
      */
-    onDisplayChanged_: function(mirroring, displays, layout, offset) {
+    onDisplayChanged_: function(mode, displays, layout, offset) {
       if (!this.visible)
         return;
 
       var hasExternal = false;
       for (var i = 0; i < displays.length; i++) {
         if (!displays[i].isInternal) {
           hasExternal = true;
           break;
         }
       }
 
       this.layout_ = layout;
 
+      var mirroring = mode == options.MultiDisplayMode.MIRRORING;
+      var unifiedDesktopEnabled = mode == options.MultiDisplayMode.UNIFIED;
+
       $('display-options-toggle-mirroring').textContent =
           loadTimeData.getString(
               mirroring ? 'stopMirroring' : 'startMirroring');
 
       // Focus to the first display next to the primary one when |displays| list
       // is updated.
-      if (mirroring) {
+      if (mirroring || unifiedDesktopEnabled) {
         this.focusedIndex_ = null;
       } else if (this.mirroring_ != mirroring ||
+                 this.unifiedDesktopEnabled_ != unifiedDesktopEnabled ||
                  this.displays_.length != displays.length) {
         this.focusedIndex_ = 0;
       }
 
       this.mirroring_ = mirroring;
+      this.unifiedDesktopEnabled_ = unifiedDesktopEnabled;
       this.displays_ = displays;
 
       this.resetDisplaysView_();
       if (this.mirroring_)
         this.layoutMirroringDisplays_();
       else
         this.layoutDisplays_();
 
+      $('display-options-unified-desktop').hidden =
+          !this.showUnifiedDesktopOption_;
+
+      $('display-options-toggle-unified-desktop').checked =
+          this.unifiedDesktopEnabled_;
+
+      var disableUnifiedDesktopOption =
+           (this.mirroring_ ||
+            (!this.unifiedDesktopEnabled_ &&
+              this.displays_.length == 1));
+
+      $('display-options-toggle-unified-desktop').disabled =
+          disableUnifiedDesktopOption;
+
       this.updateSelectedDisplayDescription_();
     }
   };
 
   DisplayOptions.setDisplayInfo = function(
-      mirroring, displays, layout, offset) {
+      mode, displays, layout, offset) {
     DisplayOptions.getInstance().onDisplayChanged_(
-        mirroring, displays, layout, offset);
+        mode, displays, layout, offset);
   };
 
   // Export
   return {
     DisplayOptions: DisplayOptions
   };
 });