Add icon-visibility attribute to cr.ui.Tree.

This adds an icon-visibility attribute to cr.ui.Tree. If 'hidden', no space is reserved beside .tree-item labels and icons are not displayed. 'all' => show folder icons beside all nodes. 'parent' => show folder icons beside expandable/parent nodes. Removes icons from certificate viewer.

BUG=101920
TEST=None


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

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

chrome/browser/resources/certificate_viewer.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="chrome://resources/css/tabs.css">
     <link rel="stylesheet" href="chrome://resources/css/tree.css">
     <script src="strings.js"></script>
+    <script src="chrome://resources/css/tree.css.js"></script>
     <script src="chrome://resources/js/cr.js"></script>
     <script src="chrome://resources/js/cr/ui.js"></script>
     <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
@@ -93,11 +94,13 @@
             <!-- Details -->
             <div id="hierarchy-section" class="vertical-box">
               <span class="title" i18n-content="hierarchy"></span>
-              <div id="hierarchy" class="section-contents"></div>
+              <tree id="hierarchy" class="section-contents"
+                  icon-visibility='hidden'></tree>
             </div>
             <div id="cert-fields-section" class="vertical-box">
               <span class="title" i18n-content="certFields"></span>
-              <div id="cert-fields" class="section-contents"></div>
+              <tree id="cert-fields" class="section-contents"
+                  icon-visibility='hidden'></tree>
             </div>
             <div id="cert-field-value-section" class="vertical-box">
               <span class="title" i18n-content="certFieldVal"></span>

chrome/browser/resources/collected_cookies.html

@@ -22,11 +22,11 @@
 <div id="info-banner" hidden></div>
 
 <p i18n-content="allowedCookies"></p>
-<tree id="allowed-cookies" class="cookies-tree"></tree>
+<tree id="allowed-cookies" class="cookies-tree" icon-visibility="parent"></tree>
 <button id="block-button" i18n-content="blockButton"></button>
 
 <p i18n-content="blockedCookies"></p>
-<tree id="blocked-cookies" class="cookies-tree"></tree>
+<tree id="blocked-cookies" class="cookies-tree" icon-visibility="parent"></tree>
 <button id="allow-button" i18n-content="allowButton"></button>
 <button id="allow-this-session-button"
         i18n-content="allowThisSessionButton"></button>

chrome/browser/resources/options/certificate_manager.html

@@ -35,26 +35,27 @@
         <span i18n-content="personalCertsTabDescription"></span>
       </td></tr>
       <tr><td>
-        <tree id="personalCertsTab-tree" class="certificate-tree"></tree>
+        <tree id="personalCertsTab-tree" class="certificate-tree"
+            icon-visibility="parent"></tree>
       </td></tr>
       <tr><td>
         <button id="personalCertsTab-view" i18n-content="view_certificate"
-          disabled></button>
+            disabled></button>
         <!-- TODO(mattm):
         <button id="personalCertsTab-backup-all"
-          i18n-content="export_all_certificates"
-          disabled></button>
+            i18n-content="export_all_certificates"
+            disabled></button>
         -->
         <button id="personalCertsTab-import" i18n-content="import_certificate"
-          ></button>
+            ></button>
         <if expr="pp_ifdef('chromeos')">
           <button id="personalCertsTab-import-and-bind"
-            i18n-content="importAndBindCertificate" disabled></button>
+              i18n-content="importAndBindCertificate" disabled></button>
         </if>
         <button id="personalCertsTab-backup" i18n-content="export_certificate"
-          disabled></button>
+            disabled></button>
         <button id="personalCertsTab-delete" i18n-content="delete_certificate"
-          disabled></button>
+            disabled></button>
       </td></tr>
     </table>
   </div>
@@ -64,21 +65,22 @@
         <span i18n-content="serverCertsTabDescription"></span>
       </td></tr>
       <tr><td>
-        <tree id="serverCertsTab-tree" class="certificate-tree"></tree>
+        <tree id="serverCertsTab-tree" class="certificate-tree"
+            icon-visibility="parent"></tree>
       </td></tr>
       <tr><td>
         <button id="serverCertsTab-view" i18n-content="view_certificate"
-          disabled></button>
+            disabled></button>
         <!-- TODO(mattm):
         <button id="serverCertsTab-edit" i18n-content="edit_certificate"
-          disabled></button>
+            disabled></button>
         -->
         <button id="serverCertsTab-import" i18n-content="import_certificate"
-          ></button>
+            ></button>
         <button id="serverCertsTab-export" i18n-content="export_certificate"
-          disabled></button>
+            disabled></button>
         <button id="serverCertsTab-delete" i18n-content="delete_certificate"
-          disabled></button>
+            disabled></button>
       </td></tr>
     </table>
   </div>
@@ -88,19 +90,20 @@
         <span i18n-content="caCertsTabDescription"></span>
       </td></tr>
       <tr><td>
-        <tree id="caCertsTab-tree" class="certificate-tree"></tree>
+        <tree id="caCertsTab-tree" class="certificate-tree"
+            icon-visibility="parent"></tree>
       </td></tr>
       <tr><td>
         <button id="caCertsTab-view" i18n-content="view_certificate"
-          disabled></button>
+            disabled></button>
         <button id="caCertsTab-edit" i18n-content="edit_certificate"
-          disabled></button>
+            disabled></button>
         <button id="caCertsTab-import" i18n-content="import_certificate"
-          ></button>
+            ></button>
         <button id="caCertsTab-export" i18n-content="export_certificate"
-          disabled></button>
+            disabled></button>
         <button id="caCertsTab-delete" i18n-content="delete_certificate"
-          disabled></button>
+            disabled></button>
       </td></tr>
     </table>
   </div>
@@ -110,15 +113,16 @@
         <span i18n-content="unknownCertsTabDescription"></span>
       </td></tr>
       <tr><td>
-        <tree id="otherCertsTab-tree" class="certificate-tree"></tree>
+        <tree id="otherCertsTab-tree" class="certificate-tree"
+            icon-visibility="parent"></tree>
       </td></tr>
       <tr><td>
         <button id="otherCertsTab-view" i18n-content="view_certificate"
-          disabled></button>
+            disabled></button>
         <button id="otherCertsTab-export" i18n-content="export_certificate"
-          disabled></button>
+            disabled></button>
         <button id="otherCertsTab-delete" i18n-content="delete_certificate"
-          disabled></button>
+            disabled></button>
       </td></tr>
     </table>
   </div>

chrome/browser/resources/shared/css/tree.css

@@ -100,40 +100,55 @@ tree:focus .tree-row[selected] {
 
 .tree-label {
   -webkit-padding-start: 20px;
-  background-image: url("../../../../../ui/resources/folder_closed.png");
   background-position: 0 50%;
   background-repeat: no-repeat;
   white-space: pre;
 }
 
-/* We need to ensure that even empty labels take up space */
-.tree-label:empty:after {
-  content: " ";
-  white-space: pre;
+html[dir=rtl] .tree-label {
+  background-position: 100% 50%;
 }
 
-.tree-rename > .tree-row > .tree-label {
-  -webkit-user-select: auto;
-  -webkit-user-modify: read-write-plaintext-only;
-  background: white;
-  color: black;
-  outline: 1px solid black;
+html[dir=rtl] .tree-label,
+html[dir=rtl] .tree-row[may-have-children] > .tree-label {
+  background-image: url("../../../../../ui/resources/folder_closed_rtl.png");
 }
 
-html[dir=rtl] .tree-label {
-  background-position: 100% 50%;
+html[dir=rtl] .tree-item[expanded] > .tree-row > .tree-label {
+  background-image: url("../../../../../ui/resources/folder_open_rtl.png");
+}
+
+tree[icon-visibility=hidden] .tree-label {
+  -webkit-padding-start: 0;
+  background-image: none !important;
+}
+
+tree[icon-visibility=parent] .tree-label,
+tree[icon-visibility=parent] .tree-row[has-children=false] > .tree-label {
+  background-image: none;
+}
+
+.tree-label,
+.tree-row[may-have-children] > .tree-label {
+  background-image: url("../../../../../ui/resources/folder_closed.png");
 }
 
 .tree-item[expanded] > .tree-row > .tree-label {
   background-image: url("../../../../../ui/resources/folder_open.png");
 }
 
-html[dir='rtl'] .tree-label {
-  background-image: url("../../../../../ui/resources/folder_closed_rtl.png");
+/* We need to ensure that even empty labels take up space */
+.tree-label:empty:after {
+  content: " ";
+  white-space: pre;
 }
 
-html[dir='rtl'] .tree-item[expanded] > .tree-row > .tree-label {
-  background-image: url("../../../../../ui/resources/folder_open_rtl.png");
+.tree-rename > .tree-row > .tree-label {
+  -webkit-user-select: auto;
+  -webkit-user-modify: read-write-plaintext-only;
+  background: white;
+  color: black;
+  outline: 1px solid black;
 }
 
 .tree-item[editing] input {

chrome/browser/resources/shared/js/cr.js

@@ -133,6 +133,16 @@ const cr = (function() {
     target.dispatchEvent(e);
   }
 
+  /**
+   * Converts a camelCase javascript property name to a hyphenated-lower-case
+   * attribute name.
+   * @param {string} jsName The javascript camelCase property name.
+   * @return {string} The equivalent hyphenated-lower-case attribute name.
+   */
+  function getAttributeName(jsName) {
+    return jsName.replace(/([A-Z])/g, '-$1').toLowerCase();
+  }
+
   /**
    * The kind of property to define in {@code defineProperty}.
    * @enum {number}
@@ -171,12 +181,14 @@ const cr = (function() {
           return this[privateName];
         };
       case PropertyKind.ATTR:
+        var attributeName = getAttributeName(name);
         return function() {
-          return this.getAttribute(name);
+          return this.getAttribute(attributeName);
         };
       case PropertyKind.BOOL_ATTR:
+        var attributeName = getAttributeName(name);
         return function() {
-          return this.hasAttribute(name);
+          return this.hasAttribute(attributeName);
         };
     }
   }
@@ -207,13 +219,14 @@ const cr = (function() {
         };
 
       case PropertyKind.ATTR:
+        var attributeName = getAttributeName(name);
         return function(value) {
-          var oldValue = this[name];
+          var oldValue = this[attributeName];
           if (value !== oldValue) {
             if (value == undefined)
-              this.removeAttribute(name);
+              this.removeAttribute(attributeName);
             else
-              this.setAttribute(name, value);
+              this.setAttribute(attributeName, value);
             if (opt_setHook)
               opt_setHook.call(this, value, oldValue);
             dispatchPropertyChange(this, name, value, oldValue);
@@ -221,13 +234,14 @@ const cr = (function() {
         };
 
       case PropertyKind.BOOL_ATTR:
+        var attributeName = getAttributeName(name);
         return function(value) {
-          var oldValue = this[name];
+          var oldValue = this[attributeName];
           if (value !== oldValue) {
             if (value)
-              this.setAttribute(name, name);
+              this.setAttribute(attributeName, name);
             else
-              this.removeAttribute(name);
+              this.removeAttribute(attributeName);
             if (opt_setHook)
               opt_setHook.call(this, value, oldValue);
             dispatchPropertyChange(this, name, value, oldValue);

chrome/browser/resources/shared/js/cr/ui/tree.js

@@ -217,6 +217,16 @@ cr.define('cr.ui', function() {
     }
   };
 
+  /**
+   * Determines the visibility of icons next to the treeItem labels. If set to
+   * 'hidden', no space is reserved for icons and no icons are displayed next
+   * to treeItem labels. If set to 'parent', folder icons will be displayed
+   * next to expandable parent nodes. If set to 'all' folder icons will be
+   * displayed next to all nodes. Icons can be set using the treeItem's icon
+   * property.
+   */
+  cr.defineProperty(Tree, 'iconVisibility', cr.PropertyKind.ATTR);
+
   /**
    * This is used as a blueprint for new tree item elements.
    * @type {!HTMLElement}

chrome/browser/resources/sync_internals/node_browser.html

@@ -8,7 +8,7 @@ item detail on the lower right. -->
        behavior when tree is too tall (currently it makes you scroll the
        entire page). -->
   <div id="sync-node-tree-container">
-    <tree id="sync-node-tree"></tree>
+    <tree id="sync-node-tree" icon-visibility="parent"></tree>
   </div>
   <div id="sync-node-splitter"></div>
   <div id="sync-node-browser-container">

chrome/browser/ui/webui/options/certificate_manager_handler.cc

@@ -36,7 +36,6 @@ static const char kSubNodesId[] = "subnodes";
 static const char kNameId[] = "name";
 static const char kReadOnlyId[] = "readonly";
 static const char kUntrustedId[] = "untrusted";
-static const char kIconId[] = "icon";
 static const char kSecurityDeviceId[] = "device";
 static const char kErrorId[] = "error";
 
@@ -971,7 +970,6 @@ void CertificateManagerHandler::PopulateTree(const std::string& tab_name,
             kUntrustedId,
             certificate_manager_model_->cert_db().IsUntrusted(cert));
         // TODO(mattm): Other columns.
-        cert_dict->SetString(kIconId, "none");
         subnodes->Append(cert_dict);
       }
       std::sort(subnodes->begin(), subnodes->end(), comparator);