Add a setDebugDirtyRegion() feature to the client.

Calling remoting.clientSession.setDebugDirtyRegion(true) enables
rendering of each frame's dirty region with an purple, translucent
overlay.

Currently the dirty region is re-rendered immediately for each frame,
with no linger nor fade-out behaviour.

BUG=427659

Review URL: https://codereview.chromium.org/932013002

Cr-Commit-Position: refs/heads/master@{#317496}

remoting/client/plugin/chromoting_instance.cc

@@ -350,6 +350,8 @@ void ChromotingInstance::HandleMessage(const pp::Var& message) {
     HandleSendMouseInputWhenUnfocused();
   } else if (method == "delegateLargeCursors") {
     HandleDelegateLargeCursors();
+  } else if (method == "enableDebugRegion") {
+    HandleEnableDebugRegion(*data);
   }
 }
 
@@ -436,6 +438,25 @@ void ChromotingInstance::OnVideoShape(const webrtc::DesktopRegion& shape) {
   PostLegacyJsonMessage("onDesktopShape", data.Pass());
 }
 
+void ChromotingInstance::OnVideoFrameDirtyRegion(
+    const webrtc::DesktopRegion& dirty_region) {
+  scoped_ptr<base::ListValue> rects_value(new base::ListValue());
+  for (webrtc::DesktopRegion::Iterator i(dirty_region); !i.IsAtEnd();
+       i.Advance()) {
+    const webrtc::DesktopRect& rect = i.rect();
+    scoped_ptr<base::ListValue> rect_value(new base::ListValue());
+    rect_value->AppendInteger(rect.left());
+    rect_value->AppendInteger(rect.top());
+    rect_value->AppendInteger(rect.width());
+    rect_value->AppendInteger(rect.height());
+    rects_value->Append(rect_value.release());
+  }
+
+  scoped_ptr<base::DictionaryValue> data(new base::DictionaryValue());
+  data->Set("rects", rects_value.release());
+  PostLegacyJsonMessage("onDebugRegion", data.Pass());
+}
+
 void ChromotingInstance::OnConnectionState(
     protocol::ConnectionToHost::State state,
     protocol::ErrorCode error) {
@@ -947,6 +968,17 @@ void ChromotingInstance::HandleDelegateLargeCursors() {
   cursor_setter_.set_delegate_stub(this);
 }
 
+void ChromotingInstance::HandleEnableDebugRegion(
+    const base::DictionaryValue& data) {
+  bool enable = false;
+  if (!data.GetBoolean("enable", &enable)) {
+    LOG(ERROR) << "Invalid enableDebugRegion.";
+    return;
+  }
+
+  video_renderer_->EnableDebugDirtyRegion(enable);
+}
+
 void ChromotingInstance::Disconnect() {
   DCHECK(plugin_task_runner_->BelongsToCurrentThread());
 

remoting/client/plugin/chromoting_instance.h

@@ -131,6 +131,8 @@ class ChromotingInstance : public ClientUserInterface,
   void OnVideoSize(const webrtc::DesktopSize& size,
                       const webrtc::DesktopVector& dpi) override;
   void OnVideoShape(const webrtc::DesktopRegion& shape) override;
+  void OnVideoFrameDirtyRegion(
+      const webrtc::DesktopRegion& dirty_region) override;
 
   // Registers a global log message handler that redirects the log output to
   // our plugin instance.
@@ -192,6 +194,7 @@ class ChromotingInstance : public ClientUserInterface,
   void HandleAllowMouseLockMessage();
   void HandleSendMouseInputWhenUnfocused();
   void HandleDelegateLargeCursors();
+  void HandleEnableDebugRegion(const base::DictionaryValue& data);
 
   void Disconnect();
 
@@ -206,7 +209,7 @@ class ChromotingInstance : public ClientUserInterface,
   // TODO(sergeyu): When all current versions of the webapp support raw messages
   // remove this method and use PostChromotingMessage() instead.
   void PostLegacyJsonMessage(const std::string& method,
-                       scoped_ptr<base::DictionaryValue> data);
+                             scoped_ptr<base::DictionaryValue> data);
 
   // Posts trapped keys to the web-app to handle.
   void SendTrappedKey(uint32 usb_keycode, bool pressed);

remoting/client/plugin/pepper_video_renderer.h

@@ -42,6 +42,11 @@ class PepperVideoRenderer : public VideoRenderer {
 
     // Called when desktop shape changes.
     virtual void OnVideoShape(const webrtc::DesktopRegion& shape) = 0;
+
+    // Called with each frame's updated region, if EnableDebugDirtyRegion(true)
+    // was called.
+    virtual void OnVideoFrameDirtyRegion(
+        const webrtc::DesktopRegion& dirty_region) = 0;
   };
 
   // Initializes the renderer. |instance| and |event_handler| must outlive the
@@ -52,6 +57,10 @@ class PepperVideoRenderer : public VideoRenderer {
 
   // Must be called whenever the plugin view changes.
   virtual void OnViewChanged(const pp::View& view) = 0;
+
+  // Enables or disables delivery of dirty region information to the
+  // EventHandler, for debugging purposes.
+  virtual void EnableDebugDirtyRegion(bool enable) = 0;
 };
 
 }  // namespace remoting

remoting/client/plugin/pepper_video_renderer_2d.cc

@@ -69,6 +69,7 @@ PepperVideoRenderer2D::PepperVideoRenderer2D()
       dips_to_view_scale_(1.0f),
       flush_pending_(false),
       frame_received_(false),
+      debug_dirty_region_(false),
       callback_factory_(this),
       weak_factory_(this) {
 }
@@ -178,6 +179,10 @@ void PepperVideoRenderer2D::OnViewChanged(const pp::View& view) {
   }
 }
 
+void PepperVideoRenderer2D::EnableDebugDirtyRegion(bool enable) {
+  debug_dirty_region_ = enable;
+}
+
 void PepperVideoRenderer2D::OnSessionConfig(
     const protocol::SessionConfig& config) {
   DCHECK(CalledOnValidThread());
@@ -338,6 +343,11 @@ void PepperVideoRenderer2D::FlushBuffer(const webrtc::DesktopRect& clip_area,
   int error = graphics2d_.Flush(callback);
   CHECK(error == PP_OK_COMPLETIONPENDING);
   flush_pending_ = true;
+
+  // If Debug dirty region is enabled then emit it.
+  if (debug_dirty_region_) {
+    event_handler_->OnVideoFrameDirtyRegion(region);
+  }
 }
 
 void PepperVideoRenderer2D::OnFlushDone(int result,

remoting/client/plugin/pepper_video_renderer_2d.h

@@ -47,6 +47,7 @@ class PepperVideoRenderer2D : public PepperVideoRenderer,
                                 const ClientContext& context,
                                 EventHandler* event_handler) override;
   void OnViewChanged(const pp::View& view) override;
+  void EnableDebugDirtyRegion(bool enable) override;
 
   // VideoRenderer interface.
   void OnSessionConfig(const protocol::SessionConfig& config) override;
@@ -131,6 +132,9 @@ class PepperVideoRenderer2D : public PepperVideoRenderer,
   // True after the first call to ApplyBuffer().
   bool frame_received_;
 
+  // True if dirty regions are to be sent to |event_handler_| for debugging.
+  bool debug_dirty_region_;
+
   pp::CompletionCallbackFactory<PepperVideoRenderer2D> callback_factory_;
   base::WeakPtrFactory<PepperVideoRenderer2D> weak_factory_;
 

remoting/client/plugin/pepper_video_renderer_3d.cc

@@ -153,6 +153,10 @@ void PepperVideoRenderer3D::OnViewChanged(const pp::View& view) {
   PaintIfNeeded();
 }
 
+void PepperVideoRenderer3D::EnableDebugDirtyRegion(bool enable) {
+  debug_dirty_region_ = enable;
+}
+
 void PepperVideoRenderer3D::OnSessionConfig(
     const protocol::SessionConfig& config) {
   PP_VideoProfile video_profile = PP_VIDEOPROFILE_VP8_ANY;
@@ -250,6 +254,18 @@ void PepperVideoRenderer3D::ProcessVideoPacket(scoped_ptr<VideoPacket> packet,
     event_handler_->OnVideoShape(desktop_shape_);
   }
 
+  // Report the dirty region, for debugging, if requested.
+  if (debug_dirty_region_) {
+    webrtc::DesktopRegion dirty_region;
+    for (int i = 0; i < packet->dirty_rects_size(); ++i) {
+      Rect remoting_rect = packet->dirty_rects(i);
+      dirty_region.AddRect(webrtc::DesktopRect::MakeXYWH(
+          remoting_rect.x(), remoting_rect.y(),
+          remoting_rect.width(), remoting_rect.height()));
+    }
+    event_handler_->OnVideoFrameDirtyRegion(dirty_region);
+  }
+
   pending_packets_.push_back(
       new PendingPacket(packet.Pass(), done_runner.Release()));
   DecodeNextPacket();

remoting/client/plugin/pepper_video_renderer_3d.h

@@ -38,6 +38,7 @@ class PepperVideoRenderer3D : public PepperVideoRenderer,
                   const ClientContext& context,
                   EventHandler* event_handler) override;
   void OnViewChanged(const pp::View& view) override;
+  void EnableDebugDirtyRegion(bool enable) override;
 
   // VideoRenderer interface.
   void OnSessionConfig(const protocol::SessionConfig& config) override;
@@ -149,6 +150,9 @@ class PepperVideoRenderer3D : public PepperVideoRenderer,
   // Location of the scale value to be passed to the |shader_program_|.
   int shader_texcoord_scale_location_;
 
+  // True if dirty regions are to be sent to |event_handler_| for debugging.
+  bool debug_dirty_region_;
+
   pp::CompletionCallbackFactory<PepperVideoRenderer3D> callback_factory_;
 
   DISALLOW_COPY_AND_ASSIGN(PepperVideoRenderer3D);

remoting/webapp/base/html/client_plugin.html

@@ -8,6 +8,7 @@
     <div class="horizontally-centered">
       <div id="client-container">
         <div class="client-plugin-container"></div>
+        <div class="debug-region-container"></div>
         <img class="mouse-cursor-overlay" hidden>
       </div>
     </div>

remoting/webapp/base/html/main.css

@@ -707,6 +707,22 @@ body:not(.connected) #session-mode {
   height: auto;
 }
 
+.debug-region-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
+}
+
+.debug-region-rect {
+  position: absolute;
+  background-color: rgba(255, 0, 255, 0.5);
+  border-color: #000000;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+}
+
 .mouse-cursor-overlay {
   position: absolute;
   pointer-events: none;

remoting/webapp/crd/js/client_plugin.js

@@ -239,6 +239,13 @@ remoting.ClientPlugin.prototype.setFetchThirdPartyTokenHandler =
 remoting.ClientPlugin.prototype.setFetchPinHandler =
     function(handler) {};
 
+/**
+ * @param {function({rects:Array<Array<number>>}):void|null} handler Callback
+ *     to receive dirty region information for each video frame, for debugging.
+ */
+remoting.ClientPlugin.prototype.setDebugDirtyRegionHandler =
+    function(handler) {};
+
 
 /**
  * Set of features for which hasFeature() can be used to test.

remoting/webapp/crd/js/client_plugin_impl.js

@@ -105,12 +105,13 @@ remoting.ClientPluginImpl = function(container, onExtensionMessage,
    * @private
    */
   this.updateMouseCursorImage_ = function(url, hotspotX, hotspotY) {};
-
   /**
    * @param {string} data Remote cast extension message.
    * @private
    */
   this.onCastExtensionHandler_ = function(data) {};
+  /** @private {?function({rects:Array<Array<number>>}):void} */
+  this.debugRegionHandler_ = null;
 
   /**
    * @type {number}
@@ -295,6 +296,16 @@ remoting.ClientPluginImpl.prototype.setFetchPinHandler = function(handler) {
   this.fetchPinHandler_ = handler;
 };
 
+/**
+ * @param {?function({rects:Array<Array<number>>}):void} handler
+ */
+remoting.ClientPluginImpl.prototype.setDebugDirtyRegionHandler =
+    function(handler) {
+  this.debugRegionHandler_ = handler;
+  this.plugin_.postMessage(JSON.stringify(
+      { method: 'enableDebugRegion', data: { enable: handler != null } }));
+};
+
 /**
  * @param {string|remoting.ClientPluginMessage}
  *    rawMessage Message from the plugin.
@@ -492,6 +503,13 @@ remoting.ClientPluginImpl.prototype.handleMessageMethod_ = function(message) {
 
     context.putImageData(imageData, 0, 0);
     this.updateMouseCursorImage_(canvas.toDataURL(), hotspotX, hotspotY);
+
+  } else if (message.method == 'onDebugRegion') {
+    if (this.debugRegionHandler_) {
+      this.debugRegionHandler_(
+          /** @type {{rects: Array<(Array<number>)>}} **/(message.data));
+    }
+
   }
 };
 

remoting/webapp/crd/js/client_session.js

@@ -840,3 +840,16 @@ remoting.ClientSession.prototype.handleExtensionMessage =
   }
   return false;
 };
+
+/**
+ * Enables or disables rendering of dirty regions for debugging.
+ * @param {boolean} enable True to enable rendering.
+ */
+remoting.ClientSession.prototype.enableDebugRegion = function(enable) {
+  if (enable) {
+    this.plugin_.setDebugDirtyRegionHandler(
+        this.uiHandler_.handleDebugRegion.bind(this.uiHandler_));
+  } else {
+    this.plugin_.setDebugDirtyRegionHandler(null);
+  }
+}

remoting/webapp/crd/js/desktop_connected_view.js

@@ -71,6 +71,10 @@ remoting.DesktopConnectedView = function(session, container, host, mode,
   /** @type {number?} @private */
   this.notifyClientResolutionTimer_ = null;
 
+  /** @type {Element} @private */
+  this.debugRegionContainer_ =
+      this.container_.querySelector('.debug-region-container');
+
   /** @type {Element} @private */
   this.mouseCursorOverlay_ =
       this.container_.querySelector('.mouse-cursor-overlay');
@@ -1053,3 +1057,28 @@ remoting.DesktopConnectedView.prototype.handleExtensionMessage =
   }
   return false;
 };
+
+/**
+ * Handles dirty region debug messages.
+ *
+ * @param {{rects:Array<Array<number>>}} region Dirty region of the latest
+ *     frame.
+ */
+remoting.DesktopConnectedView.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);
+    }
+  }
+}