[Webapp Refactor] remoting.ConnectedView

remoting/webapp/crd/js/desktop_connected_view.js

 // Copyright 2015 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.
 
 /**
  * @fileoverview
  * Class handling user-facing aspects of the client session.
  */
 
 'use strict';
 
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
 /**
- * True to enable mouse lock.
- * This is currently disabled because the current client plugin does not
- * properly handle mouse lock and delegated large cursors at the same time.
- * This should be re-enabled (by removing this flag) once a version of
- * the plugin that supports both has reached Chrome Stable channel.
- * (crbug.com/429322).
- *
- * @type {boolean}
- */
-remoting.enableMouseLock = false;
-
-/**
  * @param {remoting.ClientPlugin} plugin
- * @param {remoting.ClientSession} session
  * @param {HTMLElement} container
  * @param {remoting.Host} host
  * @param {remoting.DesktopConnectedView.Mode} mode The mode of this connection.
  * @param {string} defaultRemapKeys The default set of remap keys, to use
  *     when the client doesn't define any.
  * @constructor
  * @extends {base.EventSourceImpl}
+ * @implements {base.Disposable}
  */
-remoting.DesktopConnectedView = function(plugin, session, container, host, mode,
+remoting.DesktopConnectedView = function(plugin, container, host, mode,
                                          defaultRemapKeys) {
-  this.session_ = session;
 
   /** @private {HTMLElement} */
   this.container_ = container;
 
   /** @private {remoting.ClientPlugin} */
   this.plugin_ = plugin;
 
   /** @private */
   this.host_ = host;
 
   /** @private */
   this.mode_ = mode;
 
   /** @private {string} */
   this.defaultRemapKeys_ = defaultRemapKeys;
 
-  /** @private */
-  this.callPluginLostFocus_ = this.pluginLostFocus_.bind(this);
-  /** @private */
-  this.callPluginGotFocus_ = this.pluginGotFocus_.bind(this);
   /** @private {Element} */
   this.debugRegionContainer_ =
       this.container_.querySelector('.debug-region-container');
 
-  /** @private {Element} */
-  this.mouseCursorOverlay_ =
-      this.container_.querySelector('.mouse-cursor-overlay');
-
   /** @private {remoting.DesktopViewport} */
   this.viewport_ = null;
 
-  /** @type {Element} */
-  var img = this.mouseCursorOverlay_;
-  /**
-   * @param {Event} event
-   * @private
-   */
-  this.updateMouseCursorPosition_ = function(event) {
-    img.style.top = event.offsetY + 'px';
-    img.style.left = event.offsetX + 'px';
-  };
+  /** private {remoting.ConnectedView} */
+  this.view_ = null;
 
   /** @private {remoting.VideoFrameRecorder} */
   this.videoFrameRecorder_ = null;
 
   /** private {base.Disposable} */
   this.eventHooks_ = null;
 
   this.setupPlugin_();
 };
 
+/** @return {void} Nothing. */
+remoting.DesktopConnectedView.prototype.dispose = function() {
+  if (remoting.windowFrame) {
+    remoting.windowFrame.setDesktopConnectedView(null);
+  }
+  if (remoting.toolbar) {
+    remoting.toolbar.setDesktopConnectedView(null);
+  }
+  if (remoting.optionsMenu) {
+    remoting.optionsMenu.setDesktopConnectedView(null);
+  }
+
+  document.body.classList.remove('connected');
+
+  base.dispose(this.eventHooks_);
+  this.eventHooks_ = null;
+
+  base.dispose(this.viewport_);
+  this.viewport_ = null;
+};
+
 // The mode of this session.
 /** @enum {number} */
 remoting.DesktopConnectedView.Mode = {
   IT2ME: 0,
   ME2ME: 1,
   APP_REMOTING: 2
 };
 
 // Keys for per-host settings.
 remoting.DesktopConnectedView.KEY_REMAP_KEYS = 'remapKeys';
@@ skipping 61 matching lines @@
   } else if (this.mode_ != remoting.DesktopConnectedView.Mode.ME2ME &&
       this.mode_ != remoting.DesktopConnectedView.Mode.APP_REMOTING) {
     var sendCadElement = document.getElementById('send-ctrl-alt-del');
     sendCadElement.hidden = true;
   }
 
   // Apply customized key remappings if the plugin supports remapKeys.
   if (this.plugin_.hasFeature(remoting.ClientPlugin.Feature.REMAP_KEY)) {
     this.applyRemapKeys_(true);
   }
-
-  // TODO(wez): Only allow mouse lock if the app has the pointerLock permission.
-  // Enable automatic mouse-lock.
-  if (remoting.enableMouseLock &&
-      this.plugin_.hasFeature(remoting.ClientPlugin.Feature.ALLOW_MOUSE_LOCK)) {
-    this.plugin_.allowMouseLock();
-  }
-
-  this.plugin_.setMouseCursorHandler(this.updateMouseCursorImage_.bind(this));
 };
 
 /**
  * This is a callback that gets called when the window is resized.
  *
  * @return {void} Nothing.
  * @private.
  */
 remoting.DesktopConnectedView.prototype.onResize_ = function() {
   if (this.viewport_) {
     this.viewport_.onResize();
   }
 };
 
 /**
- * Called when the app window is hidden.
- * @return {void} Nothing.
- */
-remoting.DesktopConnectedView.prototype.onVisibilityChanged_ = function() {
-  this.pauseVideo(document.hidden);
-};
-
-/**
  * Callback that the plugin invokes to indicate when the connection is
  * ready.
  *
  * @param {boolean} ready True if the connection is ready.
  */
 remoting.DesktopConnectedView.prototype.onConnectionReady = function(ready) {
-  if (!ready) {
-    this.container_.classList.add('session-client-inactive');
-  } else {
-    this.container_.classList.remove('session-client-inactive');
+  if (this.view_) {
+    this.view_.onConnectionReady(ready);
   }
 };
 
-/**
- * Deletes the <embed> element from the container, without sending a
- * session_terminate request.  This is to be called when the session was
- * disconnected by the Host.
- *
- * @return {void} Nothing.
- */
-remoting.DesktopConnectedView.prototype.removePlugin = function() {
-  if (this.plugin_) {
-    this.plugin_.element().removeEventListener(
-        'focus', this.callPluginGotFocus_, false);
-    this.plugin_.element().removeEventListener(
-        'blur', this.callPluginLostFocus_, false);
-    this.plugin_ = null;
+remoting.DesktopConnectedView.prototype.onConnected = function() {
+  document.body.classList.add('connected');
+
+  this.view_ = new remoting.ConnectedView(
+      this.plugin_, this.container_,
+      this.container_.querySelector('.mouse-cursor-overlay'));
+
+  var scrollerElement = document.getElementById('scroller');
+  this.viewport_ = new remoting.DesktopViewport(
+      scrollerElement || document.body,
+      this.plugin_.hostDesktop(),
+      this.host_.options);
+
+  if (remoting.windowFrame) {
+    remoting.windowFrame.setDesktopConnectedView(this);
+  }
+  if (remoting.toolbar) {
+    remoting.toolbar.setDesktopConnectedView(this);
+  }
+  if (remoting.optionsMenu) {
+    remoting.optionsMenu.setDesktopConnectedView(this);
   }
 
-  this.updateClientSessionUi_(null);
+  // Activate full-screen related UX.
+  this.eventHooks_ = new base.Disposables(
+    this.view_,
+    new base.DomEventHook(window, 'resize', this.onResize_.bind(this), false),
+    new remoting.Fullscreen.EventHook(this.onFullScreenChanged_.bind(this))
+  );
+  this.onFullScreenChanged_(remoting.fullscreen.isActive());
 };
 
 /**
- * @param {remoting.ClientSession} clientSession The active session, or null if
- *     there is no connection.
- */
-remoting.DesktopConnectedView.prototype.updateClientSessionUi_ = function(
-    clientSession) {
-  if (clientSession === null) {
-    if (remoting.windowFrame) {
-      remoting.windowFrame.setDesktopConnectedView(null);
-    }
-    if (remoting.toolbar) {
-      remoting.toolbar.setDesktopConnectedView(null);
-    }
-    if (remoting.optionsMenu) {
-      remoting.optionsMenu.setDesktopConnectedView(null);
-    }
-
-    document.body.classList.remove('connected');
-    this.container_.removeEventListener(
-        'mousemove', this.updateMouseCursorPosition_, true);
-    base.dispose(this.eventHooks_);
-    this.eventHooks_ = null;
-    base.dispose(this.viewport_);
-    this.viewport_ = null;
-  } else {
-    var scrollerElement = document.getElementById('scroller');
-    this.viewport_ = new remoting.DesktopViewport(
-        scrollerElement || document.body,
-        this.plugin_.hostDesktop(),
-        this.host_.options);
-    if (remoting.windowFrame) {
-      remoting.windowFrame.setDesktopConnectedView(this);
-    }
-    if (remoting.toolbar) {
-      remoting.toolbar.setDesktopConnectedView(this);
-    }
-    if (remoting.optionsMenu) {
-      remoting.optionsMenu.setDesktopConnectedView(this);
-    }
-
-    document.body.classList.add('connected');
-    this.container_.addEventListener(
-        'mousemove', this.updateMouseCursorPosition_, true);
-    // Activate full-screen related UX.
-    this.setFocusHandlers_();
-    this.eventHooks_ = new base.Disposables(
-      new base.DomEventHook(window, 'resize', this.onResize_.bind(this), false),
-      new base.DomEventHook(document, 'visibilitychange',
-                            this.onVisibilityChanged_.bind(this), false),
-      new remoting.Fullscreen.EventHook(this.onFullScreenChanged_.bind(this))
-    );
-    this.onFullScreenChanged_(remoting.fullscreen.isActive());
-  }
-};
-
-/**
- * Constrains the focus to the plugin element.
- * @private
- */
-remoting.DesktopConnectedView.prototype.setFocusHandlers_ = function() {
-  this.plugin_.element().addEventListener(
-      'focus', this.callPluginGotFocus_, false);
-  this.plugin_.element().addEventListener(
-      'blur', this.callPluginLostFocus_, false);
-  this.plugin_.element().focus();
-};
-
-/**
  * Set the shrink-to-fit and resize-to-client flags and save them if this is
  * a Me2Me connection.
  *
  * @param {boolean} shrinkToFit True if the remote desktop should be scaled
  *     down if it is larger than the client window; false if scroll-bars
  *     should be added in this case.
  * @param {boolean} resizeToClient True if window resizes should cause the
  *     host to attempt to resize its desktop to match the client window size;
  *     false to disable this behaviour for subsequent window resizes--the
  *     current host desktop size is not restored in this case.
@@ skipping 19 matching lines @@
     // Fullscreen.isActive call is not guaranteed to return true until the
     // full-screen event is triggered. In apps v2, the size of the window's
     // client area is calculated differently in full-screen mode, so register
     // for both events.
     this.viewport_.onResize();
     this.viewport_.enableBumpScroll(Boolean(fullscreen));
   }
 };
 
 /**
- * Callback function called when the plugin element gets focus.
- */
-remoting.DesktopConnectedView.prototype.pluginGotFocus_ = function() {
-  remoting.clipboard.initiateToHost();
-};
-
-/**
- * Callback function called when the plugin element loses focus.
- */
-remoting.DesktopConnectedView.prototype.pluginLostFocus_ = function() {
-  if (this.plugin_) {
-    // Release all keys to prevent them becoming 'stuck down' on the host.
-    this.plugin_.releaseAllKeys();
-    if (this.plugin_.element()) {
-      // Focus should stay on the element, not (for example) the toolbar.
-      // Due to crbug.com/246335, we can't restore the focus immediately,
-      // otherwise the plugin gets confused about whether or not it has focus.
-      window.setTimeout(
-          this.plugin_.element().focus.bind(this.plugin_.element()), 0);
-    }
-  }
-};
-
-/**
- * @param {string} url
- * @param {number} hotspotX
- * @param {number} hotspotY
- */
-remoting.DesktopConnectedView.prototype.updateMouseCursorImage_ =
-    function(url, hotspotX, hotspotY) {
-  this.mouseCursorOverlay_.hidden = !url;
-  if (url) {
-    this.mouseCursorOverlay_.style.marginLeft = '-' + hotspotX + 'px';
-    this.mouseCursorOverlay_.style.marginTop = '-' + hotspotY + 'px';
-    this.mouseCursorOverlay_.src = url;
-  }
-};
-
-/**
  * Sets and stores the key remapping setting for the current host.
  *
  * @param {string} remappings Comma separated list of key remappings.
  */
 remoting.DesktopConnectedView.prototype.setRemapKeys = function(remappings) {
   // Cancel any existing remappings and apply the new ones.
   this.applyRemapKeys_(false);
   this.host_.options.remapKeys = remappings;
   this.applyRemapKeys_(true);
 
@@ skipping 69 matching lines @@
 /**
  * Sends a Print Screen keypress to the remoting client.
  *
  * @return {void} Nothing.
  */
 remoting.DesktopConnectedView.prototype.sendPrintScreen = function() {
   console.log('Sending Print Screen.');
   this.sendKeyCombination_([0x070046]);
 };
 
-/**
- * Requests that the host pause or resume video updates.
- *
- * @param {boolean} pause True to pause video, false to resume.
- * @return {void} Nothing.
- */
-remoting.DesktopConnectedView.prototype.pauseVideo = function(pause) {
-  if (this.plugin_) {
-    this.plugin_.pauseVideo(pause);
-  }
-};
-
-/**
- * Requests that the host pause or resume audio.
- *
- * @param {boolean} pause True to pause audio, false to resume.
- * @return {void} Nothing.
- */
-remoting.DesktopConnectedView.prototype.pauseAudio = function(pause) {
-  if (this.plugin_) {
-    this.plugin_.pauseAudio(pause)
-  }
-};
-
 remoting.DesktopConnectedView.prototype.initVideoFrameRecorder = function() {
   this.videoFrameRecorder_ = new remoting.VideoFrameRecorder(this.plugin_);
 };
 
 /**
  * Returns true if the ClientSession can record video frames to a file.
  * @return {boolean}
  */
 remoting.DesktopConnectedView.prototype.canRecordVideo = function() {
   return !!this.videoFrameRecorder_;
@@ skipping 50 matching lines @@
       var rect = document.createElement('div');
       rect.classList.add('debug-region-rect');
       rect.style.left = rects[i][0] + 'px';
       rect.style.top = rects[i][1] +'px';
       rect.style.width = rects[i][2] +'px';
       rect.style.height = rects[i][3] + 'px';
       this.debugRegionContainer_.appendChild(rect);
     }
   }
 };