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
140
141
142
143
144
145
146
147
148
149
150
|
<style include="shared-style">
.items-container,
#content-wrapper {
--extensions-card-width: 400px;
}
#container {
box-sizing: border-box;
height: 100%;
}
#content-wrapper {
min-width: var(--extensions-card-width);
padding: 24px 60px 64px;
}
#content-wrapper:has(extensions-review-panel) {
padding-top: 14px;
}
.empty-list-message {
color: #6e6e6e;
font-size: 123%; /* Should be 16px when 100% is 13px. */
font-weight: 500;
margin-top: 80px;
text-align: center;
}
.extension-title-container {
font-size: 15px;
font-weight: 400;
margin: 0 0 16px 5px;
}
@media (prefers-color-scheme: dark) {
.empty-list-message {
color: var(--cr-secondary-text-color);
}
}
.items-container {
--grid-gutter: 12px;
display: grid;
grid-column-gap: var(--grid-gutter);
grid-row-gap: var(--grid-gutter);
grid-template-columns: repeat(auto-fill, var(--extensions-card-width));
justify-content: center;
margin: auto;
max-width: calc(var(--extensions-card-width) * var(--max-columns) +
var(--grid-gutter) * var(--max-columns));
}
.items-container.review-panel-container :first-child {
max-width: calc(var(--extensions-card-width) * 2 + var(--grid-gutter) * 2);
grid-column: 1 / -1;
}
extensions-review-panel {
margin: 15px auto;
width: 100%;
}
#checkup-container {
grid-column: 1 / -1;
/* The checkup card should be at least as tall as an extensions item card.*/
min-height: var(--extensions-card-height);
}
extensions-item {
grid-column-start: auto;
grid-row-start: auto;
}
#app-title {
color: var(--cr-primary-text-color);
font-size: 123%;
font-weight: 400;
letter-spacing: .25px;
margin-bottom: 12px;
margin-top: 21px;
padding-bottom: 4px;
padding-top: 8px;
}
managed-footnote {
border-top: none;
/* #content-wrapper has a 24px margin-top. This overrides that
* margin-top, so the only space left is this element's 12px
* padding-bottom.
*/
margin-bottom: -24px;
padding-bottom: 12px;
padding-top: 12px;
/* The next element spills over this element. This ensures the link
* is clickable. */
z-index: 1;
}
</style>
<div id="container">
<managed-footnote hidden="[[filter]]"></managed-footnote>
<div id="content-wrapper" style="--max-columns: [[maxColumns_]];">
<div class="items-container review-panel-container">
<template is="dom-if" if="[[showSafetyCheckReviewPanel_]]" restamp>
<extensions-review-panel extensions="[[extensions]]" delegate="[[delegate]]">
</extensions-review-panel>
<h2 class="extension-title-container">$i18n{safetyCheckAllExtensions}</h2>
</template>
</div>
<div id="no-items" class="empty-list-message"
hidden$="[[!shouldShowEmptyItemsMessage_(
apps.length, extensions.length)]]">
<span on-click="onNoExtensionsClick_">
$i18nRaw{noExtensionsOrApps}
</span>
</div>
<div id="no-search-results" class="empty-list-message"
hidden$="[[!shouldShowEmptySearchMessage_(
shownAppsCount_, shownExtensionsCount_, apps, extensions)]]">
<span>$i18n{noSearchResults}</span>
</div>
<div class="items-container" hidden="[[!shownExtensionsCount_]]">
<!-- Render only a few items first, to improve initial render time,
then render the remaining items on a different frame. Value of 3
was chosen by experimentation, and it is a good trade-off between
initial render time and total render time. -->
<template is="dom-repeat" items="[[extensions]]" initial-count="3"
filter="[[computedFilter_]]"
rendered-item-count="{{shownExtensionsCount_::dom-change}}">
<extensions-item id="[[item.id]]" data="[[item]]"
safety-check-showing="[[hasSafetyCheckTriggeringExtension_]]"
delegate="[[delegate]]" in-dev-mode="[[inDevMode]]">
</extensions-item>
</template>
</div>
<div hidden="[[!shownAppsCount_]]">
<!-- app-title needs to left-align with the grid content below, and
the easiest way to achieve this is to make it a grid as well. -->
<h2 id="app-title" class="items-container">$i18n{appsTitle}</h2>
<div class="items-container">
<template is="dom-repeat" items="[[apps]]" initial-count="3"
filter="[[computedFilter_]]"
rendered-item-count="{{shownAppsCount_::dom-change}}">
<extensions-item id="[[item.id]]" data="[[item]]"
delegate="[[delegate]]" in-dev-mode="[[inDevMode]]">
</extensions-item>
</template>
</div>
</div>
</div>
</div>
|
