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

chrome/browser/resources/policy.js

 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * This variable structure is here to document the structure that the template
  * expects to correctly populate the page.
  */
 var policyDataFormat = {
   // Whether any of the policies in 'policies' have a value.
@@ skipping 61 matching lines @@
 
       if (this.noActivePolicies_)
         $('no-policies').hidden = false;
       if (policyData.status.displayStatusSection)
         $('status-section').hidden = false;;
 
       // This is the javascript code that processes the template:
       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])
     },
 
     /**
      * Filters the table of policies by name.
      * @param {string} term The search string.
      */
     filterTable: function(term) {
       this.searchTerm_ = term.toLowerCase();
       var table = $('policy-table');
       var showUnsent = $('toggle-unsent-policies').checked;
@@ skipping 24 matching lines @@
 
       var tableRows = document.getElementsByClassName('policy-unset');
       for (var i = 0; i < tableRows.length; i++)
         tableRows[i].hidden = !($('toggle-unsent-policies').checked);
 
       // Filter table again in case a search was active.
       this.filterTable(this.searchTerm_);
     },
 
     /**
-     * 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.collapseCell_(textContainer);
+      else
         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' : '';
     },
 
     /**
      * Collapses all expanded table cells and updates the visibility of the
      * toggles accordingly. Should be called before the policy information in
      * 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]);
     },
 
     /**
      * Expands a table cell so that all the text it contains is visible.
      * @param {Object} textContainer The cell's div element that contains the
      * text.
      * @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;
     },
 
     /**
      * Collapses a table cell so that overflowing text is hidden.
      * @param {Object} textContainer The cell's div element that contains the
      * text.
      * @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);
+      }
     }
   };
 
   /**
    * Asks the C++ PolicyUIHandler to get details about policies and status
    * information. The PolicyUIHandler should reply to returnData() (below).
    */
   Policy.requestData = function() {
     chrome.send('requestData');
   };
@@ skipping 25 matching lines @@
   /**
    * Determines whether a policy should be visible or not.
    * @param {Object} policy An entry in the 'policies' array given by the above
    * PolicyDataFormat.
    */
   Policy.shouldDisplayPolicy = function(policy) {
     return $('toggle-unsent-policies').checked || policy.set;
   };
 
   /**
-   * 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.
    */
   Policy.initialize = function() {
     i18nTemplate.process(document, templateData);
     Policy.requestData();
 
     // Set HTML event handlers.
     $('fetch-policies-button').onclick = function(event) {
       this.disabled = true;
@@ skipping 12 matching lines @@
   // Export
   return {
     Policy: Policy
   };
 });
 
 var Policy = policies.Policy;
 
 // Get data and have it displayed upon loading.
 document.addEventListener('DOMContentLoaded', policies.Policy.initialize);