Bookmarks WebUI: Reduce indents on bookmark folder structure

https://i.imgur.com/JebuYQs.png

This CL also refactors a bit of the HTML and CSS of the bookmark folder
nodes to make it a bit easier to resize the indents.

Change-Id: Iab935570bf9f6bc695b59c1b894240f4f1171a13
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1618265
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663879}

chrome/browser/resources/bookmarks/app.html

@@ -71,7 +71,7 @@
       bookmarks-folder-node {
         flex: 1;
         overflow-y: auto;
-        padding: 8px 3px 0 3px;
+        padding: 8px 3px 0 18px;
         user-select: none;
       }
 

chrome/browser/resources/bookmarks/folder_node.html

@@ -12,33 +12,44 @@
   <template>
     <style include="shared-style">
       :host {
-        --padding-start-per-depth: 36px;
         display: block;
       }
 
-      .v-centered {
+      #container {
         align-items: center;
-        display: flex;
-        flex-direction: row;
+        cursor: pointer;
+        display: grid;
+        grid-template-areas: 'arrow folder label';
+        grid-template-columns: 24px 24px auto;
+        height: 40px;
+        min-width: fit-content;
+        overflow: hidden;
+        padding-inline-start: calc(var(--node-depth, 0) * 10px);
       }
 
-      .menu-label {
-        color: var(--folder-inactive-color);
-        font-weight: 500;
-        margin-inline-start: 16px;
+      #arrow {
+        grid-area: arrow;
+        justify-self: center;
+        margin: 0;
+        --cr-icon-button-size: 40px;
       }
 
-      #container {
-        cursor: pointer;
-        height: 40px;
-        padding-inline-start:
-            calc(var(--node-depth, 0) * var(--padding-start-per-depth));
-        position: relative;
+      #arrow:not([is-open]) {
+        transform: rotate(-90deg);
+        transition: transform 150ms;
       }
 
-      #folder-label {
-        flex-grow: 1;
-        padding-inline-end: 8px;
+      .folder-icon {
+        grid-area: folder;
+        justify-self: center;
+      }
+
+      .menu-label {
+        color: var(--folder-inactive-color);
+        font-weight: 500;
+        grid-area: label;
+        padding: 0 6px;
+        white-space: nowrap;
       }
 
       :host([is-selected-folder_]) .menu-label,
@@ -52,15 +63,6 @@
         color: var(--google-grey-refresh-700);
       }
 
-      #arrow {
-        margin: 0 8px;
-      }
-
-      #arrow:not([is-open]) {
-        transform: rotate(-90deg);
-        transition: transform 150ms;
-      }
-
       :host-context([dir='rtl']) #arrow:not([is-open]) {
         transform: rotate(90deg);
       }
@@ -68,14 +70,9 @@
       #arrow[is-open] {
         transform: initial;
       }
-
-      [no-children] {
-        margin-inline-start: 52px; /* The width of the arrow and its margin */
-      }
     </style>
 
     <div id="container"
-        class="v-centered"
         on-click="selectFolder_"
         on-dblclick="toggleFolder_"
         on-contextmenu="onContextMenu_"
@@ -89,14 +86,12 @@
             tabindex="-1" is-open$="[[isOpen]]" noink aria-hidden="true">
         </cr-icon-button>
       </template>
-      <div id="folder-label" class="v-centered">
-        <div class="folder-icon"
-            open$="[[isSelectedFolder_]]"
-            no-children$="[[!hasChildFolder_]]">
-        </div>
-        <div class="menu-label elided-text" title="[[item_.title]]">
-          [[item_.title]]
-        </div>
+      <div class="folder-icon"
+          open$="[[isSelectedFolder_]]"
+          no-children$="[[!hasChildFolder_]]">
+      </div>
+      <div class="menu-label" title="[[item_.title]]">
+        [[item_.title]]
       </div>
     </div>
     <div id="descendants" role="group">

chrome/browser/resources/bookmarks/item.html

@@ -80,6 +80,12 @@
       :host(:focus) {
         z-index: 1;
       }
+
+      .elided-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     </style>
     <div id="icon"></div>
     <div id="website-title" class="elided-text" title="[[item_.title]]">

chrome/browser/resources/bookmarks/shared_style.html

@@ -72,12 +72,6 @@
         margin: 2px;
         width: 16px;
       }
-
-      .elided-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
     </style>
   </template>
 </dom-module>

chrome/test/data/webui/bookmarks/folder_node_test.js

@@ -46,12 +46,12 @@ suite('<bookmarks-folder-node>', function() {
         firstGen[0].$['descendants'].querySelectorAll('bookmarks-folder-node');
 
     // Select nested folder.
-    MockInteractions.tap(secondGen[0].$['folder-label']);
+    MockInteractions.tap(secondGen[0].$['container']);
     assertEquals('select-folder', store.lastAction.name);
     assertEquals(secondGen[0].itemId, store.lastAction.id);
 
     // Select folder in a separate subtree.
-    MockInteractions.tap(rootFolders[1].$['folder-label']);
+    MockInteractions.tap(rootFolders[1].$['container']);
     assertEquals('select-folder', store.lastAction.name);
     assertEquals(rootFolders[1].itemId, store.lastAction.id);
 
@@ -60,7 +60,7 @@ suite('<bookmarks-folder-node>', function() {
     store.notifyObservers();
     store.resetLastAction();
 
-    MockInteractions.tap(rootFolders[1].$['folder-label']);
+    MockInteractions.tap(rootFolders[1].$['container']);
     assertEquals(null, store.lastAction);
   });