MD Bookmarks: Replace folder iron-icons with divs with an SVG background

MD Bookmarks stamps a large amount of the same folder icon: 1 for every
node in the sidebar, and 1 for every item in the list. While iron-icon
is fast as far as Polymer elements go, stamping 50+ of them is still
expensive.

This CL switches all folder icons across the page to a plain divs that
have an SVG background. This appears to save at least 5% of page load
time on profiles with a large number of folders.

Bug: 727177
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I439f83ad3c3f645108d1a3d744cce2e402acbcee
Reviewed-on: https://chromium-review.googlesource.com/566264Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: Tim Sergeant <tsergeant@chromium.org>
Cr-Commit-Position: refs/heads/master@{#487028}

chrome/browser/browser_resources.grd

@@ -256,6 +256,8 @@
 
       <if expr="not is_android and not is_ios">
         <!-- MD Bookmarks. -->
+        <include name="IDR_MD_BOOKMARKS_IMAGES_FOLDER_OPEN_SVG" file="resources\md_bookmarks\images\folder_open.svg" type="BINDATA" />
+        <include name="IDR_MD_BOOKMARKS_IMAGES_FOLDER_SVG" file="resources\md_bookmarks\images\folder.svg" type="BINDATA" />
         <if expr="use_vulcanize">
           <then>
             <include name="IDR_MD_BOOKMARKS_VULCANIZED_HTML" file="${root_gen_dir}\chrome\browser\resources\md_bookmarks\vulcanized.html" use_base_dir="false" flattenhtml="true" allowexternalscript="true" type="BINDATA" compress="gzip" />
@@ -283,7 +285,6 @@
             <include name="IDR_MD_BOOKMARKS_EDIT_DIALOG_JS" file="resources\md_bookmarks\edit_dialog.js" type="BINDATA" />
             <include name="IDR_MD_BOOKMARKS_FOLDER_NODE_HTML" file="resources\md_bookmarks\folder_node.html" type="BINDATA" />
             <include name="IDR_MD_BOOKMARKS_FOLDER_NODE_JS" file="resources\md_bookmarks\folder_node.js" type="BINDATA" />
-            <include name="IDR_MD_BOOKMARKS_ICONS_HTML" file="resources\md_bookmarks\icons.html" type="BINDATA" />
             <include name="IDR_MD_BOOKMARKS_ITEM_HTML" file="resources\md_bookmarks\item.html" type="BINDATA" />
             <include name="IDR_MD_BOOKMARKS_ITEM_JS" file="resources\md_bookmarks\item.js" type="BINDATA" />
             <include name="IDR_MD_BOOKMARKS_LIST_HTML" file="resources\md_bookmarks\list.html" type="BINDATA" />

chrome/browser/resources/md_bookmarks/dnd_chip.html

@@ -64,13 +64,6 @@
         width: 24px;
       }
 
-      #icon {
-        background-repeat: no-repeat;
-        height: 16px;
-        margin: 2px;
-        width: 16px;
-      }
-
       .centered {
         align-items: center;
         display: flex;
@@ -99,9 +92,7 @@
     </div>
     <div id="primary" class="chip-container centered">
       <div id="icon-wrapper" class="centered">
-        <iron-icon id="folder-icon" icon="cr:folder" hidden$="[[!isFolder_]]">
-        </iron-icon>
-        <div id="icon" hidden$="[[isFolder_]]"></div>
+        <div id="icon"></div>
       </div>
       <div id="title"></div>
     </div>

chrome/browser/resources/md_bookmarks/dnd_chip.js

@@ -12,9 +12,6 @@ Polymer({
       reflectToAttribute: true,
     },
 
-    /** @private */
-    isFolder_: Boolean,
-
     /** @private */
     isMultiItem_: Boolean,
   },
@@ -32,10 +29,12 @@ Polymer({
     if (this.showing_)
       return;
 
-    this.isFolder_ = !dragItem.url;
+    var isFolder = !dragItem.url;
     this.isMultiItem_ = items.length > 1;
-    if (dragItem.url)
-      this.$.icon.style.backgroundImage = cr.icon.getFavicon(dragItem.url);
+
+    this.$.icon.className = isFolder ? 'folder-icon' : 'website-icon';
+    this.$.icon.style.backgroundImage =
+        isFolder ? null : cr.icon.getFavicon(assert(dragItem.url));
 
     this.$.title.textContent = dragItem.title;
     this.$.count.textContent = items.length;

chrome/browser/resources/md_bookmarks/folder_node.html

@@ -5,7 +5,6 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/actions.html">
 <link rel="import" href="chrome://bookmarks/command_manager.html">
-<link rel="import" href="chrome://bookmarks/icons.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
 <link rel="import" href="chrome://bookmarks/store_client.html">
 
@@ -75,7 +74,7 @@
       }
 
       [no-children] {
-        -webkit-padding-start: 52px; /* The width of the arrow and its margin */
+        -webkit-margin-start: 52px; /* The width of the arrow and its margin */
       }
     </style>
 
@@ -95,9 +94,10 @@
         </button>
       </template>
       <div id="folder-label" class="v-centered">
-        <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"
+        <div class="folder-icon"
+            open$="[[isSelectedFolder_]]"
             no-children$="[[!hasChildFolder_]]">
-        </iron-icon>
+        </div>
         <div class="menu-label">[[item_.title]]</div>
       </div>
     </div>

chrome/browser/resources/md_bookmarks/folder_node.js

@@ -258,14 +258,6 @@ Polymer({
     return children.pop().getLastVisibleDescendant_();
   },
 
-  /**
-   * @private
-   * @return {string}
-   */
-  getFolderIcon_: function() {
-    return this.isSelectedFolder_ ? 'bookmarks:folder-open' : 'cr:folder';
-  },
-
   /** @private */
   selectFolder_: function() {
     if (!this.isSelectedFolder_) {

chrome/browser/resources/md_bookmarks/icons.html

-<link rel="import" href="chrome://resources/html/polymer.html">
-
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
-
-<iron-iconset-svg size="24" name="bookmarks">
-  <svg>
-    <defs>
-      <!--
-      These icons are copied from Polymer's iron-icons and kept in sorted order.
-      See http://goo.gl/Y1OdAq for instructions on adding additional icons.
-      -->
-      <g id="folder-open"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></g>
-    </defs>
-  </svg>
-</iron-iconset-svg>

chrome/browser/resources/md_bookmarks/images/folder.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575">
+  <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path>
+</svg>

chrome/browser/resources/md_bookmarks/images/folder_open.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#4285F4">
+  <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path>
+</svg>

chrome/browser/resources/md_bookmarks/item.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://bookmarks/actions.html">
 <link rel="import" href="chrome://bookmarks/shared_style.html">
@@ -32,6 +30,7 @@
       }
 
       #website-title {
+        -webkit-margin-start: 20px;
         flex: 1;
         overflow: hidden;
         text-decoration: none;
@@ -39,19 +38,8 @@
         white-space: nowrap;
       }
 
-      #icon-wrapper {
-        -webkit-margin-end: 20px;
-        color: var(--secondary-text-color);
-        display: flex;
-        height: 20px;
-        width: 20px;
-      }
-
       #icon {
-        background-repeat: no-repeat;
-        height: 16px;
-        margin: 2px;
-        width: 16px;
+        color: var(--secondary-text-color);
       }
 
       button.more-vert-button {
@@ -59,11 +47,7 @@
       }
     </style>
     <div id="url">
-      <div id="icon-wrapper">
-        <iron-icon id="folder-icon" icon="cr:folder" hidden$="[[!isFolder_]]">
-        </iron-icon>
-        <div id="icon" hidden$="[[isFolder_]]"></div>
-      </div>
+      <div id="icon"></div>
       <div id="website-title">
         [[item_.title]]
       </div>

chrome/browser/resources/md_bookmarks/item.js

@@ -163,6 +163,7 @@ Polymer({
    * @private
    */
   updateFavicon_: function(url) {
-    this.$.icon.style.backgroundImage = cr.icon.getFavicon(url);
+    this.$.icon.className = url ? 'website-icon' : 'folder-icon';
+    this.$.icon.style.backgroundImage = url ? cr.icon.getFavicon(url) : null;
   },
 });

chrome/browser/resources/md_bookmarks/shared_style.html

@@ -58,6 +58,25 @@
       :host-context([hide-focus-ring]) [tabindex]:focus {
         outline: none;
       }
+
+      .folder-icon {
+        background-image: url(chrome://bookmarks/images/folder.svg);
+        background-size: contain;
+        height: 20px;
+        min-width: 20px;
+        width: 20px;
+      }
+
+      .folder-icon[open] {
+        background-image: url(chrome://bookmarks/images/folder_open.svg);
+      }
+
+      .website-icon {
+        background-repeat: no-repeat;
+        height: 16px;
+        margin: 2px;
+        width: 16px;
+      }
     </style>
   </template>
 </dom-module>

chrome/browser/ui/webui/md_bookmarks/md_bookmarks_ui.cc

@@ -108,10 +108,17 @@ content::WebUIDataSource* CreateMdBookmarksUIHTMLSource(Profile* profile) {
   AddLocalizedString(source, "undo", IDS_BOOKMARK_BAR_UNDO);
 
   // Resources.
+  source->AddResourcePath("images/folder_open.svg",
+                          IDR_MD_BOOKMARKS_IMAGES_FOLDER_OPEN_SVG);
+  source->AddResourcePath("images/folder.svg",
+                          IDR_MD_BOOKMARKS_IMAGES_FOLDER_SVG);
 #if BUILDFLAG(USE_VULCANIZE)
   source->AddResourcePath("crisper.js", IDR_MD_BOOKMARKS_CRISPER_JS);
   source->SetDefaultResource(IDR_MD_BOOKMARKS_VULCANIZED_HTML);
-  source->UseGzip(std::unordered_set<std::string>());
+  std::unordered_set<std::string> exclusions;
+  exclusions.insert("images/folder_open.svg");
+  exclusions.insert("images/folder.svg");
+  source->UseGzip(exclusions);
 #else
   source->AddResourcePath("actions.html", IDR_MD_BOOKMARKS_ACTIONS_HTML);
   source->AddResourcePath("actions.js", IDR_MD_BOOKMARKS_ACTIONS_JS);
@@ -142,7 +149,6 @@ content::WebUIDataSource* CreateMdBookmarksUIHTMLSource(Profile* profile) {
                           IDR_MD_BOOKMARKS_FOLDER_NODE_HTML);
   source->AddResourcePath("folder_node.js",
                           IDR_MD_BOOKMARKS_FOLDER_NODE_JS);
-  source->AddResourcePath("icons.html", IDR_MD_BOOKMARKS_ICONS_HTML);
   source->AddResourcePath("item.html", IDR_MD_BOOKMARKS_ITEM_HTML);
   source->AddResourcePath("item.js", IDR_MD_BOOKMARKS_ITEM_JS);
   source->AddResourcePath("list.html", IDR_MD_BOOKMARKS_LIST_HTML);

chrome/test/data/webui/md_bookmarks/item_test.js

@@ -32,14 +32,12 @@ suite('<bookmarks-item>', function() {
 
   test('changing to folder hides/unhides the folder/icon', function() {
     // Starts test as an item.
-    assertTrue(item.$['folder-icon'].hidden);
-    assertFalse(item.$.icon.hidden);
+    assertEquals('website-icon', item.$.icon.className);
 
     // Change to a folder.
     item.itemId = '1';
 
-    assertFalse(item.$['folder-icon'].hidden);
-    assertTrue(item.$.icon.hidden);
+    assertEquals('folder-icon', item.$.icon.className);
   });
 
   test('pressing the menu button selects the item', function() {