Use a split toggle button to reflect scaling state.

BUG=None
TEST=Manual

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

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

7 files changed, 33 insertions, 27 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 8a16164..55c36d4 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -80,6 +80,7 @@
       'webapp/me2mom/oauth2_callback.html',
       'webapp/me2mom/plugin_settings.js',
       'webapp/me2mom/remoting.js',
+      'webapp/me2mom/scale-to-fit.png',
       'webapp/me2mom/spinner.gif',
       'webapp/me2mom/toolbar.css',
       'webapp/me2mom/toolbar-stub.png',
diff --git a/remoting/webapp/me2mom/_locales/en/messages.json b/remoting/webapp/me2mom/_locales/en/messages.json
index 8ea9878..17bd133 100644
--- a/remoting/webapp/me2mom/_locales/en/messages.json
+++ b/remoting/webapp/me2mom/_locales/en/messages.json
@@ -197,10 +197,6 @@
       }
     }
   },
-  "SCALE_BUTTON": {
-    "message": "Fit Screen",
-    "description": "Label for the scaling button. Clicking this toggles between scale-to-fit and 1:1 mode. This is displayed in a tool-bar with limited horizontal space; please try to keep the translation under 20 characters."
-  },
   "SHARE_BUTTON": {
     "message": "Share This Computer",
     "description": "Label for the share button on the host-side. Clicking this button generates an access code to be conveyed to the client."
@@ -209,6 +205,10 @@
     "message": "Stop Sharing",
     "description": "Label for the 'stop sharing' button on the host-side. Clicking this button disconnects the client."
   },
+  "TOOLTIP_SCALING": {
+    "message": "Scale to fit",
+    "description": "The tool-tip shown when the user hovers over the scale to fit button. Clicking this button toggles between scaling down the remote desktop to fit it inside the Chromium browser window and displaying it at 1:1 scale."
+  },
   "VERIFYING_CODE": {
     "message": "Verifying access code…",
     "description": "Message displayed on the client while the access code is verified."
diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index ad3018b..85187b9 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -40,7 +40,7 @@ button:hover {
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
 }
 
-button:active {
+button:active, .toggle-button-active, .toggle-button-active:hover {
   background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
   color: #333;
   -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
@@ -232,17 +232,9 @@ label {
   -webkit-user-select: none;
 }
 
-#session-status-msg {
-  /*
-    clear: both; forces the session-controls div to size appropriately for
-    session-buttons.
-  */
-  clear: both;
-  font-family: monospace;
-  font-size: small;
-  margin: 5px;
-}
-
-#server-response {
-  font-weight: bolder;
+#toggle-scaling {
+  margin: 1px 0 0 0;
+  padding: 1px;
+  min-width: 0;
+  line-height: 0;
 }
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 00faf54..5735b39 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -63,8 +63,10 @@ found in the LICENSE file.
         <button type="button" onclick="remoting.disconnect();"
                 i18n-content="DISCONNECT_BUTTON"></button>
         <span class="end-align">
-          <button type="button" onclick="remoting.toggleScaleToFit();"
-                  i18n-content="SCALE_BUTTON"></button>
+          <button id="toggle-scaling"
+                  onClick="remoting.toggleScaleToFit(this);">
+            <img src="scale-to-fit.png">
+          </button>
         </span>
       </div>
       <div class="toolbar-stub">
diff --git a/remoting/webapp/me2mom/client_session.js b/remoting/webapp/me2mom/client_session.js
index d697019..bd0fc6a 100644
--- a/remoting/webapp/me2mom/client_session.js
+++ b/remoting/webapp/me2mom/client_session.js
@@ -365,7 +365,7 @@ remoting.ClientSession.prototype.onDesktopSizeChanged_ = function() {
  * @param {boolean} shouldScale If the plugin should scale itself.
  * @return {void} Nothing.
  */
-remoting.ClientSession.prototype.toggleScaleToFit = function(shouldScale) {
+remoting.ClientSession.prototype.setScaleToFit = function(shouldScale) {
   if (shouldScale) {
     if (this.plugin.desktopWidth == 0 ||
         this.plugin.desktopHeight == 0) {
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index 5ade16e..82368637 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -68,13 +68,16 @@ function hasClass(classes, cls) {
 }
 
 function addClass(element, cls) {
-  if (!hasClass(element.className, cls))
-    element.className = element.className + ' ' + cls;
+  if (!hasClass(element.className, cls)) {
+    var padded = element.className == '' ? '' : element.className + ' ';
+    element.className = padded + cls;
+  }
 }
 
 function removeClass(element, cls) {
   element.className =
-      element.className.replace(new RegExp('\\b' + cls + '\\b', 'g'), '');
+      element.className.replace(new RegExp('\\b' + cls + '\\b', 'g'), '')
+                       .replace('  ', ' ');
 }
 
 function retrieveEmail_(access_token) {
@@ -143,6 +146,8 @@ remoting.toggleDebugLog = function() {
 
 remoting.init = function() {
   l10n.localize();
+  var button = document.getElementById('toggle-scaling');
+  button.title = chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_SCALING');
   // Create global objects.
   remoting.oauth2 = new remoting.OAuth2();
   remoting.debug =
@@ -597,11 +602,17 @@ function isHostModeSupported() {
 /**
  * Enable or disable scale-to-fit.
  *
+ * @param {boolean} scale True to enable scaling.
  * @return {void} Nothing.
  */
-remoting.toggleScaleToFit = function() {
+remoting.toggleScaleToFit = function(button) {
   remoting.scaleToFit = !remoting.scaleToFit;
-  remoting.session.toggleScaleToFit(remoting.scaleToFit);
+  if (remoting.scaleToFit) {
+    addClass(button, 'toggle-button-active');
+  } else {
+    removeClass(button, 'toggle-button-active');
+  }
+  remoting.session.setScaleToFit(remoting.scaleToFit);
 }
 
 /**
@@ -640,4 +651,4 @@ remoting.promptClose = function() {
 }());
 
 // Shortcut to save typing now that this is the only way to show the debug log.
-var tdl = remoting.toggleDebugLog;
\ No newline at end of file
+var tdl = remoting.toggleDebugLog;
diff --git a/remoting/webapp/me2mom/scale-to-fit.png b/remoting/webapp/me2mom/scale-to-fit.png
new file mode 100644
index 0000000..fdb44ab
--- /dev/null
+++ b/remoting/webapp/me2mom/scale-to-fit.png