[Chromoting] Use classList instead of custom addClass/removeClass routines.

BUG=none
TEST=none


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

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

6 files changed, 50 insertions, 52 deletions

diff --git a/remoting/webapp/client_screen.js b/remoting/webapp/client_screen.js
index de025fe..de0a063 100644
--- a/remoting/webapp/client_screen.js
+++ b/remoting/webapp/client_screen.js
@@ -110,9 +110,9 @@ remoting.setScaleToFit = function(scaleToFit) {
   remoting.clientSession.setScaleToFit(scaleToFit);
   var button = document.getElementById('toggle-scaling');
   if (remoting.clientSession.getScaleToFit()) {
-    addClass(button, 'toggle-button-active');
+    button.classList.add('toggle-button-active');
   } else {
-    removeClass(button, 'toggle-button-active');
+    button.classList.remove('toggle-button-active');
   }
 };
 
diff --git a/remoting/webapp/connection_history.js b/remoting/webapp/connection_history.js
index 459fddf..cd4d5a6 100644
--- a/remoting/webapp/connection_history.js
+++ b/remoting/webapp/connection_history.js
@@ -109,10 +109,10 @@ remoting.ConnectionHistory.Entry.prototype.durationString_ = function() {
  *     summary and detail information, respectively, for the connection.
  */
 remoting.ConnectionHistory.Entry.prototype.createTableRows = function() {
-  var summary = document.createElement('tr');
-  addClass(summary, 'connection-history-summary');
-  var zippy = document.createElement('td');
-  addClass(zippy, 'zippy');
+  var summary = /** @type {HTMLElement} */ document.createElement('tr');
+  summary.classList.add('connection-history-summary');
+  var zippy = /** @type {HTMLElement} */ document.createElement('td');
+  zippy.classList.add('zippy');
   summary.appendChild(zippy);
   // TODO(jamiewalch): Find a way of combining date and time such both align
   // vertically without being considered separate columns, which puts too much
@@ -134,8 +134,8 @@ remoting.ConnectionHistory.Entry.prototype.createTableRows = function() {
   duration.innerText = this.durationString_();
   summary.appendChild(duration);
   // TODO(jamiewalch): Fill out the detail row correctly.
-  var detail = document.createElement('tr');
-  addClass(detail, 'connection-history-detail');
+  var detail = /** @type {HTMLElement} */ document.createElement('tr');
+  detail.classList.add('connection-history-detail');
   for (var i = 0; i < summary.childElementCount; ++i) {
     var td = document.createElement('td');
     if (i != 0) {
@@ -147,13 +147,9 @@ remoting.ConnectionHistory.Entry.prototype.createTableRows = function() {
     }
     detail.appendChild(td);
   }
-  /** @param {Element} node The summary row. */
+  /** @param {HTMLElement} node The summary row. */
   var toggleDetail = function(node) {
-    if (hasClass(node.className, 'expanded')) {
-      removeClass(node, 'expanded');
-    } else {
-      addClass(node, 'expanded');
-    }
+    node.classList.toggle('expanded');
   };
   summary.addEventListener('click',
                            function() { toggleDetail(summary); },
@@ -189,10 +185,10 @@ remoting.ConnectionHistory.prototype.setFilter_ = function(element) {
   for (var i in remoting.ConnectionHistory.Filter) {
     var link = document.getElementById(remoting.ConnectionHistory.Filter[i]);
     if (element == link) {
-      addClass(link, 'no-link');
+      link.classList.add('no-link');
       this.filter_ = /** @type {remoting.ConnectionHistory.Filter} */ (i);
     } else {
-      removeClass(link, 'no-link');
+      link.classList.remove('no-link');
     }
   }
 };
diff --git a/remoting/webapp/host_screen.js b/remoting/webapp/host_screen.js
index 33faf4b..f904c96 100644
--- a/remoting/webapp/host_screen.js
+++ b/remoting/webapp/host_screen.js
@@ -236,10 +236,11 @@ function updateTimeoutStyles_() {
       remoting.cancelShare();
       return false;
     }
+    var accessCode = document.getElementById('access-code-display');
     if (accessCodeExpiresIn_ <= ACCESS_CODE_RED_THRESHOLD_) {
-      addClass(document.getElementById('access-code-display'), 'expiring');
+      accessCode.classList.add('expiring');
     } else {
-      removeClass(document.getElementById('access-code-display'), 'expiring');
+      accessCode.classList.remove('expiring');
     }
   }
   document.getElementById('access-code-countdown').hidden =
@@ -267,9 +268,10 @@ function updateAccessCodeTimeoutElement_() {
  * @return {void} Nothing.
  */
 function onNatTraversalPolicyChanged_(enabled) {
+  var natBox = document.getElementById('nat-box');
   if (enabled) {
-    addClass(document.getElementById('nat-box'), 'traversal-enabled');
+    natBox.classList.add('traversal-enabled');
   } else {
-    removeClass(document.getElementById('nat-box'), 'traversal-enabled');
+    natBox.classList.remove('traversal-enabled');
   }
 }
diff --git a/remoting/webapp/toolbar.js b/remoting/webapp/toolbar.js
index f79a1dd..0d1288e 100644
--- a/remoting/webapp/toolbar.js
+++ b/remoting/webapp/toolbar.js
@@ -13,20 +13,20 @@
 var remoting = remoting || {};
 
 /**
- * @param {Element} toolbar The HTML element representing the tool-bar.
+ * @param {HTMLElement} toolbar The HTML element representing the tool-bar.
  * @constructor
  */
 remoting.Toolbar = function(toolbar) {
   /**
-   * @type {Element}
+   * @type {HTMLElement}
    * @private
    */
   this.toolbar_ = toolbar;
   /**
-   * @type {Element}
+   * @type {HTMLElement}
    * @private
    */
-  this.stub_ = toolbar.querySelector('.toolbar-stub');
+  this.stub_ = /** @type {HTMLElement} */toolbar.querySelector('.toolbar-stub');
   /**
    * @type {number?} The id of the preview timer, if any.
    * @private
@@ -64,7 +64,7 @@ remoting.Toolbar = function(toolbar) {
  * @return {void} Nothing.
  */
 remoting.Toolbar.prototype.preview = function() {
-  addClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  this.toolbar_.classList.add(remoting.Toolbar.VISIBLE_CLASS_);
   if (this.timerId_) {
     window.clearTimeout(this.timerId_);
     this.timerId_ = null;
@@ -72,7 +72,7 @@ remoting.Toolbar.prototype.preview = function() {
   /** @type {remoting.Toolbar} */
   var that = this;
   var endPreview = function() {
-    removeClass(that.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+    that.toolbar_.classList.remove(remoting.Toolbar.VISIBLE_CLASS_);
   };
   this.timerId_ = window.setTimeout(endPreview, 3000);
 };
@@ -92,12 +92,7 @@ remoting.Toolbar.prototype.center = function() {
  * Toggle the tool-bar visibility.
  */
 remoting.Toolbar.prototype.toggle = function() {
-  if (hasClass(this.toolbar_.className,
-               remoting.Toolbar.VISIBLE_CLASS_)) {
-    removeClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
-  } else {
-    addClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
-  }
+  this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
 };
 
 /**
@@ -127,11 +122,11 @@ remoting.Toolbar.prototype.hitTest_ = function(x, y) {
  */
 remoting.Toolbar.onMouseMove = function(event) {
   if (remoting.toolbar) {
+    var toolbarStub = remoting.toolbar.stub_;
     if (remoting.toolbar.hitTest_(event.x, event.y)) {
-      addClass(remoting.toolbar.stub_, remoting.Toolbar.STUB_EXTENDED_CLASS_);
+      toolbarStub.classList.add(remoting.Toolbar.STUB_EXTENDED_CLASS_);
     } else {
-      removeClass(remoting.toolbar.stub_,
-                  remoting.Toolbar.STUB_EXTENDED_CLASS_);
+      toolbarStub.classList.remove(remoting.Toolbar.STUB_EXTENDED_CLASS_);
     }
   } else {
     document.removeEventListener('mousemove',
diff --git a/remoting/webapp/ui_mode.js b/remoting/webapp/ui_mode.js
index 54b598a..14ab646 100644
--- a/remoting/webapp/ui_mode.js
+++ b/remoting/webapp/ui_mode.js
@@ -41,6 +41,17 @@ remoting.AppMode = {
 };
 
 /**
+ * @param {Element} element The element to check.
+ * @param {string} attr The attribute on the element to check.
+ * @param {string} mode The mode to check for.
+ * @return {boolean} True if |mode| is found within the element's |attr|.
+ */
+remoting.hasModeAttribute = function(element, attr, mode) {
+  return element.getAttribute(attr).match(
+      new RegExp('(\\s|^)' + mode + '(\\s|$)')) != null;
+}
+
+/**
  * Update the DOM by showing or hiding elements based on whether or not they
  * have an attribute matching the specified name.
  * @param {string} mode The value against which to match the attribute.
@@ -56,7 +67,7 @@ remoting.updateModalUi = function(mode, attr) {
     var element = /** @type {Element} */ elements[i];
     var hidden = true;
     for (var m = 0; m < modes.length; ++m) {
-      if (hasClass(element.getAttribute(attr), modes[m])) {
+      if (remoting.hasModeAttribute(element, attr, modes[m])) {
         hidden = false;
         break;
       }
diff --git a/remoting/webapp/util.js b/remoting/webapp/util.js
index 9fd7f22..c6eb201 100644
--- a/remoting/webapp/util.js
+++ b/remoting/webapp/util.js
@@ -8,35 +8,29 @@
  */
 
 /**
- * @param {string} classes A space-separated list of classes.
- * @param {string} cls The class to check for.
- * @return {boolean} True if |cls| is found within |classes|.
- */
-function hasClass(classes, cls) {
-  return classes.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')) != null;
-}
-
-/**
+ * TODO(garykac): Remove this once host_list.js and host_table_entry.js have
+ * been updated to use classList directly.
+ *
  * @param {Element} element The element to which to add the class.
  * @param {string} cls The new class.
  * @return {void} Nothing.
  */
 function addClass(element, cls) {
-  if (!hasClass(element.className, cls)) {
-    var padded = element.className == '' ? '' : element.className + ' ';
-    element.className = padded + cls;
-  }
+  var helem = /** @type {HTMLElement} */ element;
+  helem.classList.add(cls);
 }
 
 /**
+ * TODO(garykac): Remove this once host_list.js and host_table_entry.js have
+ * been updated to use classList directly.
+ *
  * @param {Element} element The element from which to remove the class.
  * @param {string} cls The new class.
  * @return {void} Nothing.
  */
 function removeClass(element, cls) {
-  element.className =
-      element.className.replace(new RegExp('\\b' + cls + '\\b', 'g'), '')
-                       .replace('  ', ' ');
+  var helem = /** @type {HTMLElement} */ element;
+  helem.classList.remove(cls);
 }
 
 /**