Bookmarks WebUI: Add selected indicator

https://imgur.com/a/75Ct7RK

Bug: 1070910
Change-Id: Ia511037f01012fa75a17ab88a92bda606974849a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2543043Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828311}

chrome/browser/resources/bookmarks/app.html

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

chrome/browser/resources/bookmarks/folder_node.html

-<style include="shared-style">
+<style include="cr-shared-style shared-style">
   :host {
     display: block;
+    --cr-vertical-tab-height: 33px;
   }
 
   #container {
+    /* Add enough space at the end for the focus outline to not be cropped. */
+    margin-inline-end: 3px;
+  }
+
+  #inner-container {
     align-items: center;
     cursor: pointer;
     display: grid;
+    flex: 1;
     grid-template-areas: 'arrow folder label';
     grid-template-columns: 24px 24px auto;
     min-height: 40px;
     min-width: fit-content;
     overflow: hidden;
-    padding-inline-start: calc(var(--node-depth, 0) * 15px);
+    padding-inline-start: calc(var(--node-depth, 0) * 15px + 14px);
   }
 
   #arrow {
@@ -63,13 +70,15 @@
 </style>
 
 <div id="container"
-    on-click="selectFolder_"
-    on-dblclick="toggleFolder_"
-    on-contextmenu="onContextMenu_"
-    tabindex$="[[getTabIndex_(selectedFolder_, itemId)]]"
+    class$="cr-vertical-tab [[getContainerClass_(isSelectedFolder_)]]"
     hidden="[[isRootFolder_(depth)]]"
     role="treeitem"
-    aria-owns="descendants">
+    aria-owns="descendants"
+    tabindex$="[[getTabIndex_(selectedFolder_, itemId)]]"
+    on-click="selectFolder_"
+    on-dblclick="toggleFolder_"
+    on-contextmenu="onContextMenu_">
+  <div id="inner-container">
     <template is="dom-if" if="[[hasChildFolder_]]">
       <cr-icon-button id="arrow" iron-icon="cr:arrow-drop-down"
           on-click="toggleFolder_" on-mousedown="preventDefault_"
@@ -83,6 +92,7 @@
     <div class="menu-label" title="[[item_.title]]">
       [[item_.title]]
     </div>
+  </div>
 </div>
 <div id="descendants" role="group">
   <template is="dom-if" if="[[isOpen]]">

chrome/browser/resources/bookmarks/folder_node.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './shared_style.js';
 import './strings.m.js';
@@ -99,6 +100,15 @@ Polymer({
     this.updateFromStore();
   },
 
+  /**
+   * @param {boolean} isSelectedFolder
+   * @return {string}
+   * @private
+   */
+  getContainerClass_(isSelectedFolder) {
+    return isSelectedFolder ? 'selected' : '';
+  },
+
   /** @return {!HTMLElement} */
   getFocusTarget() {
     return /** @type {!HTMLDivElement} */ (this.$.container);

chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.html

-<style include="pdf-shared cr-hidden-style">
+<style include="pdf-shared cr-hidden-style cr-shared-style">
   :host {
     --sidenav-selected-tab-color: var(--google-blue-refresh-300);
     background-color: var(--viewer-pdf-toolbar-background-color);
@@ -42,43 +42,38 @@
     width: 100%;
   }
 
-  .button-wrapper::before {
-    border-radius: 0 3px 3px 0;
-    content: '';
-    display: block;
-    height: 100%;
+  .cr-vertical-tab {
+    --cr-vertical-tab-selected-color: var(--sidenav-selected-tab-color);
+  }
+
+  .cr-vertical-tab::before {
     transform: translateY(var(--button-wrapper-total-height));
     transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
-    width: 4px;
   }
 
-  .button-wrapper.selected + .button-wrapper::before {
+  .cr-vertical-tab.selected + .cr-vertical-tab::before {
     transform: translateY(calc(-1 * var(--button-wrapper-total-height)));
   }
 
-  .button-wrapper.selected::before {
-    background: var(--sidenav-selected-tab-color);
+  .cr-vertical-tab.selected::before {
     transform: translateY(0);
   }
 
-  :host-context([dir=rtl]) .button-wrapper::before {
-    /* Border-radius based on block/inline is not yet supported. */
-    transform: scaleX(-1);
-  }
-
   cr-icon-button {
     margin: 0 auto;
   }
 </style>
 <div id="icons" hidden$="[[!bookmarks.length]]">
-  <div class$="button-wrapper [[thumbnailButtonClass_(thumbnailView_)]]">
+  <div class$="
+      button-wrapper cr-vertical-tab [[thumbnailButtonClass_(thumbnailView_)]]">
     <cr-icon-button iron-icon="pdf:thumbnails" role="tab"
         title="$i18n{tooltipThumbnails}" aria-label="$i18n{tooltipThumbnails}"
         aria-selected$="[[getAriaSelectedThumbnails_(thumbnailView_)]]"
         on-click="onThumbnailClick_">
     </cr-icon-button>
   </div>
-  <div class$="button-wrapper [[outlineButtonClass_(thumbnailView_)]]">
+  <div class$="
+      button-wrapper cr-vertical-tab [[outlineButtonClass_(thumbnailView_)]]">
     <cr-icon-button iron-icon="pdf:doc-outline" role="tab"
         title="$i18n{tooltipDocumentOutline}"
         aria-label="$i18n{tooltipDocumentOutline}"

chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.js

@@ -9,6 +9,7 @@ import './viewer-document-outline.js';
 import './viewer-thumbnail-bar.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
 
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 

ui/webui/resources/cr_elements/shared_style_css.html

@@ -158,6 +158,28 @@
         line-height: var(--cr-form-field-label-line-height);
         margin-bottom: 8px;
       }
+
+      .cr-vertical-tab {
+        align-items: center;
+        display: flex;
+      }
+
+      .cr-vertical-tab::before {
+        border-radius: 0 3px 3px 0;
+        content: '';
+        display: block;
+        height: var(--cr-vertical-tab-height, 100%);
+        width: 4px;
+      }
+
+      .cr-vertical-tab.selected::before {
+        background: var(--cr-vertical-tab-selected-color, var(--cr-checked-color));
+      }
+
+      :host-context([dir=rtl]) .cr-vertical-tab::before {
+        /* Border-radius based on block/inline is not yet supported. */
+        transform: scaleX(-1);
+      }
     </style>
   </template>
 </dom-module>