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
|
<style>
#content {
color: var(--cros-color-primary);
display: flex;
flex-direction: column;
}
#screen-title {
font-family: var(--cros-font-family-google-sans);
font-size: 24px;
font-weight: 500;
margin-bottom: 8px;
margin-top: 16px;
}
#screen-subtitle {
align-items: center;
color: var(--cros-color-secondary);
display: flex;
font: var(--cros-body-1-font);
margin-top: 8px;
}
#extension-title {
align-items: center;
display: flex;
margin-top: 16px;
}
#extension-icon {
height: 32px;
margin-inline-end: 16px;
width: 32px;
}
#extension-name {
font-family: var(--cros-font-family-google-sans);
font-size: 16px;
font-weight: 500;
margin: 0;
}
#extension-permissions-container {
flex-grow: 1;
margin: 4px 8px 0 48px;
overflow-y: scroll;
}
#permissions-header {
color: var(--cros-color-secondary);
font: var(--cros-body-2-font);
margin: 8px 8px 0 48px;
}
</style>
<div part="content" id="content">
<h2 id="screen-title">[[screenTitle]]</h2>
<template is="dom-if" if="[[screenSubtitle]]">
<div id="screen-subtitle">[[screenSubtitle]]</div>
</template>
<div id="extension-title">
<img id="extension-icon" src="[[extensionIconSrc]]" alt=""></img>
<h3 id="extension-name">[[extensionName]]</h3>
</div>
<template is="dom-if" if="[[extensionPermissions.length]]">
<span id="permissions-header">
$i18n{extensionApprovalsPermissionsHeader}
</span>
<div id="extension-permissions-container">
<template is="dom-repeat" items="[[extensionPermissions]]">
<extension-permission
permission="[[item.permission]]"
detail="[[item.details]]">
</extension-permission>
</template>
</div>
</template>
</div>
|
