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
|
// Copyright 2013 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import '/strings.m.js';
import {assert} from 'chrome://resources/js/assert.js';
import {addWebUiListener, sendWithPromise} from 'chrome://resources/js/cr.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
import {isChromeOS} from 'chrome://resources/js/platform.js';
import {getRequiredElement} from 'chrome://resources/js/util.js';
import {render} from 'chrome://resources/lit/v3_0/lit.rollup.js';
import {getHtml} from './component.html.js';
interface Component {
id: string;
name: string;
status: string;
version: string;
}
export interface ComponentsData {
components: Component[];
}
/**
* An array of the latest component data including ID, name, status and
* version. This is populated in returnComponentsData() for the convenience of
* tests.
*/
let currentComponentsData: Component[]|null = null;
/**
* Takes the |componentsData| input argument which represents data about the
* currently installed components and populates the Lit HTML template with
* that data. It expects an object structure like the above.
* @param componentsData Detailed info about installed components.
* Same expected format as returnComponentsData().
*/
function renderTemplate(componentsData: ComponentsData) {
render(getHtml(componentsData), getRequiredElement('component-placeholder'));
}
/**
* Asks the C++ ComponentsDOMHandler to get details about the installed
* components.
*/
function requestComponentsData() {
sendWithPromise('requestComponentsData').then(returnComponentsData);
}
/**
* Called by the WebUI to re-populate the page with data representing the
* current state of installed components. The componentsData will also be
* stored in currentComponentsData to be available to JS for testing purposes.
* @param componentsData Detailed info about installed components.
*/
function returnComponentsData(componentsData: ComponentsData) {
const bodyContainer = getRequiredElement('body-container');
const body = document.body;
bodyContainer.style.visibility = 'hidden';
body.className = '';
// Initialize |currentComponentsData|, which can also be updated in
// onComponentEvent() later.
currentComponentsData = componentsData.components;
renderTemplate(componentsData);
// Add handlers to dynamically created HTML elements.
const links =
document.body.querySelectorAll<HTMLButtonElement>('.button-check-update');
for (const link of links) {
link.onclick = function(e) {
handleCheckUpdate(link);
e.preventDefault();
};
}
// Disable some controls for Guest mode in ChromeOS.
if (isChromeOS && loadTimeData.getBoolean('isGuest')) {
document.body.querySelectorAll<HTMLButtonElement>('[guest-disabled]')
.forEach(function(element) {
element.disabled = true;
});
}
bodyContainer.style.visibility = 'visible';
body.className = 'show-tmi-mode-initial';
}
interface ComponentEvent {
event: string;
id?: string;
version?: string;
}
/**
* Listener called when state of component updater service changes.
* @param event Contains event and component ID. Component ID is
* optional.
*/
function onComponentEvent(event: ComponentEvent) {
if (!event.id) {
return;
}
const id = event.id;
assert(currentComponentsData);
const filteredComponents = currentComponentsData.filter(function(entry) {
return entry.id === id;
});
// A component may be added from another page so the status and version
// should only be updated if the component is listed on this page.
if (filteredComponents.length === 0) {
return;
}
const component = filteredComponents[0];
assert(component);
const status = event.event;
getRequiredElement('status-' + id).textContent = status;
component.status = status;
if (event.version) {
const version = event.version;
getRequiredElement('version-' + id).textContent = version;
component.version = version;
}
}
/**
* Handles an 'enable' or 'disable' button getting clicked.
* @param node The HTML element representing the component being checked for
* update.
*/
function handleCheckUpdate(node: HTMLElement) {
getRequiredElement('status-' + String(node.id)).textContent =
loadTimeData.getString('checkingLabel');
// Tell the C++ ComponentssDOMHandler to check for update.
chrome.send('checkUpdate', [String(node.id)]);
}
// Get data and have it displayed upon loading.
document.addEventListener('DOMContentLoaded', function() {
addWebUiListener('component-event', onComponentEvent);
requestComponentsData();
});
|
