chrome/browser/resources/bookmarks/folder_node.html

<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="actions.html">
<link rel="import" href="command_manager.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="store_client.html">
<link rel="import" href="strings.html">

<dom-module id="bookmarks-folder-node">
  <template>
    <style include="shared-style">
      :host {
        display: block;
      }

      #container {
        align-items: center;
        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);
      }

      #arrow {
        grid-area: arrow;
        justify-self: center;
        margin: 0;
        --cr-icon-button-size: 40px;
      }

      #arrow:not([is-open]) {
        transform: rotate(-90deg);
        transition: transform 150ms;
      }

      .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,
      :host([is-selected-folder_]) .folder-icon {
        color: var(--interactive-color);
      }

      :host-context([dark]) .drag-on .menu-label,
      :host-context([dark]) .drag-on .folder-icon,
      :host-context([dark]) .drag-on #arrow {
        color: var(--google-grey-refresh-700);
      }

      :host-context([dir='rtl']) #arrow:not([is-open]) {
        transform: rotate(90deg);
      }

      #arrow[is-open] {
        transform: initial;
      }
    </style>

    <div id="container"
        on-click="selectFolder_"
        on-dblclick="toggleFolder_"
        on-contextmenu="onContextMenu_"
        tabindex$="[[getTabIndex_(selectedFolder_, itemId)]]"
        hidden="[[isRootFolder_(depth)]]"
        role="treeitem"
        aria-owns="descendants">
      <template is="dom-if" if="[[hasChildFolder_]]">
        <cr-icon-button id="arrow" iron-icon="cr:arrow-drop-down"
            on-click="toggleFolder_" on-mousedown="preventDefault_"
            tabindex="-1" is-open$="[[isOpen]]" noink aria-hidden="true">
        </cr-icon-button>
      </template>
      <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">
      <template is="dom-if" if="[[isOpen]]">
        <template is="dom-repeat"
            items="[[item_.children]]"
            as="child"
            filter="isFolder_">
          <bookmarks-folder-node item-id="[[child]]"
              draggable="true"
              depth="[[getChildDepth_(depth)]]">
          </bookmarks-folder-node>
        </template>
      </template>
    </div>
  </template>
  <script src="folder_node.js"></script>
</dom-module>