OLD | NEW |
---|---|
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * Javascript for DeviceTable UI, served from chrome://bluetooth-internals/. | 6 * Javascript for DeviceTable UI, served from chrome://bluetooth-internals/. |
7 */ | 7 */ |
8 | 8 |
9 cr.define('device_table', function() { | 9 cr.define('device_table', function() { |
10 var COLUMNS = { | 10 var COLUMNS = { |
11 NAME: 0, | 11 NAME: 0, |
12 ADDRESS: 1, | 12 ADDRESS: 1, |
13 RSSI: 2, | 13 RSSI: 2, |
14 SERVICES: 3, | 14 SERVICES: 3, |
15 CONNECTION_STATE: 4, | 15 CONNECTION_STATE: 4, |
16 INSPECT_LINK: 5, | 16 LINKS: 5, |
scheib
2017/01/11 02:16:14
In screenshot the links column doesn't have a head
mbrunson
2017/01/11 21:22:59
Done.
| |
17 }; | 17 }; |
18 | 18 |
19 /** | 19 /** |
20 * A table that lists the devices and responds to changes in the given | 20 * A table that lists the devices and responds to changes in the given |
21 * DeviceCollection. Fires events for inspection requests from listed | 21 * DeviceCollection. Fires events for inspection requests from listed |
22 * devices. | 22 * devices. |
23 * @constructor | 23 * @constructor |
24 * @extends {HTMLTableElement} | 24 * @extends {HTMLTableElement} |
25 */ | 25 */ |
26 var DeviceTable = cr.ui.define(function() { | 26 var DeviceTable = cr.ui.define(function() { |
(...skipping 27 matching lines...) Expand all Loading... | |
54 | 54 |
55 this.devices_ = deviceCollection; | 55 this.devices_ = deviceCollection; |
56 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); | 56 this.devices_.addEventListener('sorted', this.redraw_.bind(this)); |
57 this.devices_.addEventListener('change', this.handleChange_.bind(this)); | 57 this.devices_.addEventListener('change', this.handleChange_.bind(this)); |
58 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); | 58 this.devices_.addEventListener('splice', this.handleSplice_.bind(this)); |
59 | 59 |
60 this.redraw_(); | 60 this.redraw_(); |
61 }, | 61 }, |
62 | 62 |
63 /** | 63 /** |
64 * Fires a forget pressed event for the row |index|. | |
65 * @param {number} index | |
66 * @private | |
67 */ | |
68 handleForgetClick_: function(index) { | |
69 var event = new CustomEvent('forgetpressed', { | |
70 bubbles: true, | |
71 detail: { | |
72 address: this.devices_.item(index).address, | |
73 } | |
74 }); | |
75 this.dispatchEvent(event); | |
76 }, | |
77 | |
78 /** | |
64 * Updates table row on change event of the device collection. | 79 * Updates table row on change event of the device collection. |
80 * @param {!Event} event | |
65 * @private | 81 * @private |
66 * @param {!Event} event | |
67 */ | 82 */ |
68 handleChange_: function(event) { | 83 handleChange_: function(event) { |
69 this.updateRow_(this.devices_.item(event.index), event.index); | 84 this.updateRow_(this.devices_.item(event.index), event.index); |
70 }, | 85 }, |
71 | 86 |
72 /** | 87 /** |
73 * Fires a inspect pressed event for the row |index|. | 88 * Fires an inspect pressed event for the row |index|. |
89 * @param {number} index | |
74 * @private | 90 * @private |
75 * @param {number} index | |
76 */ | 91 */ |
77 handleInspectClick_: function(index) { | 92 handleInspectClick_: function(index) { |
78 var event = new CustomEvent('inspectpressed', { | 93 var event = new CustomEvent('inspectpressed', { |
79 bubbles: true, | 94 bubbles: true, |
80 detail: { | 95 detail: { |
81 address: this.devices_.item(index).address, | 96 address: this.devices_.item(index).address, |
82 } | 97 } |
83 }); | 98 }); |
84 this.dispatchEvent(event); | 99 this.dispatchEvent(event); |
85 }, | 100 }, |
86 | 101 |
87 /** | 102 /** |
88 * Updates table row on splice event of the device collection. | 103 * Updates table row on splice event of the device collection. |
104 * @param {!Event} event | |
89 * @private | 105 * @private |
90 * @param {!Event} event | |
91 */ | 106 */ |
92 handleSplice_: function(event) { | 107 handleSplice_: function(event) { |
93 event.removed.forEach(function() { | 108 event.removed.forEach(function() { |
94 this.body_.deleteRow(event.index); | 109 this.body_.deleteRow(event.index); |
95 }, this); | 110 }, this); |
96 | 111 |
97 event.added.forEach(function(device, index) { | 112 event.added.forEach(function(device, index) { |
98 this.insertRow_(device, event.index + index); | 113 this.insertRow_(device, event.index + index); |
99 }, this); | 114 }, this); |
100 }, | 115 }, |
101 | 116 |
102 /** | 117 /** |
103 * Inserts a new row at |index| and updates it with info from |device|. | 118 * Inserts a new row at |index| and updates it with info from |device|. |
104 * @private | |
105 * @param {!interfaces.BluetoothDevice.DeviceInfo} device | 119 * @param {!interfaces.BluetoothDevice.DeviceInfo} device |
106 * @param {?number} index | 120 * @param {?number} index |
121 * @private | |
107 */ | 122 */ |
108 insertRow_: function(device, index) { | 123 insertRow_: function(device, index) { |
109 var row = this.body_.insertRow(index); | 124 var row = this.body_.insertRow(index); |
110 row.id = device.address; | 125 row.id = device.address; |
111 | 126 |
112 for (var i = 0; i < this.headers_.length; i++) { | 127 for (var i = 0; i < this.headers_.length; i++) { |
113 row.insertCell(); | 128 row.insertCell(); |
114 } | 129 } |
115 | 130 |
116 // Make two extra cells for the inspect link and connect errors. | 131 // Make two extra cells for the inspect link and connect errors. |
117 var inspectCell = row.insertCell(); | 132 var inspectCell = row.insertCell(); |
118 | 133 |
119 var inspectLink = document.createElement('a', 'action-link'); | 134 var inspectLink = document.createElement('a', 'action-link'); |
135 inspectLink.textContent = 'Inspect'; | |
120 inspectCell.appendChild(inspectLink); | 136 inspectCell.appendChild(inspectLink); |
121 inspectLink.addEventListener('click', function() { | 137 inspectLink.addEventListener('click', function() { |
122 this.handleInspectClick_(row.sectionRowIndex); | 138 this.handleInspectClick_(row.sectionRowIndex); |
123 }.bind(this)); | 139 }.bind(this)); |
124 | 140 |
141 var forgetLink = document.createElement('a', 'action-link'); | |
142 forgetLink.textContent = 'Forget'; | |
143 inspectCell.appendChild(forgetLink); | |
144 forgetLink.addEventListener('click', function() { | |
145 this.handleForgetClick_(row.sectionRowIndex); | |
146 }.bind(this)); | |
147 | |
125 this.updateRow_(device, row.sectionRowIndex); | 148 this.updateRow_(device, row.sectionRowIndex); |
126 }, | 149 }, |
127 | 150 |
128 /** | 151 /** |
129 * Deletes and recreates the table using the cached |devices_|. | 152 * Deletes and recreates the table using the cached |devices_|. |
130 * @private | 153 * @private |
131 */ | 154 */ |
132 redraw_: function() { | 155 redraw_: function() { |
133 this.removeChild(this.body_); | 156 this.removeChild(this.body_); |
134 this.appendChild(document.createElement('tbody')); | 157 this.appendChild(document.createElement('tbody')); |
135 this.body_ = this.tBodies[0]; | 158 this.body_ = this.tBodies[0]; |
136 this.body_.classList.add('table-body'); | 159 this.body_.classList.add('table-body'); |
137 | 160 |
138 for (var i = 0; i < this.devices_.length; i++) { | 161 for (var i = 0; i < this.devices_.length; i++) { |
139 this.insertRow_(this.devices_.item(i)); | 162 this.insertRow_(this.devices_.item(i)); |
140 } | 163 } |
141 }, | 164 }, |
142 | 165 |
143 /** | 166 /** |
144 * Updates the row at |index| with the info from |device|. | 167 * Updates the row at |index| with the info from |device|. |
145 * @private | |
146 * @param {!interfaces.BluetoothDevice.DeviceInfo} device | 168 * @param {!interfaces.BluetoothDevice.DeviceInfo} device |
147 * @param {number} index | 169 * @param {number} index |
170 * @private | |
148 */ | 171 */ |
149 updateRow_: function(device, index) { | 172 updateRow_: function(device, index) { |
150 var row = this.body_.rows[index]; | 173 var row = this.body_.rows[index]; |
151 assert(row, 'Row ' + index + ' is not in the table.'); | 174 assert(row, 'Row ' + index + ' is not in the table.'); |
152 | 175 |
153 row.classList.toggle('removed', device.removed); | 176 row.classList.toggle('removed', device.removed); |
154 | 177 |
155 var inspectLink = row.cells[COLUMNS.INSPECT_LINK].children[0]; | 178 var forgetLink = row.cells[COLUMNS.LINKS].children[1]; |
156 inspectLink.disabled = false; | 179 forgetLink.disabled = !device.inspecting; |
157 switch (device.connectionStatus) { | |
158 case device_collection.ConnectionStatus.DISCONNECTED: | |
159 inspectLink.textContent = 'Inspect'; | |
160 break; | |
161 case device_collection.ConnectionStatus.CONNECTED: | |
162 inspectLink.textContent = 'Forget'; | |
163 break; | |
164 case device_collection.ConnectionStatus.CONNECTING: | |
165 inspectLink.disabled = true; | |
166 break; | |
167 default: assert('case not handled'); | |
168 } | |
169 | 180 |
170 // Update the properties based on the header field path. | 181 // Update the properties based on the header field path. |
171 for (var i = 0; i < this.headers_.length; i++) { | 182 for (var i = 0; i < this.headers_.length; i++) { |
172 var header = this.headers_[i]; | 183 var header = this.headers_[i]; |
173 var propName = header.dataset.field; | 184 var propName = header.dataset.field; |
174 | 185 |
175 var parts = propName.split('.'); | 186 var parts = propName.split('.'); |
176 var obj = device; | 187 var obj = device; |
177 while (obj != null && parts.length > 0) { | 188 while (obj != null && parts.length > 0) { |
178 var part = parts.shift(); | 189 var part = parts.shift(); |
179 obj = obj[part]; | 190 obj = obj[part]; |
180 } | 191 } |
181 | 192 |
182 if (propName == 'is_gatt_connected') { | 193 if (propName == 'is_gatt_connected') { |
183 obj = obj ? 'Connected' : 'Not Connected'; | 194 obj = obj ? 'Connected' : 'Not Connected'; |
184 } | 195 } |
185 | 196 |
186 var cell = row.cells[i]; | 197 var cell = row.cells[i]; |
187 cell.textContent = obj == null ? 'Unknown' : obj; | 198 cell.textContent = obj == null ? 'Unknown' : obj; |
188 cell.dataset.label = header.textContent; | 199 cell.dataset.label = header.textContent; |
189 } | 200 } |
190 }, | 201 }, |
191 }; | 202 }; |
192 | 203 |
193 return { | 204 return { |
194 DeviceTable: DeviceTable, | 205 DeviceTable: DeviceTable, |
195 }; | 206 }; |
196 }); | 207 }); |
OLD | NEW |