Implement a scrollbar for chromoting client plugin

Added javascript properties to report desktop size. This is then used to set
<div> dimension so allow scrollbar to show up.

BUG=72266

Review URL: http://codereview.chromium.org/6419001

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@74205 0039d316-1c4b-4281-b951-d872f2087c98

7 files changed, 46 insertions, 26 deletions

diff --git a/remoting/client/chromoting_client.cc b/remoting/client/chromoting_client.cc
index 21911a8..0449d8f 100644
--- a/remoting/client/chromoting_client.cc
+++ b/remoting/client/chromoting_client.cc
@@ -132,8 +132,8 @@ void ChromotingClient::DispatchPacket() {
 
 void ChromotingClient::OnConnectionOpened(protocol::ConnectionToHost* conn) {
   VLOG(1) << "ChromotingClient::OnConnectionOpened";
-  SetConnectionState(CONNECTED);
   Initialize();
+  SetConnectionState(CONNECTED);
 }
 
 void ChromotingClient::OnConnectionClosed(protocol::ConnectionToHost* conn) {
diff --git a/remoting/client/extension/chromoting_tab.html b/remoting/client/extension/chromoting_tab.html
index c24207e..a0c1cc1 100644
--- a/remoting/client/extension/chromoting_tab.html
+++ b/remoting/client/extension/chromoting_tab.html
@@ -20,8 +20,8 @@ found in the LICENSE file.
         <tr><td colspan="2"><input type="button" value="Login" onclick="submitLogin();" /></td></tr>
       </table>
     </div>
-    <div id="plugin_div" class="plugin">
-      <embed width="100%" height="100%" name="chromoting" id="chromoting"
+    <div id="plugin_scroll_panel" class="plugin-scroll-panel">
+      <embed name="chromoting" id="chromoting"
              src="about://none" type="pepper-application/x-chromoting">
     </div>
   </body>
diff --git a/remoting/client/extension/chromoting_tab.js b/remoting/client/extension/chromoting_tab.js
index 128b757..aa640ad 100644
--- a/remoting/client/extension/chromoting_tab.js
+++ b/remoting/client/extension/chromoting_tab.js
@@ -72,27 +72,16 @@ function pluginLoginChallenge() {
 }
 
 /**
- * This is the callback that the plugin invokes to indicate that the host/
- * client connection status has changed.
+ * This is a callback that gets called when the desktop size contained in the
+ * the plugin has changed.
  */
-function pluginCallback() {
-  var status = chromoting.plugin.status;
-  var quality = chromoting.plugin.quality;
+function desktopSizeChanged() {
+  var width = chromoting.plugin.desktopWidth;
+  var height = chromoting.plugin.desktopHeight;
 
-  if (status == chromoting.plugin.STATUS_UNKNOWN) {
-    showClientStateMessage('');
-  } else if (status == chromoting.plugin.STATUS_CONNECTING) {
-    showClientStateMessage('Connecting to ' + chromoting.hostname +
-                          ' as ' + chromoting.username);
-  } else if (status == chromoting.plugin.STATUS_INITIALIZING) {
-    showClientStateMessage('Initializing connection to ' + chromoting.hostname);
-  } else if (status == chromoting.plugin.STATUS_CONNECTED) {
-    showClientStateMessage('Connected to ' + chromoting.hostname, 1000);
-  } else if (status == chromoting.plugin.STATUS_CLOSED) {
-    showClientStateMessage('Closed');
-  } else if (status == chromoting.plugin.STATUS_FAILED) {
-    showClientStateMessage('Failed');
-  }
+  console.log('desktop size changed: ' + width + 'x' + height);
+  chromoting.plugin.style.width = width + "px";
+  chromoting.plugin.style.height = height + "px";
 }
 
 /**
@@ -106,7 +95,7 @@ function pluginCallback() {
 function showClientStateMessage(message, duration) {
   // Increment message id to ignore any previous fadeout requests.
   chromoting.messageId++;
-  console.log('setting message ' + chromoting.messageId);
+  console.log('setting message ' + chromoting.messageId + '!');
 
   // Update the status message.
   var msg = document.getElementById('status_msg');
@@ -138,6 +127,7 @@ function pluginCallback() {
     setClientStateMessageFade('Initializing connection to ' +
                               chromoting.hostname);
   } else if (status == chromoting.plugin.STATUS_CONNECTED) {
+    desktopSizeChanged();
     setClientStateMessageFade('Connected to ' + chromoting.hostname, 1000);
   } else if (status == chromoting.plugin.STATUS_CLOSED) {
     setClientStateMessage('Closed');
diff --git a/remoting/client/extension/main.css b/remoting/client/extension/main.css
index 6b3ac1b..37fb62b 100644
--- a/remoting/client/extension/main.css
+++ b/remoting/client/extension/main.css
@@ -105,6 +105,7 @@ a.hostentry { text-decoration: none; }
 }
 
 .status_msg {
+  -webkit-user-select: none;
   position: absolute;
   left: 20px;
   top: 20px;
@@ -115,6 +116,7 @@ a.hostentry { text-decoration: none; }
 }
 
 .login_panel {
+  -webkit-user-select: none;
   position: absolute;
   display: none;
   z-index: 1;
@@ -127,5 +129,9 @@ a.hostentry { text-decoration: none; }
   width: 250px;
 }
 
-.plugin {
+.plugin-scroll-panel {
+  -webkit-user-select: none;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
 }
diff --git a/remoting/client/plugin/chromoting_scriptable_object.cc b/remoting/client/plugin/chromoting_scriptable_object.cc
index c470fcd..11349de 100644
--- a/remoting/client/plugin/chromoting_scriptable_object.cc
+++ b/remoting/client/plugin/chromoting_scriptable_object.cc
@@ -15,6 +15,8 @@ namespace remoting {
 
 const char kStatusAttribute[] = "status";
 const char kQualityAttribute[] = "quality";
+const char kDesktopWidth[] = "desktopWidth";
+const char kDesktopHeight[] = "desktopHeight";
 const char kConnectionInfoUpdate[] = "connectionInfoUpdate";
 const char kLoginChallenge[] = "loginChallenge";
 
@@ -51,6 +53,8 @@ void ChromotingScriptableObject::Init() {
 
   AddAttribute(kConnectionInfoUpdate, Var());
   AddAttribute(kLoginChallenge, Var());
+  AddAttribute(kDesktopWidth, Var(0));
+  AddAttribute(kDesktopHeight, Var(0));
 
   AddMethod("connect", &ChromotingScriptableObject::DoConnect);
   AddMethod("disconnect", &ChromotingScriptableObject::DoDisconnect);
@@ -132,7 +136,9 @@ void ChromotingScriptableObject::SetProperty(const Var& name,
   // chromoting_scriptable_object.h for the object interface definition.
   std::string property_name = name.AsString();
   if (property_name != kConnectionInfoUpdate &&
-      property_name != kLoginChallenge) {
+      property_name != kLoginChallenge &&
+      property_name != kDesktopWidth &&
+      property_name != kDesktopHeight) {
     *exception =
         Var("Cannot set property " + property_name + " on this object.");
     return;
@@ -171,6 +177,17 @@ void ChromotingScriptableObject::SetConnectionInfo(ConnectionStatus status,
   }
 }
 
+void ChromotingScriptableObject::SetDesktopSize(int width, int height) {
+  int width_index = property_names_[kDesktopWidth];
+  int height_index = property_names_[kDesktopHeight];
+
+  if (properties_[width_index].attribute.AsInt() != width ||
+      properties_[height_index].attribute.AsInt() != height) {
+    properties_[width_index].attribute = Var(width);
+    properties_[height_index].attribute = Var(height);
+  }
+}
+
 void ChromotingScriptableObject::AddAttribute(const std::string& name,
                                               Var attribute) {
   property_names_[name] = properties_.size();
diff --git a/remoting/client/plugin/chromoting_scriptable_object.h b/remoting/client/plugin/chromoting_scriptable_object.h
index e265a82..ad37afc 100644
--- a/remoting/client/plugin/chromoting_scriptable_object.h
+++ b/remoting/client/plugin/chromoting_scriptable_object.h
@@ -9,7 +9,11 @@
 //
 //   // Connection status.
 //   readonly attribute unsigned short connection_status;
-
+//
+//   // Dimension of the desktop area.
+//   readonly attribute int desktopWidth;
+//   readonly attribute int desktopHeight;
+//
 //   // Constants for connection status.
 //   const unsigned short STATUS_UNKNOWN = 0;
 //   const unsigned short STATUS_CONNECTING = 1;
@@ -102,6 +106,7 @@ class ChromotingScriptableObject : public pp::deprecated::ScriptableObject {
                        pp::Var* exception);
 
   void SetConnectionInfo(ConnectionStatus status, ConnectionQuality quality);
+  void SetDesktopSize(int width, int height);
 
   // This should be called to signal JS code to provide login information.
   void SignalLoginChallenge();
diff --git a/remoting/client/plugin/pepper_view.cc b/remoting/client/plugin/pepper_view.cc
index 007de6d..5d154ba 100644
--- a/remoting/client/plugin/pepper_view.cc
+++ b/remoting/client/plugin/pepper_view.cc
@@ -193,6 +193,8 @@ void PepperView::SetViewport(int x, int y, int width, int height) {
     LOG(ERROR) << "Couldn't bind the device context.";
     return;
   }
+
+  instance_->GetScriptableObject()->SetDesktopSize(width, height);
 }
 
 void PepperView::AllocateFrame(media::VideoFrame::Format format,