Fix display and progressive disclosure for multi-line values in about:policy.

chrome/browser/resources/policy.js

Index: chrome/browser/resources/policy.js
diff --git a/chrome/browser/resources/policy.js b/chrome/browser/resources/policy.js
index eb564cdbee738e1d80b50b4fd83c425ae33a6b80..8fad18200cf1d4612fe3b12c5ed02d7e9f3f8c5f 100644
--- a/chrome/browser/resources/policy.js
+++ b/chrome/browser/resources/policy.js
@@ -79,7 +79,18 @@ cr.define('policies', function() {
       var input = new JsEvalContext(policyData);
       var output = $('data-template');
       jstProcess(input, output);
-      this.setToggleEventHandlers_();
+
+      var toggles = document.querySelectorAll('.policy-set * .toggler');
+      for (var i = 0; i < toggles.length; i++) {
+        toggles[i].hidden = true;
+        toggles[i].onclick = function() {
+          Policy.getInstance().toggleCellExpand_(this);
+        };
+      }
+
+      var containers = document.querySelectorAll('.text-container');
+      for (var i = 0; i < containers.length; i++)
+        this.initTextContainer_(containers[i])
     },
 
     /**
@@ -124,38 +135,18 @@ cr.define('policies', function() {
     },
 
     /**
-     * Set event handlers for the "Show more"/"Hide" links generated by
-     * jstemplate.
-     * @private
-     */
-    setToggleEventHandlers_: function() {
-      var toggles = document.querySelectorAll('.policy-set * .toggler');
-      for (var i = 0; i < toggles.length; i++) {
-        toggles[i].onclick = function() {
-          Policy.getInstance().toggleCellExpand_(this);
-        };
-      }
-    },
-
-    /**
      * Expands or collapses a table cell that has overflowing text.
      * @param {Object} toggler The toggler that was clicked on.
      * @private
      */
     toggleCellExpand_: function(toggler) {
-      var tableCell = toggler.parentElement;
-      var textContainer = tableCell.querySelector('.text-container');
+      var textContainer = toggler.parentElement;
+      textContainer.collapsed = !textContainer.collapsed;
 
       if (textContainer.collapsed)
-        this.expandCell_(textContainer);
-      else
         this.collapseCell_(textContainer);
-
-      textContainer.collapsed = !textContainer.collapsed;
-      var expand = tableCell.querySelector('.expand');
-      var collapse = tableCell.querySelector('.collapse');
-      expand.style.display = textContainer.collapsed ? '' : 'none';
-      collapse.style.display = textContainer.collapsed ? 'none' : '';
+      else
+        this.expandCell_(textContainer);
     },
 
     /**
@@ -164,11 +155,7 @@ cr.define('policies', function() {
      * the table is updated.
      */
     collapseExpandedCells: function() {
-      var toggles = document.querySelectorAll('.policy-set * .toggler');
-      for (var i = 0; i < toggles.length; i++)
-        toggles[i].style.display = 'none';
-
-      var textContainers = document.querySelectorAll('.expanded');
+      var textContainers = document.querySelectorAll('.text-expanded');
       for (var i = 0; i < textContainers.length; i++)
         this.collapseCell_(textContainers[i]);
     },
@@ -180,8 +167,10 @@ cr.define('policies', function() {
      * @private
      */
     expandCell_: function(textContainer) {
-      textContainer.classList.remove('collapsed');
-      textContainer.classList.add('expanded');
+      textContainer.classList.remove('text-collapsed');
+      textContainer.classList.add('text-expanded');
+      textContainer.querySelector('.expand').hidden = true;
+      textContainer.querySelector('.collapse').hidden = false;
     },
 
     /**
@@ -191,8 +180,26 @@ cr.define('policies', function() {
      * @private
      */
     collapseCell_: function(textContainer) {
-      textContainer.classList.remove('expanded');
-      textContainer.classList.add('collapsed');
+      textContainer.classList.remove('text-expanded');
+      textContainer.classList.add('text-collapsed');
+      textContainer.querySelector('.expand').hidden = false;
+      textContainer.querySelector('.collapse').hidden = true;
+    },
+
+    /**
+     * Initializes a text container, showing the expand toggle if necessary.
+     * @param {Object} textContainer The text container element.
+     */
+    initTextContainer_: function(textContainer) {
+      textContainer.collapsed = true;
+      var textValue = textContainer.querySelector('.text-value');
+
+      // If the text is wider than the text container, the expand toggler should
+      // appear.
+      if (textContainer.offsetWidth < textValue.offsetWidth ||
+          textContainer.offsetHeight < textValue.offsetHeight) {
+        this.collapseCell_(textContainer);
+      }
     }
   };
 
@@ -238,22 +245,6 @@ cr.define('policies', function() {
   };
 
   /**
-   * Returns true if the "Show more" toggle should appear in a table cell and
-   * false if not.
-   * @param {Object} expandToggle The "Show more" DOM element.
-   */
-  Policy.shouldShowExpand = function(expandToggle) {
-    var textContainer =
-        expandToggle.parentNode.querySelector('.text-container');
-    textContainer.collapsed = true;
-    var cellText = textContainer.querySelector('.cell-text');
-
-    // If the text is wider than the text container, the expand toggler should
-    // appear.
-    return textContainer.offsetWidth < cellText.offsetWidth;
-  };
-
-  /**
    * Initializes the page and loads the list of policies and the policy
    * status data.
    */