OLD | NEW |
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 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 cr.define('policy', function() { | 4 cr.define('policy', function() { |
5 | 5 |
6 /** | 6 /** |
7 * A hack to check if we are displaying the mobile version of this page by | 7 * A hack to check if we are displaying the mobile version of this page by |
8 * checking if the first column is hidden. | 8 * checking if the first column is hidden. |
9 * @return {boolean} True if this is the mobile version. | 9 * @return {boolean} True if this is the mobile version. |
10 */ | 10 */ |
11 var isMobilePage = function() { | 11 var isMobilePage = function() { |
12 return document.defaultView.getComputedStyle(document.querySelector( | 12 return document.defaultView |
13 '.scope-column')).display == 'none'; | 13 .getComputedStyle(document.querySelector('.scope-column')) |
| 14 .display == 'none'; |
14 }; | 15 }; |
15 | 16 |
16 /** | 17 /** |
17 * A box that shows the status of cloud policy for a device or user. | 18 * A box that shows the status of cloud policy for a device or user. |
18 * @constructor | 19 * @constructor |
19 * @extends {HTMLFieldSetElement} | 20 * @extends {HTMLFieldSetElement} |
20 */ | 21 */ |
21 var StatusBox = cr.ui.define(function() { | 22 var StatusBox = cr.ui.define(function() { |
22 var node = $('status-box-template').cloneNode(true); | 23 var node = $('status-box-template').cloneNode(true); |
23 node.removeAttribute('id'); | 24 node.removeAttribute('id'); |
24 return node; | 25 return node; |
25 }); | 26 }); |
26 | 27 |
27 StatusBox.prototype = { | 28 StatusBox.prototype = { |
28 // Set up the prototype chain. | 29 // Set up the prototype chain. |
29 __proto__: HTMLFieldSetElement.prototype, | 30 __proto__: HTMLFieldSetElement.prototype, |
30 | 31 |
31 /** | 32 /** |
32 * Initialization function for the cr.ui framework. | 33 * Initialization function for the cr.ui framework. |
33 */ | 34 */ |
34 decorate: function() { | 35 decorate: function() {}, |
35 }, | |
36 | 36 |
37 /** | 37 /** |
38 * Populate the box with the given cloud policy status. | 38 * Populate the box with the given cloud policy status. |
39 * @param {string} scope The policy scope, either "device" or "user". | 39 * @param {string} scope The policy scope, either "device" or "user". |
40 * @param {Object} status Dictionary with information about the status. | 40 * @param {Object} status Dictionary with information about the status. |
41 */ | 41 */ |
42 initialize: function(scope, status) { | 42 initialize: function(scope, status) { |
43 if (scope == 'device') { | 43 if (scope == 'device') { |
44 // For device policy, set the appropriate title and populate the topmost | 44 // For device policy, set the appropriate title and populate the topmost |
45 // status item with the domain the device is enrolled into. | 45 // status item with the domain the device is enrolled into. |
46 this.querySelector('.legend').textContent = | 46 this.querySelector('.legend').textContent = |
47 loadTimeData.getString('statusDevice'); | 47 loadTimeData.getString('statusDevice'); |
48 var domain = this.querySelector('.domain'); | 48 var domain = this.querySelector('.domain'); |
49 domain.textContent = status.domain; | 49 domain.textContent = status.domain; |
50 domain.parentElement.hidden = false; | 50 domain.parentElement.hidden = false; |
51 | 51 |
52 // Populate the device naming information. | 52 // Populate the device naming information. |
53 // Populate the asset identifier. | 53 // Populate the asset identifier. |
54 var assetId = this.querySelector('.asset-id'); | 54 var assetId = this.querySelector('.asset-id'); |
55 assetId.textContent = status.assetId || | 55 assetId.textContent = |
56 loadTimeData.getString('notSpecified'); | 56 status.assetId || loadTimeData.getString('notSpecified'); |
57 assetId.parentElement.hidden = false; | 57 assetId.parentElement.hidden = false; |
58 | 58 |
59 // Populate the device location. | 59 // Populate the device location. |
60 var location = this.querySelector('.location'); | 60 var location = this.querySelector('.location'); |
61 location.textContent = status.location || | 61 location.textContent = |
62 loadTimeData.getString('notSpecified'); | 62 status.location || loadTimeData.getString('notSpecified'); |
63 location.parentElement.hidden = false; | 63 location.parentElement.hidden = false; |
64 | 64 |
65 // Populate the directory API ID. | 65 // Populate the directory API ID. |
66 var directoryApiId = this.querySelector('.directory-api-id'); | 66 var directoryApiId = this.querySelector('.directory-api-id'); |
67 directoryApiId.textContent = status.directoryApiId || | 67 directoryApiId.textContent = |
68 loadTimeData.getString('notSpecified'); | 68 status.directoryApiId || loadTimeData.getString('notSpecified'); |
69 directoryApiId.parentElement.hidden = false; | 69 directoryApiId.parentElement.hidden = false; |
70 } else { | 70 } else { |
71 // For user policy, set the appropriate title and populate the topmost | 71 // For user policy, set the appropriate title and populate the topmost |
72 // status item with the username that policies apply to. | 72 // status item with the username that policies apply to. |
73 this.querySelector('.legend').textContent = | 73 this.querySelector('.legend').textContent = |
74 loadTimeData.getString('statusUser'); | 74 loadTimeData.getString('statusUser'); |
75 // Populate the topmost item with the username. | 75 // Populate the topmost item with the username. |
76 var username = this.querySelector('.username'); | 76 var username = this.querySelector('.username'); |
77 username.textContent = status.username; | 77 username.textContent = status.username; |
78 username.parentElement.hidden = false; | 78 username.parentElement.hidden = false; |
(...skipping 21 matching lines...) Expand all Loading... |
100 | 100 |
101 Policy.prototype = { | 101 Policy.prototype = { |
102 // Set up the prototype chain. | 102 // Set up the prototype chain. |
103 __proto__: HTMLTableSectionElement.prototype, | 103 __proto__: HTMLTableSectionElement.prototype, |
104 | 104 |
105 /** | 105 /** |
106 * Initialization function for the cr.ui framework. | 106 * Initialization function for the cr.ui framework. |
107 */ | 107 */ |
108 decorate: function() { | 108 decorate: function() { |
109 this.updateToggleExpandedValueText_(); | 109 this.updateToggleExpandedValueText_(); |
110 this.querySelector('.toggle-expanded-value').addEventListener( | 110 this.querySelector('.toggle-expanded-value') |
111 'click', this.toggleExpandedValue_.bind(this)); | 111 .addEventListener('click', this.toggleExpandedValue_.bind(this)); |
112 }, | 112 }, |
113 | 113 |
114 /** | 114 /** |
115 * Populate the table columns with information about the policy name, value | 115 * Populate the table columns with information about the policy name, value |
116 * and status. | 116 * and status. |
117 * @param {string} name The policy name. | 117 * @param {string} name The policy name. |
118 * @param {Object} value Dictionary with information about the policy value. | 118 * @param {Object} value Dictionary with information about the policy value. |
119 * @param {boolean} unknown Whether the policy name is not recognized. | 119 * @param {boolean} unknown Whether the policy name is not recognized. |
120 */ | 120 */ |
121 initialize: function(name, value, unknown) { | 121 initialize: function(name, value, unknown) { |
122 this.name = name; | 122 this.name = name; |
123 this.unset = !value; | 123 this.unset = !value; |
124 | 124 |
125 // Populate the name column. | 125 // Populate the name column. |
126 this.querySelector('.name').textContent = name; | 126 this.querySelector('.name').textContent = name; |
127 | 127 |
128 // Populate the remaining columns with policy scope, level and value if a | 128 // Populate the remaining columns with policy scope, level and value if a |
129 // value has been set. Otherwise, leave them blank. | 129 // value has been set. Otherwise, leave them blank. |
130 if (value) { | 130 if (value) { |
131 this.querySelector('.scope').textContent = | 131 this.querySelector('.scope').textContent = loadTimeData.getString( |
132 loadTimeData.getString(value.scope == 'user' ? | 132 value.scope == 'user' ? 'scopeUser' : 'scopeDevice'); |
133 'scopeUser' : 'scopeDevice'); | 133 this.querySelector('.level').textContent = loadTimeData.getString( |
134 this.querySelector('.level').textContent = | 134 value.level == 'recommended' ? 'levelRecommended' : |
135 loadTimeData.getString(value.level == 'recommended' ? | 135 'levelMandatory'); |
136 'levelRecommended' : 'levelMandatory'); | |
137 this.querySelector('.source').textContent = | 136 this.querySelector('.source').textContent = |
138 loadTimeData.getString(value.source); | 137 loadTimeData.getString(value.source); |
139 this.querySelector('.value').textContent = value.value; | 138 this.querySelector('.value').textContent = value.value; |
140 this.querySelector('.expanded-value').textContent = value.value; | 139 this.querySelector('.expanded-value').textContent = value.value; |
141 } | 140 } |
142 | 141 |
143 // Populate the status column. | 142 // Populate the status column. |
144 var status; | 143 var status; |
145 if (!value) { | 144 if (!value) { |
146 // If the policy value has not been set, show an error message. | 145 // If the policy value has not been set, show an error message. |
(...skipping 10 matching lines...) Expand all Loading... |
157 status = loadTimeData.getString('ok'); | 156 status = loadTimeData.getString('ok'); |
158 } | 157 } |
159 this.querySelector('.status').textContent = status; | 158 this.querySelector('.status').textContent = status; |
160 | 159 |
161 if (isMobilePage()) { | 160 if (isMobilePage()) { |
162 // The number of columns which are hidden by the css file for the mobile | 161 // The number of columns which are hidden by the css file for the mobile |
163 // (Android) version of this page. | 162 // (Android) version of this page. |
164 /** @const */ var HIDDEN_COLUMNS_IN_MOBILE_VERSION = 2; | 163 /** @const */ var HIDDEN_COLUMNS_IN_MOBILE_VERSION = 2; |
165 | 164 |
166 var expandedValue = this.querySelector('.expanded-value'); | 165 var expandedValue = this.querySelector('.expanded-value'); |
167 expandedValue.setAttribute('colspan', | 166 expandedValue.setAttribute( |
| 167 'colspan', |
168 expandedValue.colSpan - HIDDEN_COLUMNS_IN_MOBILE_VERSION); | 168 expandedValue.colSpan - HIDDEN_COLUMNS_IN_MOBILE_VERSION); |
169 } | 169 } |
170 }, | 170 }, |
171 | 171 |
172 /** | 172 /** |
173 * Check the table columns for overflow. Most columns are automatically | 173 * Check the table columns for overflow. Most columns are automatically |
174 * elided when overflow occurs. The only action required is to add a tooltip | 174 * elided when overflow occurs. The only action required is to add a tooltip |
175 * that shows the complete content. The value column is an exception. If | 175 * that shows the complete content. The value column is an exception. If |
176 * overflow occurs here, the contents is replaced with a link that toggles | 176 * overflow occurs here, the contents is replaced with a link that toggles |
177 * the visibility of an additional row containing the complete value. | 177 * the visibility of an additional row containing the complete value. |
(...skipping 26 matching lines...) Expand all Loading... |
204 | 204 |
205 /** | 205 /** |
206 * Update the text of the link that toggles the visibility of an additional | 206 * Update the text of the link that toggles the visibility of an additional |
207 * row containing the complete policy value, depending on the toggle state. | 207 * row containing the complete policy value, depending on the toggle state. |
208 * @private | 208 * @private |
209 */ | 209 */ |
210 updateToggleExpandedValueText_: function(event) { | 210 updateToggleExpandedValueText_: function(event) { |
211 this.querySelector('.toggle-expanded-value').textContent = | 211 this.querySelector('.toggle-expanded-value').textContent = |
212 loadTimeData.getString( | 212 loadTimeData.getString( |
213 this.classList.contains('show-overflowed-value') ? | 213 this.classList.contains('show-overflowed-value') ? |
214 'hideExpandedValue' : 'showExpandedValue'); | 214 'hideExpandedValue' : |
| 215 'showExpandedValue'); |
215 }, | 216 }, |
216 | 217 |
217 /** | 218 /** |
218 * Toggle the visibility of an additional row containing the complete policy | 219 * Toggle the visibility of an additional row containing the complete policy |
219 * value. | 220 * value. |
220 * @private | 221 * @private |
221 */ | 222 */ |
222 toggleExpandedValue_: function() { | 223 toggleExpandedValue_: function() { |
223 this.classList.toggle('show-overflowed-value'); | 224 this.classList.toggle('show-overflowed-value'); |
224 this.updateToggleExpandedValueText_(); | 225 this.updateToggleExpandedValueText_(); |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
303 /** | 304 /** |
304 * Filter policies. Only policies whose name contains the filter pattern are | 305 * Filter policies. Only policies whose name contains the filter pattern are |
305 * shown in the table. Furthermore, policies whose value is not currently | 306 * shown in the table. Furthermore, policies whose value is not currently |
306 * set are only shown if the corresponding checkbox is checked. | 307 * set are only shown if the corresponding checkbox is checked. |
307 */ | 308 */ |
308 filter: function() { | 309 filter: function() { |
309 var showUnset = $('show-unset').checked; | 310 var showUnset = $('show-unset').checked; |
310 var policies = this.getElementsByTagName('tbody'); | 311 var policies = this.getElementsByTagName('tbody'); |
311 for (var i = 0; i < policies.length; i++) { | 312 for (var i = 0; i < policies.length; i++) { |
312 var policy = policies[i]; | 313 var policy = policies[i]; |
313 policy.hidden = | 314 policy.hidden = policy.unset && !showUnset || |
314 policy.unset && !showUnset || | |
315 policy.name.toLowerCase().indexOf(this.filterPattern_) == -1; | 315 policy.name.toLowerCase().indexOf(this.filterPattern_) == -1; |
316 } | 316 } |
317 if (this.querySelector('tbody:not([hidden])')) | 317 if (this.querySelector('tbody:not([hidden])')) |
318 this.parentElement.classList.remove('empty'); | 318 this.parentElement.classList.remove('empty'); |
319 else | 319 else |
320 this.parentElement.classList.add('empty'); | 320 this.parentElement.classList.add('empty'); |
321 setTimeout(this.checkOverflow_.bind(this), 0); | 321 setTimeout(this.checkOverflow_.bind(this), 0); |
322 }, | 322 }, |
323 | 323 |
324 /** | 324 /** |
(...skipping 19 matching lines...) Expand all Loading... |
344 var policy = new Policy; | 344 var policy = new Policy; |
345 policy.initialize(name, value, unknown); | 345 policy.initialize(name, value, unknown); |
346 this.appendChild(policy); | 346 this.appendChild(policy); |
347 }, | 347 }, |
348 }; | 348 }; |
349 | 349 |
350 /** | 350 /** |
351 * A singelton object that handles communication between browser and WebUI. | 351 * A singelton object that handles communication between browser and WebUI. |
352 * @constructor | 352 * @constructor |
353 */ | 353 */ |
354 function Page() { | 354 function Page() {} |
355 } | |
356 | 355 |
357 // Make Page a singleton. | 356 // Make Page a singleton. |
358 cr.addSingletonGetter(Page); | 357 cr.addSingletonGetter(Page); |
359 | 358 |
360 /** | 359 /** |
361 * Provide a list of all known policies to the UI. Called by the browser on | 360 * Provide a list of all known policies to the UI. Called by the browser on |
362 * page load. | 361 * page load. |
363 * @param {Object} names Dictionary containing all known policy names. | 362 * @param {Object} names Dictionary containing all known policy names. |
364 */ | 363 */ |
365 Page.setPolicyNames = function(names) { | 364 Page.setPolicyNames = function(names) { |
366 var page = this.getInstance(); | 365 var page = this.getInstance(); |
367 | 366 |
368 // Clear all policy tables. | 367 // Clear all policy tables. |
369 page.mainSection.innerHTML = ''; | 368 page.mainSection.innerHTML = ''; |
370 page.policyTables = {}; | 369 page.policyTables = {}; |
371 | 370 |
372 // Create tables and set known policy names for Chrome and extensions. | 371 // Create tables and set known policy names for Chrome and extensions. |
373 if (names.hasOwnProperty('chromePolicyNames')) { | 372 if (names.hasOwnProperty('chromePolicyNames')) { |
374 var table = page.appendNewTable('chrome', 'Chrome policies', ''); | 373 var table = page.appendNewTable('chrome', 'Chrome policies', ''); |
375 table.setPolicyNames(names.chromePolicyNames); | 374 table.setPolicyNames(names.chromePolicyNames); |
376 } | 375 } |
377 | 376 |
378 if (names.hasOwnProperty('extensionPolicyNames')) { | 377 if (names.hasOwnProperty('extensionPolicyNames')) { |
379 for (var ext in names.extensionPolicyNames) { | 378 for (var ext in names.extensionPolicyNames) { |
380 var table = page.appendNewTable('extension-' + ext, | 379 var table = page.appendNewTable( |
381 names.extensionPolicyNames[ext].name, 'ID: ' + ext); | 380 'extension-' + ext, names.extensionPolicyNames[ext].name, |
| 381 'ID: ' + ext); |
382 table.setPolicyNames(names.extensionPolicyNames[ext].policyNames); | 382 table.setPolicyNames(names.extensionPolicyNames[ext].policyNames); |
383 } | 383 } |
384 } | 384 } |
385 }; | 385 }; |
386 | 386 |
387 /** | 387 /** |
388 * Provide a list of the currently set policy values and any errors detected | 388 * Provide a list of the currently set policy values and any errors detected |
389 * while parsing these to the UI. Called by the browser on page load and | 389 * while parsing these to the UI. Called by the browser on page load and |
390 * whenever policy values change. | 390 * whenever policy values change. |
391 * @param {Object} values Dictionary containing the current policy values. | 391 * @param {Object} values Dictionary containing the current policy values. |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
453 self.policyTables[policyTable].filter(); | 453 self.policyTables[policyTable].filter(); |
454 } | 454 } |
455 }; | 455 }; |
456 | 456 |
457 // Notify the browser that the page has loaded, causing it to send the | 457 // Notify the browser that the page has loaded, causing it to send the |
458 // list of all known policies, the current policy values and the cloud | 458 // list of all known policies, the current policy values and the cloud |
459 // policy status. | 459 // policy status. |
460 chrome.send('initialized'); | 460 chrome.send('initialized'); |
461 }, | 461 }, |
462 | 462 |
463 /** | 463 /** |
464 * Creates a new policy table section, adds the section to the page, | 464 * Creates a new policy table section, adds the section to the page, |
465 * and returns the new table from that section. | 465 * and returns the new table from that section. |
466 * @param {string} id The key for storing the new table in policyTables. | 466 * @param {string} id The key for storing the new table in policyTables. |
467 * @param {string} label_title Title for this policy table. | 467 * @param {string} label_title Title for this policy table. |
468 * @param {string} label_content Description for the policy table. | 468 * @param {string} label_content Description for the policy table. |
469 * @return {Element} The newly created table. | 469 * @return {Element} The newly created table. |
470 */ | 470 */ |
471 appendNewTable: function(id, label_title, label_content) { | 471 appendNewTable: function(id, label_title, label_content) { |
472 var newSection = this.createPolicyTableSection(id, label_title, | 472 var newSection = |
473 label_content); | 473 this.createPolicyTableSection(id, label_title, label_content); |
474 this.mainSection.appendChild(newSection); | 474 this.mainSection.appendChild(newSection); |
475 return this.policyTables[id]; | 475 return this.policyTables[id]; |
476 }, | 476 }, |
477 | 477 |
478 /** | 478 /** |
479 * Creates a new section containing a title, description and table of | 479 * Creates a new section containing a title, description and table of |
480 * policies. | 480 * policies. |
481 * @param {id} id The key for storing the new table in policyTables. | 481 * @param {id} id The key for storing the new table in policyTables. |
482 * @param {string} label_title Title for this policy table. | 482 * @param {string} label_title Title for this policy table. |
483 * @param {string} label_content Description for the policy table. | 483 * @param {string} label_content Description for the policy table. |
(...skipping 30 matching lines...) Expand all Loading... |
514 }, | 514 }, |
515 | 515 |
516 /** | 516 /** |
517 * Creates a new table for displaying policies. | 517 * Creates a new table for displaying policies. |
518 * @return {Element} The newly created table. | 518 * @return {Element} The newly created table. |
519 */ | 519 */ |
520 createPolicyTable: function() { | 520 createPolicyTable: function() { |
521 var newTable = window.document.createElement('table'); | 521 var newTable = window.document.createElement('table'); |
522 var tableHead = window.document.createElement('thead'); | 522 var tableHead = window.document.createElement('thead'); |
523 var tableRow = window.document.createElement('tr'); | 523 var tableRow = window.document.createElement('tr'); |
524 var tableHeadings = ['Scope', 'Level', 'Source', 'Name', 'Value', | 524 var tableHeadings = |
525 'Status']; | 525 ['Scope', 'Level', 'Source', 'Name', 'Value', 'Status']; |
526 for (var i = 0; i < tableHeadings.length; i++) { | 526 for (var i = 0; i < tableHeadings.length; i++) { |
527 var tableHeader = window.document.createElement('th'); | 527 var tableHeader = window.document.createElement('th'); |
528 tableHeader.classList.add(tableHeadings[i].toLowerCase() + '-column'); | 528 tableHeader.classList.add(tableHeadings[i].toLowerCase() + '-column'); |
529 tableHeader.textContent = loadTimeData.getString('header' + | 529 tableHeader.textContent = |
530 tableHeadings[i]); | 530 loadTimeData.getString('header' + tableHeadings[i]); |
531 tableRow.appendChild(tableHeader); | 531 tableRow.appendChild(tableHeader); |
532 } | 532 } |
533 tableHead.appendChild(tableRow); | 533 tableHead.appendChild(tableRow); |
534 newTable.appendChild(tableHead); | 534 newTable.appendChild(tableHead); |
535 cr.ui.decorate(newTable, PolicyTable); | 535 cr.ui.decorate(newTable, PolicyTable); |
536 return newTable; | 536 return newTable; |
537 }, | 537 }, |
538 | 538 |
539 /** | 539 /** |
540 * Update the status section of the page to show the current cloud policy | 540 * Update the status section of the page to show the current cloud policy |
(...skipping 21 matching lines...) Expand all Loading... |
562 | 562 |
563 /** | 563 /** |
564 * Re-enable the reload policies button when the previous request to reload | 564 * Re-enable the reload policies button when the previous request to reload |
565 * policies values has completed. | 565 * policies values has completed. |
566 */ | 566 */ |
567 reloadPoliciesDone: function() { | 567 reloadPoliciesDone: function() { |
568 $('reload-policies').disabled = false; | 568 $('reload-policies').disabled = false; |
569 }, | 569 }, |
570 }; | 570 }; |
571 | 571 |
572 return { | 572 return {Page: Page}; |
573 Page: Page | |
574 }; | |
575 }); | 573 }); |
576 | 574 |
577 // Have the main initialization function be called when the page finishes | 575 // Have the main initialization function be called when the page finishes |
578 // loading. | 576 // loading. |
579 document.addEventListener( | 577 document.addEventListener( |
580 'DOMContentLoaded', | 578 'DOMContentLoaded', |
581 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); | 579 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); |
OLD | NEW |