chrome/browser/resources/md_bookmarks/folder_node.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/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/icons.html">
<link rel="import" href="chrome://bookmarks/shared_style.html">
<link rel="import" href="chrome://bookmarks/store_client.html">

<dom-module id="bookmarks-folder-node">
  <template>
    <style include="shared-style">
      :host {
        --padding-start-per-depth: 36px;
        display: block;
      }

      .v-centered {
        align-items: center;
        display: flex;
        flex-direction: row;
      }

      .menu-label {
        -webkit-margin-start: 16px;
        color: var(--folder-inactive-color);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #container {
        -webkit-padding-start:
            calc(var(--node-depth, 0) * var(--padding-start-per-depth));
        cursor: pointer;
        height: 40px;
        position: relative;
      }

      #folder-label {
        -webkit-padding-end: 8px;
        color: var(--secondary-text-color);
        flex-grow: 1;
        overflow: hidden;
      }

      :host([is-selected-folder_]) .menu-label,
      :host([is-selected-folder_]) #folder-label {
        color: var(--interactive-color);
      }

      iron-icon {
        flex-shrink: 0;
      }

      #arrow {
        color: var(--secondary-text-color);
        margin: 0 8px;
      }

      #arrow iron-icon {
        transform: rotate(-90deg);
        transition: transform 150ms;
      }

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

      #arrow iron-icon[is-open] {
        transform: initial;
      }

      [no-children] {
        -webkit-padding-start: 52px; /* The width of the arrow and its margin */
      }
    </style>

    <div id="container" class="v-centered" on-tap="selectFolder_"
        draggable="[[!isTopLevelFolder_(depth)]]"
        tabindex$="[[getTabIndex_(isSelectedFolder_)]]"
        hidden="[[isRootFolder_(depth)]]">
      <template is="dom-if" if="[[hasChildFolder_(item_.children)]]">
        <button is="paper-icon-button-light" id="arrow"
            on-tap="toggleFolder_" on-mousedown="preventDefault_" tabindex="-1">
          <iron-icon icon="cr:arrow-drop-down" is-open$="[[!isClosed_]]">
          </iron-icon>
        </button>
      </template>
      <div id="folder-label" class="v-centered">
        <iron-icon icon="[[getFolderIcon_(isSelectedFolder_)]]"
            no-children$="[[!hasChildFolder_(item_.children)]]">
        </iron-icon>
        <div class="menu-label">[[item_.title]]</div>
      </div>
    </div>
    <div id="descendants" hidden$="[[isClosed_]]">
      <template is="dom-repeat"
          items="[[item_.children]]"
          as="child"
          filter="isFolder_">
        <bookmarks-folder-node item-id="[[child]]"
            depth="[[getChildDepth_(depth)]]">
        </bookmarks-folder-node>
      </template>
    </div>
  </template>
  <script src="chrome://bookmarks/folder_node.js"></script>
</dom-module>