blob: e49ca4f078d9475cb48d1706480c77457be892a8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/typography.html">
<link rel="import" href="chrome://history/browser_service.html">
<link rel="import" href="chrome://history/shared_style.html">
<dom-module id="history-side-bar">
<template>
<style include="shared-style cr-icons">
:host {
display: flex;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
width: var(--side-bar-width);
}
div.separator {
background-color: var(--separator-color);
flex-shrink: 0;
height: 1px;
margin: 8px 0;
}
#clear-browsing-data {
justify-content: space-between;
}
#clear-browsing-data .cr-icon {
-webkit-margin-end: 20px;
}
iron-selector {
background-color: transparent;
color: var(--sidebar-unselected-color);
display: flex;
flex: 1;
flex-direction: column;
padding-top: 8px;
user-select: none;
}
iron-selector > a {
/* Ensure the focus outline appears correctly (crbug.com/655503). */
-webkit-margin-end: 4px;
-webkit-padding-start: 24px;
align-items: center;
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
font-weight: 500;
min-height: 40px;
position: relative;
text-decoration: none;
}
iron-selector > a.iron-selected {
color: var(--link-color);
}
iron-selector > a[disabled] {
opacity: 0.65;
pointer-events: none;
}
#spacer {
flex: 1;
}
#footer {
color: var(--sidebar-footer-text-color);
width: var(--side-bar-width);
}
#footer-text {
-webkit-padding-end: 16px;
-webkit-padding-start: 24px;
margin: 24px 0;
}
#footer a {
text-decoration: none;
}
</style>
<iron-selector id="menu" selected="{{selectedPage}}"
selectable=".page-item" attr-for-selected="path"
on-iron-activate="onSelectorActivate_">
<a href="/" class="page-item" path="history" on-click="onItemClick_">
$i18n{historyMenuItem}
<paper-ripple></paper-ripple>
</a>
<a href="/syncedTabs" class="page-item" path="syncedTabs"
on-click="onItemClick_">
$i18n{openTabsMenuItem}
<paper-ripple></paper-ripple>
</a>
<div class="separator"></div>
<a id="clear-browsing-data"
href="chrome://settings/clearBrowserData"
on-click="onClearBrowsingDataTap_"
disabled$="[[guestSession_]]"
tabindex$="[[computeClearBrowsingDataTabIndex_(guestSession_)]]">
$i18n{clearBrowsingData}
<div class="cr-icon icon-external"></div>
<paper-ripple id="cbd-ripple"></paper-ripple>
</a>
<div id="spacer"></div>
<div id="footer" hidden="[[!showFooter]]">
<div class="separator"></div>
<div id="footer-text">$i18nRaw{sidebarFooter}</div>
</div>
</iron-selector>
</template>
<script src="chrome://history/side_bar.js"></script>
</dom-module>
|
