[Webapp Refactor] Reparent the ConnectedView into the delegate.

remoting/webapp/crd/js/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
  * Implements a basic UX control for a connected remoting session.
  */
 
 /** @suppress {duplicate} */
@@ skipping 27 matching lines @@
   /** @private */
   this.viewportElement_ = viewportElement;
 
   /** @private */
   this.plugin_ = plugin;
 
   /** private */
   this.cursor_ = new remoting.ConnectedView.Cursor(
       plugin, viewportElement, cursorElement);
 
+  /** @private {Element} */
+  this.debugRegionContainer_ =
+      viewportElement.querySelector('.debug-region-container');
+
   var pluginElement = plugin.element();
 
   /** private */
   this.disposables_ = new base.Disposables(
     this.cursor_,
     new base.DomEventHook(pluginElement, 'focus',
                           this.onPluginGotFocus_.bind(this), false),
     new base.DomEventHook(pluginElement, 'blur',
                           this.onPluginLostFocus_.bind(this), false),
     new base.DomEventHook(document, 'visibilitychange',
@@ skipping 58 matching lines @@
   this.plugin_.releaseAllKeys();
 
   // 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);
 };
 
 /**
+ * Handles dirty region debug messages.
+ *
+ * @param {{rects:Array<Array<number>>}} region Dirty region of the latest
+ *     frame.
+ */
+remoting.ConnectedView.prototype.handleDebugRegion = function(region) {
+  while (this.debugRegionContainer_.firstChild) {
+    this.debugRegionContainer_.removeChild(
+        this.debugRegionContainer_.firstChild);
+  }
+  if (region.rects) {
+    var rects = region.rects;
+    for (var i = 0; i < rects.length; ++i) {
+      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);
+    }
+  }
+};
+
+/**
+ * Enables or disables rendering of dirty regions for debugging.
+ * @param {boolean} enable True to enable rendering.
+ */
+remoting.ConnectedView.prototype.enableDebugRegion = function(enable) {
+  if (enable) {
+    this.plugin_.setDebugDirtyRegionHandler(this.handleDebugRegion.bind(this));
+  } else {
+    this.plugin_.setDebugDirtyRegionHandler(null);
+  }
+};
+
+/**
  * @param {remoting.ClientPlugin} plugin
  * @param {HTMLElement} viewportElement
  * @param {HTMLElement} cursorElement
  *
  * @constructor
  * @implements {base.Disposable}
  */
 remoting.ConnectedView.Cursor = function(
     plugin, viewportElement, cursorElement) {
   /** @private */
@@ skipping 34 matching lines @@
 /**
  * @param {Event} event
  * @private
  */
 remoting.ConnectedView.Cursor.prototype.onMouseMoved_ = function(event) {
   this.cursorElement_.style.top = event.offsetY + 'px';
   this.cursorElement_.style.left = event.offsetX + 'px';
 };
 
 })();