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
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import { html, styleMap } from "chrome://global/content/vendor/lit.all.mjs";
import { SidebarPage } from "./sidebar-page.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "chrome://global/content/elements/moz-button.mjs";
const l10nMap = new Map([
["viewHistorySidebar", "sidebar-customize-history"],
["viewTabsSidebar", "sidebar-customize-synced-tabs"],
]);
export class SidebarCustomize extends SidebarPage {
static queries = {
toolInputs: { all: ".customize-firefox-tools input" },
};
connectedCallback() {
super.connectedCallback();
window.addEventListener("SidebarItemChanged", this);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener("SidebarItemChanged", this);
}
get sidebarLauncher() {
return this.getWindow().document.querySelector("sidebar-launcher");
}
getWindow() {
return window.browsingContext.embedderWindowGlobal.browsingContext.window;
}
closeCustomizeView(e) {
e.preventDefault();
let view = e.target.getAttribute("view");
this.getWindow().SidebarController.toggle(view);
}
getTools() {
const toolsMap = new Map(
[...this.getWindow().SidebarController.toolsAndExtensions]
// eslint-disable-next-line no-unused-vars
.filter(([key, val]) => !val.extensionId)
);
return toolsMap;
}
handleEvent(e) {
switch (e.type) {
case "SidebarItemChanged":
this.requestUpdate();
break;
}
}
async onToggleInput(e) {
e.preventDefault();
this.getWindow().SidebarController.toggleTool(e.target.id);
}
getInputL10nId(view) {
return l10nMap.get(view);
}
inputTemplate(tool) {
return html`<div class="input-wrapper">
<input
type="checkbox"
id=${tool.view}
name=${tool.view}
@change=${this.onToggleInput}
?checked=${!tool.disabled}
/>
<label for=${tool.view}
><span class="icon ghost-icon" style=${styleMap({
"--tool-icon": tool.icon,
})} role="presentation"/></span><span
data-l10n-id=${this.getInputL10nId(tool.view)}
></span
></label>
</div>`;
}
render() {
return html`
${this.stylesheet()}
<link rel="stylesheet" href="chrome://browser/content/sidebar/sidebar-customize.css"></link>
<div class="container">
<div class="customize-header">
<h2 data-l10n-id="sidebar-customize-header"></h2>
<moz-button
class="customize-close-button"
@click=${this.closeCustomizeView}
view="viewCustomizeSidebar"
size="default"
type="icon ghost"
>
</moz-button>
</div>
<div class="customize-firefox-tools">
<h5 data-l10n-id="sidebar-customize-firefox-tools"></h5>
<div class="inputs">
${[...this.getTools().values()].map(tool => this.inputTemplate(tool))}
</div>
</div>
</div>
`;
}
}
customElements.define("sidebar-customize", SidebarCustomize);
|
