chrome/browser/resources/bookmarks/item.html

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

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="actions.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-item">
  <template>
    <style include="shared-style">
      :host {
        align-items: center;
        color: inherit;
        display: flex;
        flex-direction: row;
        height: 40px;
        padding-inline-start: 20px;
        position: relative;
        text-decoration: none;
        user-select: none;
      }

      :host([is-selected-item_]) {
        background-color: var(--highlight-color);
      }

      :host-context([dark]):host([is-selected-item_]),
      :host-context([dark]):host([is-selected-item_]) .folder-icon {
        color: var(--google-grey-refresh-700);
      }

      #website-title {
        color: var(--cr-primary-text-color);
        flex: 1;
        margin-inline-start: 20px;
        text-decoration: none;
      }

      :host([is-selected-item_]) #website-title {
        flex: 0 auto;
      }

      :host-context([dark]):host([is-selected-item_]) #website-title {
        color: var(--google-grey-900);
      }

      #website-url {
        /* Transparent version of --cr-secondary-text-color */
        color: rgba(0, 0, 0, 0.54);
        display: none;
        flex: 1;
        margin-inline-start: 20px;
        min-width: 100px;
      }

      :host-context([dark]) #website-url {
        color: var(--google-grey-800);
      }

      :host([is-selected-item_]) #website-url {
        display: block;
      }

      #icon {
        flex: none;
      }

      .more-vert-button {
        margin-inline-end: 12px;
      }

      :host(:focus) {
        z-index: 1;
      }
    </style>
    <div id="icon"></div>
    <div id="website-title" class="elided-text" title="[[item_.title]]">
      [[item_.title]]
    </div>
    <div id="website-url" class="elided-text" title="[[item_.url]]">
      [[item_.url]]
    </div>
    <paper-icon-button-light class="more-vert-button">
      <button id="menuButton"
          tabindex$="[[ironListTabIndex]]"
          title="$i18n{moreActionsButtonTitle}"
          aria-label$="[[getButtonAriaLabel_(item_)]]"
          on-click="onMenuButtonClick_"
          on-dblclick="onMenuButtonDblClick_"
          aria-haspopup="menu">
        <div></div>
        <div></div>
        <div></div>
      </button>
    </paper-icon-button-light>
  </template>
  <script src="item.js"></script>
</dom-module>