blob: ad066d68a01701f8c13fabc335c30d5c8faff9b8 [file] [log] [blame]
<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="chrome://bookmarks/actions.html">
<link rel="import" href="chrome://bookmarks/shared_style.html">
<link rel="import" href="chrome://bookmarks/store_client.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);
}
#website-title {
flex: 1;
margin-inline-start: 20px;
text-decoration: none;
}
:host([is-selected-item_]) #website-title {
flex: 0 auto;
}
#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([is-selected-item_]) #website-url {
display: block;
}
#icon {
color: var(--cr-secondary-text-color);
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="chrome://bookmarks/item.js"></script>
</dom-module>