forked from chromium/chromium
-
Notifications
You must be signed in to change notification settings - Fork 0
/
resource_loader.js
248 lines (224 loc) · 8.03 KB
/
resource_loader.js
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* @fileoverview Deferred resource loader for OOBE/Login screens.
*/
cr.define('cr.ui.login.ResourceLoader', function() {
'use strict';
// Deferred assets.
var ASSETS = {};
/**
* Register assets for deferred loading. When the bundle is loaded
* assets will be added to the current page's DOM: <link> and <script>
* tags pointing to the CSS and JavaScript will be added to the
* <head>, and HTML will be appended to a specified element.
*
* @param {Object} desc Descriptor for the asset bundle
* @param {string} desc.id Unique identifier for the asset bundle.
* @param {Array=} desc.js URLs containing JavaScript sources.
* @param {Array=} desc.css URLs containing CSS rules.
* @param {Array<Object>=} desc.html Descriptors for HTML fragments,
* each of which has a 'url' property and a 'targetID' property that
* specifies the node under which the HTML should be appended. If 'targetID'
* is null, then the fetched body will be appended to document.body.
*
* Example:
* ResourceLoader.registerAssets({
* id: 'bundle123',
* js: ['//foo.com/src.js', '//bar.com/lib.js'],
* css: ['//foo.com/style.css'],
* html: [{ url: '//foo.com/tmpls.html' targetID: 'tmpls'}]
* });
*
* Note: to avoid cross-site requests, all HTML assets must be served
* from the same host as the rendered page. For example, if the
* rendered page is served as chrome://oobe, then all the HTML assets
* must be served as chrome://oobe/path/to/something.html.
*/
function registerAssets(desc) {
var html = desc.html || [];
var css = desc.css || [];
var js = desc.js || [];
ASSETS[desc.id] = {
html: html, css: css, js: js,
loaded: false,
count: html.length + css.length + js.length
};
}
/**
* Determines whether an asset bundle is defined for a specified id.
* @param {string} id The possible identifier.
*/
function hasDeferredAssets(id) {
return id in ASSETS;
}
/**
* Determines whether an asset bundle has already been loaded.
* @param {string} id The identifier of the asset bundle.
*/
function alreadyLoadedAssets(id) {
return hasDeferredAssets(id) && ASSETS[id].loaded;
}
/**
* Load a stylesheet into the current document.
* @param {string} id Identifier of the stylesheet's asset bundle.
* @param {string} url The URL resolving to a stylesheet.
*/
function loadCSS(id, url) {
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', url);
link.onload = resourceLoaded.bind(null, id);
document.head.appendChild(link);
}
/**
* Load a script into the current document.
* @param {string} id Identifier of the script's asset bundle.
* @param {string} url The URL resolving to a script.
*/
function loadJS(id, url) {
var script = document.createElement('script');
script.src = url;
script.onload = resourceLoaded.bind(null, id);
document.head.appendChild(script);
}
/**
* Move DOM nodes from one parent element to another.
* @param {HTMLElement} from Element whose children should be moved.
* @param {HTMLElement} to Element to which nodes should be appended.
*/
function moveNodes(from, to) {
Array.prototype.forEach.call(from.children, function(child) {
to.appendChild(document.importNode(child, true));
});
}
/**
* Tests whether an XMLHttpRequest has successfully finished loading.
* @param {string} url The requested URL.
* @param {XMLHttpRequest} xhr The XHR object.
*/
function isSuccessful(url, xhr) {
var fileURL = /^file:\/\//;
return xhr.readyState == 4 &&
(xhr.status == 200 || fileURL.test(url) && xhr.status == 0);
}
/*
* Load a chunk of HTML into the current document.
* @param {string} id Identifier of the page's asset bundle.
* @param {Object} html Descriptor of the HTML to fetch.
* @param {string} html.url The URL resolving to some HTML.
* @param {string?} html.targetID The element ID to which the retrieved
* HTML nodes should be appended. If null, then the elements will be appended
* to document.body instead.
*/
function loadHTML(id, html) {
var xhr = new XMLHttpRequest();
xhr.open('GET', html.url);
xhr.onreadystatechange = function() {
if (isSuccessful(html.url, xhr)) {
moveNodes(this.responseXML.head, document.head);
moveNodes(this.responseXML.body, $(html.targetID) || document.body);
resourceLoaded(id);
}
};
xhr.responseType = 'document';
xhr.send();
}
/**
* Record that a resource has been loaded for an asset bundle. When
* all the resources have been loaded the callback that was specified
* in the loadAssets call is invoked.
* @param {string} id Identifier of the asset bundle.
*/
function resourceLoaded(id) {
var assets = ASSETS[id];
assets.count--;
if (assets.count == 0)
finishedLoading(id);
}
/**
* Finishes loading an asset bundle.
* @param {string} id Identifier of the asset bundle.
*/
function finishedLoading(id) {
var assets = ASSETS[id];
console.log('Finished loading asset bundle ' + id);
assets.loaded = true;
window.setTimeout(function() {
assets.callback();
chrome.send('screenAssetsLoaded', [id]);
}, 0);
}
/**
* Load an asset bundle, invoking the callback when finished.
* @param {string} id Identifier for the asset bundle to load.
* @param {function()=} callback Function to invoke when done loading.
*/
function loadAssets(id, callback) {
var assets = ASSETS[id];
assets.callback = callback || function() {};
console.log('Loading asset bundle ' + id);
if (alreadyLoadedAssets(id))
console.warn('asset bundle', id, 'already loaded!');
if (assets.count == 0) {
finishedLoading(id);
} else {
assets.css.forEach(loadCSS.bind(null, id));
assets.js.forEach(loadJS.bind(null, id));
assets.html.forEach(loadHTML.bind(null, id));
}
}
/**
* Load an asset bundle after the document has been loaded and Chrome is idle.
* @param {string} id Identifier for the asset bundle to load.
* @param {function()=} callback Function to invoke when done loading.
* @param {number=} opt_idleTimeoutMs The maximum amount of time to wait for
* an idle notification.
*/
function loadAssetsOnIdle(id, callback, opt_idleTimeoutMs) {
opt_idleTimeoutMs = opt_idleTimeoutMs || 250;
var loadOnIdle = function() {
window.requestIdleCallback(function() {
loadAssets(id, callback);
}, { timeout: opt_idleTimeoutMs });
};
if (document.readyState == 'loading') {
window.addEventListener('DOMContentLoaded', loadOnIdle);
} else {
// DOMContentLoaded has already been called if document.readyState is
// 'interactive' or 'complete', so invoke the callback immediately.
loadOnIdle();
}
}
/**
* Wait until the element with the given |id| has finished its layout,
* specifically, after it has an offsetHeight > 0.
* @param {string|function()} selector Identifier of the element to wait
* or a callback function to obtain element to wait for.
* @param {function()} callback Function to invoke when done loading.
*/
function waitUntilLayoutComplete(selector, callback) {
if (typeof selector == 'string') {
var id = selector;
selector = function() { return $(id) };
}
var doWait = function() {
var element = selector();
if (!element || !element.offsetHeight) {
requestAnimationFrame(doWait);
return;
}
callback(element);
};
requestAnimationFrame(doWait);
}
return {
alreadyLoadedAssets: alreadyLoadedAssets,
hasDeferredAssets: hasDeferredAssets,
loadAssets: loadAssets,
loadAssetsOnIdle: loadAssetsOnIdle,
waitUntilLayoutComplete: waitUntilLayoutComplete,
registerAssets: registerAssets
};
});