blob: 49b876627168325cf94c434e6008b8368a08fd36 (
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="../site_favicon.html">
<link rel="import" href="local_data_browser_proxy.html">
<link rel="import" href="site_settings_behavior.html">
<dom-module id="site-entry">
<template>
<style include="settings-shared">
.row-aligned {
display: flex;
flex-direction: row;
}
#toggleButton {
/** Use the minimum row height as the minimum click-target height. */
min-height: var(--settings-row-min-height);
}
.site-representation {
display: flex;
}
.second-line {
margin-top: 0.1em;
}
/* Data units such as "0 KB" should always read left-to-right. */
.data-unit {
direction: ltr;
unicode-bidi: isolate;
}
.list-frame {
padding-inline-end: 0;
}
.spacing {
padding-inline-start: 1ch;
}
</style>
<div id="collapseParent" focus-row-container>
<div class$="settings-box list-item [[getClassForIndex_(listIndex)]]">
<div id="toggleButton" class="start row-aligned two-line"
on-click="onSiteEntryTap_" actionable aria-expanded="false">
<site-favicon url="[[getSiteGroupIcon_(siteGroup)]]"></site-favicon>
<div class="middle text-elide" id="displayName">
<div class="site-representation">
<span class="url-directionality">[[displayName_]]</span>
<span class="secondary"
hidden$="[[!siteGroupScheme_(siteGroup)]]">
$i18nPolymer{siteSettingsSiteRepresentationSeparator}
</span>
<span class="secondary"
hidden$="[[!siteGroupScheme_(siteGroup)]]">
[[siteGroupScheme_(siteGroup)]]
</span>
</div>
<div class="second-line secondary">
<span class="data-unit">[[overallUsageString_]]</span>
<span id="cookies" hidden$="[[!siteGroup.numCookies]]">
· [[cookieString_]]
</span>
</div>
</div>
<cr-icon-button id="expandIcon" class="icon-expand-more"
hidden$="[[!grouped_(siteGroup)]]" aria-label$="[[displayName_]]"
aria-describedby="displayName" focus-row-control
focus-type="expand"></cr-icon-button>
<cr-icon-button class="subpage-arrow"
hidden$="[[grouped_(siteGroup)]]" aria-label$="[[displayName_]]"
aria-describedby="displayName"
focus-row-control focus-type="show-detail"></cr-icon-button>
</div>
<div class="row-aligned" hidden$="[[!grouped_(siteGroup)]]">
<div class="separator"></div>
<cr-icon-button class="icon-more-vert" id="overflowMenuButton"
title="$i18n{moreActions}" on-click="showOverflowMenu_"
focus-row-control focus-type="more-actions"></cr-icon-button>
</div>
</div>
<cr-lazy-render id="originList">
<template>
<iron-collapse id="collapseChild" no-animation>
<div class="list-frame">
<template is="dom-repeat" items="[[siteGroup.origins]]">
<div class="settings-box list-item" on-click="onOriginTap_"
actionable>
<site-favicon url="[[item.origin]]"></site-favicon>
<div class="site-representation middle text-elide">
<span id="originSiteRepresentation"
class="url-directionality">
[[originRepresentation_(item)]]
</span>
<span class="secondary"
hidden$="[[!originScheme_(item)]]">
$i18nPolymer{siteSettingsSiteRepresentationSeparator}
</span>
<span class="secondary"
hidden$="[[!originScheme_(item)]]">
[[originScheme_(item)]]
</span>
<!--Define a spacing span so that when the direction is rtl,
the spacing is still showing correctly. This is because the
data-unit class is set to be ltr so the padding will be in
wrong place if we put padding in that span.-->
<span class="spacing" hidden$="[[!item.usage]]"></span>
<span class="secondary data-unit" hidden$="[[!item.usage]]">
[[originUsagesItem_(originUsages_.*, index)]]
</span>
<span class="secondary" hidden$="[[!item.numCookies]]">
·
[[originCookiesItem_(cookiesNum_.*, index)]]
</span>
</div>
<cr-icon-button class="subpage-arrow"
aria-labelledby$="originSiteRepresentation"
focus-row-control focus-type="detailed-sites">
</cr-icon-button>
</div>
</template>
</div>
</iron-collapse>
</template>
</cr-lazy-render>
</div>
</template>
<script src="site_entry.js"></script>
</dom-module>
|
