| <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/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_row.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.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://resources/html/icon.html"> |
| <link rel="import" href="chrome://history/browser_service.html"> |
| <link rel="import" href="chrome://history/constants.html"> |
| <link rel="import" href="chrome://history/searched_label.html"> |
| <link rel="import" href="chrome://history/shared_style.html"> |
| |
| <dom-module id="history-synced-device-card"> |
| <template> |
| <style include="shared-style"> |
| :host { |
| @apply --card-sizing; |
| -webkit-tap-highlight-color: transparent; |
| display: block; |
| padding-bottom: var(--card-padding-between); |
| } |
| |
| #card-heading { |
| -webkit-padding-end: 0; |
| cursor: pointer; |
| justify-content: space-between; |
| } |
| |
| #tab-item-list { |
| padding: 8px 0; |
| } |
| |
| #last-update-time { |
| color: var(--cr-secondary-text-color); |
| } |
| |
| #title-left-content { |
| display: flex; |
| overflow: hidden; |
| } |
| |
| #device-name { |
| overflow: hidden; |
| padding-right: 3px; |
| text-overflow: ellipsis; |
| } |
| |
| #right-buttons { |
| -webkit-margin-end: 12px; |
| color: var(--cr-secondary-text-color); |
| } |
| |
| #collapse { |
| overflow: hidden; |
| } |
| |
| #history-item-container { |
| @apply --cr-card-elevation; |
| background: #fff; |
| border-radius: var(--cr-card-border-radius); |
| } |
| |
| .item-container { |
| align-items: center; |
| display: flex; |
| margin: 0 20px; |
| min-height: var(--item-height); |
| } |
| |
| .window-separator { |
| background-color: var(--card-border-color); |
| height: 1px; |
| margin: 5px auto; |
| width: 80%; |
| } |
| </style> |
| <div id="history-item-container"> |
| <div class="card-title" id="card-heading" aria-expanded$="[[opened]]" |
| aria-controls="collapse" on-click="toggleTabCard"> |
| <div id="title-left-content"> |
| <div id="device-name"> |
| [[device]] |
| </div> |
| <span id="last-update-time">[[lastUpdateTime]]</span> |
| </div> |
| <div id="right-buttons"> |
| <paper-icon-button-light class="more-vert-button"> |
| <button id="menu-button" |
| on-click="onMenuButtonTap_" title="$i18n{moreActionsButton}"> |
| <div></div> |
| <div></div> |
| <div></div> |
| </button> |
| </paper-icon-button-light> |
| <paper-icon-button-light> |
| <button id="collapse-button" title$="[[getCollapseTitle_(opened)]]"> |
| <iron-icon icon="[[getCollapseIcon_(opened)]]" |
| id="dropdown-indicator"> |
| </iron-icon> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| </div> |
| |
| <iron-collapse opened="{{opened}}" id="collapse"> |
| <div id="tab-item-list"> |
| <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list" |
| notify-dom-change> |
| <div class="item-container"> |
| <div class="website-icon"></div> |
| <a href="[[tab.url]]" class="website-title" title="[[tab.title]]" |
| on-click="openTab_" on-contextmenu="onLinkRightClick_"> |
| <history-searched-label title="[[tab.title]]" |
| search-term="[[searchTerm]]"></history-searched-label> |
| </a> |
| </div> |
| <div class="window-separator" |
| hidden$="[[!isWindowSeparatorIndex_(index, separatorIndexes)]]"> |
| </div> |
| </template> |
| </div> |
| </iron-collapse> |
| </div> |
| </template> |
| <script src="chrome://history/synced_device_card.js"></script> |
| </dom-module> |