| 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 | 4 |
| 5 cr.define('policy', function() { | 5 cr.define('policy', function() { |
| 6 /** | 6 /** |
| 7 * A box that shows the status of cloud policy for a device or user. | 7 * A box that shows the status of cloud policy for a device or user. |
| 8 * @constructor | 8 * @constructor |
| 9 * @extends {HTMLFieldSetElement} | 9 * @extends {HTMLFieldSetElement} |
| 10 */ | 10 */ |
| (...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 81 this.querySelector('.toggle-expanded-value').addEventListener( | 81 this.querySelector('.toggle-expanded-value').addEventListener( |
| 82 'click', this.toggleExpandedValue_.bind(this)); | 82 'click', this.toggleExpandedValue_.bind(this)); |
| 83 }, | 83 }, |
| 84 | 84 |
| 85 /** | 85 /** |
| 86 * Populate the table columns with information about the policy name, value | 86 * Populate the table columns with information about the policy name, value |
| 87 * and status. | 87 * and status. |
| 88 * @param {string} name The policy name. | 88 * @param {string} name The policy name. |
| 89 * @param {Object} value Dictionary with information about the policy value. | 89 * @param {Object} value Dictionary with information about the policy value. |
| 90 * @param {boolean} unknown Whether the policy name is not recognized. | 90 * @param {boolean} unknown Whether the policy name is not recognized. |
| 91 * @param {boolean} includeStatus Whether the table has a status column. | |
| 92 */ | 91 */ |
| 93 initialize: function(name, value, unknown, includeStatus) { | 92 initialize: function(name, value, unknown) { |
| 94 this.name = name; | 93 this.name = name; |
| 95 this.unset = !value; | 94 this.unset = !value; |
| 96 | 95 |
| 97 // Populate the name column. | 96 // Populate the name column. |
| 98 this.querySelector('.name').textContent = name; | 97 this.querySelector('.name').textContent = name; |
| 99 | 98 |
| 100 // Populate the remaining columns with policy scope, level and value if a | 99 // Populate the remaining columns with policy scope, level and value if a |
| 101 // value has been set. Otherwise, leave them blank. | 100 // value has been set. Otherwise, leave them blank. |
| 102 if (value) { | 101 if (value) { |
| 103 this.querySelector('.scope').textContent = | 102 this.querySelector('.scope').textContent = |
| 104 loadTimeData.getString(value.scope == 'user' ? | 103 loadTimeData.getString(value.scope == 'user' ? |
| 105 'scopeUser' : 'scopeDevice'); | 104 'scopeUser' : 'scopeDevice'); |
| 106 this.querySelector('.level').textContent = | 105 this.querySelector('.level').textContent = |
| 107 loadTimeData.getString(value.level == 'recommended' ? | 106 loadTimeData.getString(value.level == 'recommended' ? |
| 108 'levelRecommended' : 'levelMandatory'); | 107 'levelRecommended' : 'levelMandatory'); |
| 109 this.querySelector('.value').textContent = value.value; | 108 this.querySelector('.value').textContent = value.value; |
| 110 this.querySelector('.expanded-value').textContent = value.value; | 109 this.querySelector('.expanded-value').textContent = value.value; |
| 111 } | 110 } |
| 112 | 111 |
| 113 if (includeStatus) { | 112 // Populate the status column. |
| 114 // Populate the status column. | 113 var status; |
| 115 var status; | 114 if (!value) { |
| 116 if (!value) { | 115 // If the policy value has not been set, show an error message. |
| 117 // If the policy value has not been set, show an error message. | 116 status = loadTimeData.getString('unset'); |
| 118 status = loadTimeData.getString('unset'); | 117 } else if (unknown) { |
| 119 } else if (unknown) { | 118 // If the policy name is not recognized, show an error message. |
| 120 // If the policy name is not recognized, show an error message. | 119 status = loadTimeData.getString('unknown'); |
| 121 status = loadTimeData.getString('unknown'); | 120 } else if (value.error) { |
| 122 } else if (value.error) { | 121 // If an error occurred while parsing the policy value, show the error |
| 123 // If an error occurred while parsing the policy value, show the error | 122 // message. |
| 124 // message. | 123 status = value.error; |
| 125 status = value.error; | |
| 126 } else { | |
| 127 // Otherwise, indicate that the policy value was parsed correctly. | |
| 128 status = loadTimeData.getString('ok'); | |
| 129 } | |
| 130 this.querySelector('.status').textContent = status; | |
| 131 } else { | 124 } else { |
| 132 // Remove status column. | 125 // Otherwise, indicate that the policy value was parsed correctly. |
| 133 this.querySelector('.status-container').remove(); | 126 status = loadTimeData.getString('ok'); |
| 134 this.querySelector('.expanded-value').setAttribute('colspan', 4); | |
| 135 } | 127 } |
| 128 this.querySelector('.status').textContent = status; |
| 136 }, | 129 }, |
| 137 | 130 |
| 138 /** | 131 /** |
| 139 * Check the table columns for overflow. Most columns are automatically | 132 * Check the table columns for overflow. Most columns are automatically |
| 140 * elided when overflow occurs. The only action required is to add a tooltip | 133 * elided when overflow occurs. The only action required is to add a tooltip |
| 141 * that shows the complete content. The value column is an exception. If | 134 * that shows the complete content. The value column is an exception. If |
| 142 * overflow occurs here, the contents is replaced with a link that toggles | 135 * overflow occurs here, the contents is replaced with a link that toggles |
| 143 * the visibility of an additional row containing the complete value. | 136 * the visibility of an additional row containing the complete value. |
| 144 */ | 137 */ |
| 145 checkOverflow: function() { | 138 checkOverflow: function() { |
| (...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 301 | 294 |
| 302 /** | 295 /** |
| 303 * Add a policy with the given |name| and |value| to the table. | 296 * Add a policy with the given |name| and |value| to the table. |
| 304 * @param {string} name The policy name. | 297 * @param {string} name The policy name. |
| 305 * @param {Object} value Dictionary with information about the policy value. | 298 * @param {Object} value Dictionary with information about the policy value. |
| 306 * @param {boolean} unknown Whether the policy name is not recoginzed. | 299 * @param {boolean} unknown Whether the policy name is not recoginzed. |
| 307 * @private | 300 * @private |
| 308 */ | 301 */ |
| 309 setPolicyValue_: function(name, value, unknown) { | 302 setPolicyValue_: function(name, value, unknown) { |
| 310 var policy = new Policy; | 303 var policy = new Policy; |
| 311 var includeStatus = this.querySelector('.status-column') != null; | 304 policy.initialize(name, value, unknown); |
| 312 policy.initialize(name, value, unknown, includeStatus); | |
| 313 this.appendChild(policy); | 305 this.appendChild(policy); |
| 314 }, | 306 }, |
| 315 }; | 307 }; |
| 316 | 308 |
| 317 /** | 309 /** |
| 318 * A singelton object that handles communication between browser and WebUI. | 310 * A singelton object that handles communication between browser and WebUI. |
| 319 * @constructor | 311 * @constructor |
| 320 */ | 312 */ |
| 321 function Page() { | 313 function Page() { |
| 322 } | 314 } |
| 323 | 315 |
| 324 // Make Page a singleton. | 316 // Make Page a singleton. |
| 325 cr.addSingletonGetter(Page); | 317 cr.addSingletonGetter(Page); |
| 326 | 318 |
| 327 /** | 319 /** |
| 328 * Provide a list of all known policies to the UI. Called by the browser on | 320 * Provide a list of all known policies to the UI. Called by the browser on |
| 329 * page load. | 321 * page load. |
| 330 * @param {Object} names Dictionary containing all known policy names. | 322 * @param {Object} names Dictionary containing all known policy names. |
| 331 */ | 323 */ |
| 332 Page.setPolicyNames = function(names) { | 324 Page.setPolicyNames = function(names) { |
| 333 var table = this.getInstance().policyTables['chrome']; | 325 var page = this.getInstance(); |
| 334 table.setPolicyNames(names); | 326 |
| 327 // Clear all policy tables. |
| 328 page.mainSection.innerHTML = ''; |
| 329 page.policyTables = {}; |
| 330 |
| 331 // Create tables and set known policy names for Chrome and extensions. |
| 332 if (names.hasOwnProperty('chromePolicyNames')) { |
| 333 var table = page.appendNewTable('chrome', 'Chrome policies', ''); |
| 334 table.setPolicyNames(names.chromePolicyNames); |
| 335 } |
| 336 |
| 337 if (names.hasOwnProperty('extensionPolicyNames')) { |
| 338 for (var ext in names.extensionPolicyNames) { |
| 339 var table = page.appendNewTable('extension-' + ext, |
| 340 names.extensionPolicyNames[ext].name, 'ID: ' + ext); |
| 341 table.setPolicyNames(names.extensionPolicyNames[ext].policyNames); |
| 342 } |
| 343 } |
| 335 }; | 344 }; |
| 336 | 345 |
| 337 /** | 346 /** |
| 338 * Provide a list of the currently set policy values and any errors detected | 347 * Provide a list of the currently set policy values and any errors detected |
| 339 * while parsing these to the UI. Called by the browser on page load and | 348 * while parsing these to the UI. Called by the browser on page load and |
| 340 * whenever policy values change. | 349 * whenever policy values change. |
| 341 * @param {Object} values Dictionary containing the current policy values. | 350 * @param {Object} values Dictionary containing the current policy values. |
| 342 */ | 351 */ |
| 343 Page.setPolicyValues = function(values) { | 352 Page.setPolicyValues = function(values) { |
| 344 var page = this.getInstance(); | 353 var page = this.getInstance(); |
| 345 | |
| 346 if (values.hasOwnProperty('chromePolicies')) { | 354 if (values.hasOwnProperty('chromePolicies')) { |
| 347 var table = page.policyTables['chrome']; | 355 var table = page.policyTables['chrome']; |
| 348 table.setPolicyValues(values.chromePolicies); | 356 table.setPolicyValues(values.chromePolicies); |
| 349 } | 357 } |
| 350 | 358 |
| 351 if (values.hasOwnProperty('extensionPolicies')) { | 359 if (values.hasOwnProperty('extensionPolicies')) { |
| 352 for (var extensionId in values.extensionPolicies) { | 360 for (var extensionId in values.extensionPolicies) { |
| 353 var tableName = values.extensionPolicies[extensionId].name; | 361 var table = page.policyTables['extension-' + extensionId]; |
| 354 var table = page.getOrCreateTable('extension-' + extensionId, tableName, | 362 if (table) |
| 355 'ID: ' + extensionId, false); | 363 table.setPolicyValues(values.extensionPolicies[extensionId]); |
| 356 table.setPolicyValues(values.extensionPolicies[extensionId].policies); | |
| 357 } | 364 } |
| 358 } | 365 } |
| 359 }; | 366 }; |
| 360 | 367 |
| 361 /** | 368 /** |
| 362 * Provide the current cloud policy status to the UI. Called by the browser on | 369 * Provide the current cloud policy status to the UI. Called by the browser on |
| 363 * page load if cloud policy is present and whenever the status changes. | 370 * page load if cloud policy is present and whenever the status changes. |
| 364 * @param {Object} status Dictionary containing the current policy status. | 371 * @param {Object} status Dictionary containing the current policy status. |
| 365 */ | 372 */ |
| 366 Page.setStatus = function(status) { | 373 Page.setStatus = function(status) { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 378 Page.prototype = { | 385 Page.prototype = { |
| 379 /** | 386 /** |
| 380 * Main initialization function. Called by the browser on page load. | 387 * Main initialization function. Called by the browser on page load. |
| 381 */ | 388 */ |
| 382 initialize: function() { | 389 initialize: function() { |
| 383 uber.onContentFrameLoaded(); | 390 uber.onContentFrameLoaded(); |
| 384 | 391 |
| 385 this.mainSection = $('main-section'); | 392 this.mainSection = $('main-section'); |
| 386 this.policyTables = {}; | 393 this.policyTables = {}; |
| 387 | 394 |
| 388 var chromeTable = this.getOrCreateTable('chrome', 'Chrome policies', '', | |
| 389 true); | |
| 390 | |
| 391 // Place the initial focus on the filter input field. | 395 // Place the initial focus on the filter input field. |
| 392 $('filter').focus(); | 396 $('filter').focus(); |
| 393 | 397 |
| 394 var self = this; | 398 var self = this; |
| 395 $('filter').onsearch = function(event) { | 399 $('filter').onsearch = function(event) { |
| 396 for (policyTable in self.policyTables) { | 400 for (policyTable in self.policyTables) { |
| 397 self.policyTables[policyTable].setFilterPattern(this.value); | 401 self.policyTables[policyTable].setFilterPattern(this.value); |
| 398 } | 402 } |
| 399 }; | 403 }; |
| 400 $('reload-policies').onclick = function(event) { | 404 $('reload-policies').onclick = function(event) { |
| 401 this.disabled = true; | 405 this.disabled = true; |
| 402 chrome.send('reloadPolicies'); | 406 chrome.send('reloadPolicies'); |
| 403 }; | 407 }; |
| 404 | 408 |
| 405 $('show-unset').onchange = function() { | 409 $('show-unset').onchange = function() { |
| 406 for (policyTable in self.policyTables) { | 410 for (policyTable in self.policyTables) { |
| 407 self.policyTables[policyTable].filter(); | 411 self.policyTables[policyTable].filter(); |
| 408 } | 412 } |
| 409 }; | 413 }; |
| 410 | 414 |
| 411 // Notify the browser that the page has loaded, causing it to send the | 415 // Notify the browser that the page has loaded, causing it to send the |
| 412 // list of all known policies, the current policy values and the cloud | 416 // list of all known policies, the current policy values and the cloud |
| 413 // policy status. | 417 // policy status. |
| 414 chrome.send('initialized'); | 418 chrome.send('initialized'); |
| 415 }, | 419 }, |
| 416 | 420 |
| 417 /** | 421 /** |
| 418 * Gets the existing policy table for the given id, or if none exists, | 422 * Creates a new policy table section, adds the section to the page, |
| 419 * creates a new policy table section, adds the section to the page, | |
| 420 * and returns the new table from that section. | 423 * and returns the new table from that section. |
| 421 * @param {string} id The key for the table in policyTables. | 424 * @param {string} id The key for storing the new table in policyTables. |
| 422 * @param {string} label_title Title for this policy table. | 425 * @param {string} label_title Title for this policy table. |
| 423 * @param {string} label_content Description for the policy table. | 426 * @param {string} label_content Description for the policy table. |
| 424 * @return {Element} Policy table associated with the given id. | 427 * @return {Element} The newly created table. |
| 425 */ | 428 */ |
| 426 getOrCreateTable: function(id, label_title, label_content, includeStatus) { | 429 appendNewTable: function(id, label_title, label_content) { |
| 427 if (!this.policyTables.hasOwnProperty(id)) { | 430 var newSection = this.createPolicyTableSection(id, label_title, |
| 428 var newSection = this.createPolicyTableSection(id, label_title, | 431 label_content); |
| 429 label_content, includeStatus); | 432 this.mainSection.appendChild(newSection); |
| 430 this.mainSection.appendChild(newSection); | |
| 431 } | |
| 432 return this.policyTables[id]; | 433 return this.policyTables[id]; |
| 433 }, | 434 }, |
| 434 | 435 |
| 435 /** | 436 /** |
| 436 * Creates a new section containing a title, description and table of | 437 * Creates a new section containing a title, description and table of |
| 437 * policies. | 438 * policies. |
| 438 * @param {string} id Used as key when storing new table in policyTables. | 439 * @param {id} id The key for storing the new table in policyTables. |
| 439 * @param {string} label_title Title for this policy table. | 440 * @param {string} label_title Title for this policy table. |
| 440 * @param {string} label_content Description for the policy table. | 441 * @param {string} label_content Description for the policy table. |
| 441 * @param {boolean} includeStatus Whether to display a status column. | |
| 442 * @return {Element} The newly created section. | 442 * @return {Element} The newly created section. |
| 443 */ | 443 */ |
| 444 createPolicyTableSection: function(id, label_title, label_content, | 444 createPolicyTableSection: function(id, label_title, label_content) { |
| 445 includeStatus) { | |
| 446 var section = document.createElement('section'); | 445 var section = document.createElement('section'); |
| 447 section.setAttribute('class', 'policy-table-section'); | 446 section.setAttribute('class', 'policy-table-section'); |
| 448 | 447 |
| 449 // Add title and description. | 448 // Add title and description. |
| 450 var title = window.document.createElement('h3'); | 449 var title = window.document.createElement('h3'); |
| 451 title.textContent = label_title; | 450 title.textContent = label_title; |
| 452 section.appendChild(title); | 451 section.appendChild(title); |
| 453 | 452 |
| 454 if (label_content) { | 453 if (label_content) { |
| 455 var description = window.document.createElement('div'); | 454 var description = window.document.createElement('div'); |
| 456 description.classList.add('table-description'); | 455 description.classList.add('table-description'); |
| 457 description.textContent = label_content; | 456 description.textContent = label_content; |
| 458 section.appendChild(description); | 457 section.appendChild(description); |
| 459 } | 458 } |
| 460 | 459 |
| 461 // Add 'No Policies Set' element. | 460 // Add 'No Policies Set' element. |
| 462 var noPolicies = window.document.createElement('div'); | 461 var noPolicies = window.document.createElement('div'); |
| 463 noPolicies.classList.add('no-policies-set'); | 462 noPolicies.classList.add('no-policies-set'); |
| 464 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); | 463 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); |
| 465 section.appendChild(noPolicies); | 464 section.appendChild(noPolicies); |
| 466 | 465 |
| 467 // Add table of policies. | 466 // Add table of policies. |
| 468 var newTable = this.createPolicyTable(includeStatus); | 467 var newTable = this.createPolicyTable(); |
| 469 this.policyTables[id] = newTable; | 468 this.policyTables[id] = newTable; |
| 470 section.appendChild(newTable); | 469 section.appendChild(newTable); |
| 471 | 470 |
| 472 return section; | 471 return section; |
| 473 }, | 472 }, |
| 474 | 473 |
| 475 /** | 474 /** |
| 476 * Creates a new table for displaying policies. | 475 * Creates a new table for displaying policies. |
| 477 * @param {boolean} includeStatus Whether to include a status column. | |
| 478 * @return {Element} The newly created table. | 476 * @return {Element} The newly created table. |
| 479 */ | 477 */ |
| 480 createPolicyTable: function(includeStatus) { | 478 createPolicyTable: function() { |
| 481 var newTable = window.document.createElement('table'); | 479 var newTable = window.document.createElement('table'); |
| 482 var tableHead = window.document.createElement('thead'); | 480 var tableHead = window.document.createElement('thead'); |
| 483 var tableRow = window.document.createElement('tr'); | 481 var tableRow = window.document.createElement('tr'); |
| 484 var tableHeadings = ['headerScope', 'headerLevel', | 482 var tableHeadings = ['headerScope', 'headerLevel', |
| 485 'headerName', 'headerValue']; | 483 'headerName', 'headerValue', 'headerStatus']; |
| 486 | |
| 487 for (var i = 0; i < tableHeadings.length; i++) { | 484 for (var i = 0; i < tableHeadings.length; i++) { |
| 488 var tableHeader = window.document.createElement('th'); | 485 var tableHeader = window.document.createElement('th'); |
| 489 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); | 486 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); |
| 490 tableRow.appendChild(tableHeader); | 487 tableRow.appendChild(tableHeader); |
| 491 } | 488 } |
| 492 | |
| 493 if (includeStatus) { | |
| 494 var statusHeader = window.document.createElement('th'); | |
| 495 statusHeader.classList.add('status-column'); | |
| 496 statusHeader.textContent = loadTimeData.getString('headerStatus'); | |
| 497 tableRow.appendChild(statusHeader); | |
| 498 } | |
| 499 | |
| 500 tableHead.appendChild(tableRow); | 489 tableHead.appendChild(tableRow); |
| 501 newTable.appendChild(tableHead); | 490 newTable.appendChild(tableHead); |
| 502 cr.ui.decorate(newTable, PolicyTable); | 491 cr.ui.decorate(newTable, PolicyTable); |
| 503 return newTable; | 492 return newTable; |
| 504 }, | 493 }, |
| 505 | 494 |
| 506 /** | 495 /** |
| 507 * Update the status section of the page to show the current cloud policy | 496 * Update the status section of the page to show the current cloud policy |
| 508 * status. | 497 * status. |
| 509 * @param {Object} status Dictionary containing the current policy status. | 498 * @param {Object} status Dictionary containing the current policy status. |
| (...skipping 29 matching lines...) Expand all Loading... |
| 539 return { | 528 return { |
| 540 Page: Page | 529 Page: Page |
| 541 }; | 530 }; |
| 542 }); | 531 }); |
| 543 | 532 |
| 544 // Have the main initialization function be called when the page finishes | 533 // Have the main initialization function be called when the page finishes |
| 545 // loading. | 534 // loading. |
| 546 document.addEventListener( | 535 document.addEventListener( |
| 547 'DOMContentLoaded', | 536 'DOMContentLoaded', |
| 548 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); | 537 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); |
| OLD | NEW |