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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
/* 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/. */
"use strict";
/* import-globals-from /toolkit/content/customElements.js */
/* import-globals-from aboutaddonsCommon.js */
/* exported loadView */
// Used by external callers to load a specific view into the manager
function loadView(viewId) {
if (!gViewController.readyForLoadView) {
throw new Error("loadView called before about:addons is initialized");
}
gViewController.loadView(viewId);
}
/**
* Helper for saving and restoring the scroll offsets when a previously loaded
* view is accessed again.
*/
var ScrollOffsets = {
_key: null,
_offsets: new Map(),
canRestore: true,
setView(historyEntryId) {
this._key = historyEntryId;
this.canRestore = true;
},
getPosition() {
if (!this.canRestore) {
return { top: 0, left: 0 };
}
let { scrollTop: top, scrollLeft: left } = document.documentElement;
return { top, left };
},
save() {
if (this._key) {
this._offsets.set(this._key, this.getPosition());
}
},
restore() {
let { top = 0, left = 0 } = this._offsets.get(this._key) || {};
window.scrollTo({ top, left, behavior: "auto" });
},
};
var gViewController = {
currentViewId: null,
readyForLoadView: false,
get defaultViewId() {
if (!isDiscoverEnabled()) {
return "addons://list/extension";
}
return "addons://discover/";
},
isLoading: true,
// All historyEntryId values must be unique within one session, because the
// IDs are used to map history entries to page state. It is not possible to
// see whether a historyEntryId was used in history entries before this page
// was loaded, so start counting from a random value to avoid collisions.
// This is used for scroll offsets in aboutaddons.js
nextHistoryEntryId: Math.floor(Math.random() * 2 ** 32),
views: {},
initialize(container) {
this.container = container;
window.addEventListener("popstate", this);
window.addEventListener("unload", this, { once: true });
Services.obs.addObserver(this, "EM-ping");
},
handleEvent(e) {
if (e.type == "popstate") {
this.renderState(e.state);
return;
}
if (e.type == "unload") {
Services.obs.removeObserver(this, "EM-ping");
// eslint-disable-next-line no-useless-return
return;
}
},
observe(subject, topic, data) {
if (topic == "EM-ping") {
this.readyForLoadView = true;
Services.obs.notifyObservers(window, "EM-pong");
}
},
notifyEMLoaded() {
this.readyForLoadView = true;
Services.obs.notifyObservers(window, "EM-loaded");
},
notifyEMUpdateCheckFinished() {
// Notify the observer about a completed update check (currently only used in tests).
Services.obs.notifyObservers(null, "EM-update-check-finished");
},
defineView(viewName, renderFunction) {
if (this.views[viewName]) {
throw new Error(
`about:addons view ${viewName} should not be defined twice`
);
}
this.views[viewName] = renderFunction;
},
parseViewId(viewId) {
const matchRegex = /^addons:\/\/([^\/]+)\/(.*)$/;
const [, viewType, viewParam] = viewId.match(matchRegex) || [];
return { type: viewType, param: decodeURIComponent(viewParam) };
},
loadView(viewId, replace = false) {
viewId = viewId.startsWith("addons://") ? viewId : `addons://${viewId}`;
if (viewId == this.currentViewId) {
return Promise.resolve();
}
// Always rewrite history state instead of pushing incorrect state for initial load.
replace = replace || !this.currentViewId;
const state = {
view: viewId,
previousView: replace ? null : this.currentViewId,
historyEntryId: ++this.nextHistoryEntryId,
};
if (replace) {
history.replaceState(state, "");
} else {
history.pushState(state, "");
}
return this.renderState(state);
},
async renderState(state) {
let { param, type } = this.parseViewId(state.view);
if (!type || this.views[type] == null) {
console.warn(`No view for ${type} ${param}, switching to default`);
this.resetState();
return;
}
ScrollOffsets.save();
ScrollOffsets.setView(state.historyEntryId);
this.currentViewId = state.view;
this.isLoading = true;
// Perform tasks before view load
document.dispatchEvent(
new CustomEvent("view-selected", {
detail: { id: state.view, param, type },
})
);
// Render the fragment
this.container.setAttribute("current-view", type);
let fragment = await this.views[type](param);
// Clear and append the fragment
if (fragment) {
this.container.textContent = "";
this.container.append(fragment);
// Most content has been rendered at this point. The only exception are
// recommendations in the discovery pane and extension/theme list, because
// they rely on remote data. If loaded before, then these may be rendered
// within one tick, so wait a frame before restoring scroll offsets.
await new Promise(resolve => {
window.requestAnimationFrame(() => {
// Double requestAnimationFrame in case we reflow.
window.requestAnimationFrame(() => {
ScrollOffsets.restore();
resolve();
});
});
});
} else {
// Reset to default view if no given content
this.resetState();
return;
}
this.isLoading = false;
document.dispatchEvent(new CustomEvent("view-loaded"));
},
resetState() {
return this.loadView(this.defaultViewId, true);
},
};
|
