Chromium Code Reviews| 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 152 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 298 | 291 |
| 299 /** | 292 /** |
| 300 * Add a policy with the given |name| and |value| to the table. | 293 * Add a policy with the given |name| and |value| to the table. |
| 301 * @param {string} name The policy name. | 294 * @param {string} name The policy name. |
| 302 * @param {Object} value Dictionary with information about the policy value. | 295 * @param {Object} value Dictionary with information about the policy value. |
| 303 * @param {boolean} unknown Whether the policy name is not recoginzed. | 296 * @param {boolean} unknown Whether the policy name is not recoginzed. |
| 304 * @private | 297 * @private |
| 305 */ | 298 */ |
| 306 setPolicyValue_: function(name, value, unknown) { | 299 setPolicyValue_: function(name, value, unknown) { |
| 307 var policy = new Policy; | 300 var policy = new Policy; |
| 308 var includeStatus = this.querySelector('.status-column') != null; | 301 policy.initialize(name, value, unknown); |
| 309 policy.initialize(name, value, unknown, includeStatus); | |
| 310 this.appendChild(policy); | 302 this.appendChild(policy); |
| 311 }, | 303 }, |
| 312 }; | 304 }; |
| 313 | 305 |
| 314 /** | 306 /** |
| 315 * A singelton object that handles communication between browser and WebUI. | 307 * A singelton object that handles communication between browser and WebUI. |
| 316 * @constructor | 308 * @constructor |
| 317 */ | 309 */ |
| 318 function Page() { | 310 function Page() { |
| 319 } | 311 } |
| 320 | 312 |
| 321 // Make Page a singleton. | 313 // Make Page a singleton. |
| 322 cr.addSingletonGetter(Page); | 314 cr.addSingletonGetter(Page); |
| 323 | 315 |
| 324 /** | 316 /** |
| 325 * Provide a list of all known policies to the UI. Called by the browser on | 317 * Provide a list of all known policies to the UI. Called by the browser on |
| 326 * page load. | 318 * page load. |
| 327 * @param {Object} names Dictionary containing all known policy names. | 319 * @param {Object} names Dictionary containing all known policy names. |
| 328 */ | 320 */ |
| 329 Page.setPolicyNames = function(names) { | 321 Page.setPolicyNames = function(names) { |
| 330 var table = this.getInstance().policyTables['chrome']; | 322 var page = this.getInstance(); |
| 331 table.setPolicyNames(names); | 323 |
| 324 // Clear all policy tables. | |
| 325 page.mainSection.innerHTML = ''; | |
| 326 page.policyTables = {}; | |
| 327 | |
| 328 // Create tables and set known policy names for Chrome and extensions. | |
| 329 if (names.hasOwnProperty('chromePolicyNames')) { | |
| 330 var table = page.appendNewTable('chrome', 'Chrome policies', ''); | |
| 331 table.setPolicyNames(names.chromePolicyNames); | |
| 332 } | |
|
James Hawkins
2013/06/20 18:18:52
Optional nit: Blank lines between blocks.
anitawoodruff
2013/06/21 10:16:16
Done.
| |
| 333 if (names.hasOwnProperty('extensionPolicyNames')) { | |
| 334 for (var ext in names.extensionPolicyNames) { | |
| 335 var table = page.appendNewTable('extension-' + ext, | |
| 336 names.extensionPolicyNames[ext].name, 'ID: ' + ext); | |
| 337 table.setPolicyNames(names.extensionPolicyNames[ext].policyNames); | |
| 338 } | |
| 339 } | |
| 332 }; | 340 }; |
| 333 | 341 |
| 334 /** | 342 /** |
| 335 * Provide a list of the currently set policy values and any errors detected | 343 * Provide a list of the currently set policy values and any errors detected |
| 336 * while parsing these to the UI. Called by the browser on page load and | 344 * while parsing these to the UI. Called by the browser on page load and |
| 337 * whenever policy values change. | 345 * whenever policy values change. |
| 338 * @param {Object} values Dictionary containing the current policy values. | 346 * @param {Object} values Dictionary containing the current policy values. |
| 339 */ | 347 */ |
| 340 Page.setPolicyValues = function(values) { | 348 Page.setPolicyValues = function(values) { |
| 341 var page = this.getInstance(); | 349 var page = this.getInstance(); |
| 342 | |
| 343 if (values.hasOwnProperty('chromePolicies')) { | 350 if (values.hasOwnProperty('chromePolicies')) { |
| 344 var table = page.policyTables['chrome']; | 351 var table = page.policyTables['chrome']; |
| 345 table.setPolicyValues(values.chromePolicies); | 352 table.setPolicyValues(values.chromePolicies); |
| 346 } | 353 } |
| 347 | 354 |
| 348 if (values.hasOwnProperty('extensionPolicies')) { | 355 if (values.hasOwnProperty('extensionPolicies')) { |
| 349 for (var extensionId in values.extensionPolicies) { | 356 for (var extensionId in values.extensionPolicies) { |
| 350 var tableName = values.extensionPolicies[extensionId].name; | 357 var table = page.policyTables['extension-' + extensionId]; |
| 351 var table = page.getOrCreateTable('extension-' + extensionId, tableName, | 358 if (table) |
| 352 'ID: ' + extensionId, false); | 359 table.setPolicyValues(values.extensionPolicies[extensionId]); |
| 353 table.setPolicyValues(values.extensionPolicies[extensionId].policies); | |
| 354 } | 360 } |
| 355 } | 361 } |
| 356 }; | 362 }; |
| 357 | 363 |
| 358 /** | 364 /** |
| 359 * Provide the current cloud policy status to the UI. Called by the browser on | 365 * Provide the current cloud policy status to the UI. Called by the browser on |
| 360 * page load if cloud policy is present and whenever the status changes. | 366 * page load if cloud policy is present and whenever the status changes. |
| 361 * @param {Object} status Dictionary containing the current policy status. | 367 * @param {Object} status Dictionary containing the current policy status. |
| 362 */ | 368 */ |
| 363 Page.setStatus = function(status) { | 369 Page.setStatus = function(status) { |
| (...skipping 11 matching lines...) Expand all Loading... | |
| 375 Page.prototype = { | 381 Page.prototype = { |
| 376 /** | 382 /** |
| 377 * Main initialization function. Called by the browser on page load. | 383 * Main initialization function. Called by the browser on page load. |
| 378 */ | 384 */ |
| 379 initialize: function() { | 385 initialize: function() { |
| 380 uber.onContentFrameLoaded(); | 386 uber.onContentFrameLoaded(); |
| 381 | 387 |
| 382 this.mainSection = $('main-section'); | 388 this.mainSection = $('main-section'); |
| 383 this.policyTables = {}; | 389 this.policyTables = {}; |
| 384 | 390 |
| 385 var chromeTable = this.getOrCreateTable('chrome', 'Chrome policies', '', | |
| 386 true); | |
| 387 | |
| 388 // Place the initial focus on the filter input field. | 391 // Place the initial focus on the filter input field. |
| 389 $('filter').focus(); | 392 $('filter').focus(); |
| 390 | 393 |
| 391 var self = this; | 394 var self = this; |
| 392 $('filter').onsearch = function(event) { | 395 $('filter').onsearch = function(event) { |
| 393 for (policyTable in self.policyTables) { | 396 for (policyTable in self.policyTables) { |
| 394 self.policyTables[policyTable].setFilterPattern(this.value); | 397 self.policyTables[policyTable].setFilterPattern(this.value); |
| 395 } | 398 } |
| 396 }; | 399 }; |
| 397 $('reload-policies').onclick = function(event) { | 400 $('reload-policies').onclick = function(event) { |
| 398 this.disabled = true; | 401 this.disabled = true; |
| 399 chrome.send('reloadPolicies'); | 402 chrome.send('reloadPolicies'); |
| 400 }; | 403 }; |
| 401 | 404 |
| 402 $('show-unset').onchange = function() { | 405 $('show-unset').onchange = function() { |
| 403 for (policyTable in self.policyTables) { | 406 for (policyTable in self.policyTables) { |
| 404 self.policyTables[policyTable].filter(); | 407 self.policyTables[policyTable].filter(); |
| 405 } | 408 } |
| 406 }; | 409 }; |
| 407 | 410 |
| 408 // Notify the browser that the page has loaded, causing it to send the | 411 // Notify the browser that the page has loaded, causing it to send the |
| 409 // list of all known policies, the current policy values and the cloud | 412 // list of all known policies, the current policy values and the cloud |
| 410 // policy status. | 413 // policy status. |
| 411 chrome.send('initialized'); | 414 chrome.send('initialized'); |
| 412 }, | 415 }, |
| 413 | 416 |
| 414 /** | 417 /** |
| 415 * Gets the existing policy table for the given id, or if none exists, | 418 * Creates a new policy table section, adds the section to the page, |
| 416 * creates a new policy table section, adds the section to the page, | |
| 417 * and returns the new table from that section. | 419 * and returns the new table from that section. |
| 418 * @param {string} id The key for the table in policyTables. | 420 * @param {string} id The key for storing the new table in policyTables. |
| 419 * @param {string} label_title Title for this policy table. | 421 * @param {string} label_title Title for this policy table. |
| 420 * @param {string} label_content Description for the policy table. | 422 * @param {string} label_content Description for the policy table. |
| 421 * @return {Element} Policy table associated with the given id. | 423 * @return {Element} The newly created table. |
| 422 */ | 424 */ |
| 423 getOrCreateTable: function(id, label_title, label_content, includeStatus) { | 425 appendNewTable: function(id, label_title, label_content) { |
| 424 if (!this.policyTables.hasOwnProperty(id)) { | 426 var newSection = this.createPolicyTableSection(id, label_title, |
| 425 var newSection = this.createPolicyTableSection(id, label_title, | 427 label_content); |
| 426 label_content, includeStatus); | 428 this.mainSection.appendChild(newSection); |
| 427 this.mainSection.appendChild(newSection); | |
| 428 } | |
| 429 return this.policyTables[id]; | 429 return this.policyTables[id]; |
| 430 }, | 430 }, |
| 431 | 431 |
| 432 /** | 432 /** |
| 433 * Creates a new section containing a title, description and table of | 433 * Creates a new section containing a title, description and table of |
| 434 * policies. | 434 * policies. |
| 435 * @param {string} id Used as key when storing new table in policyTables. | 435 * @param {id} id The key for storing the new table in policyTables. |
| 436 * @param {string} label_title Title for this policy table. | 436 * @param {string} label_title Title for this policy table. |
| 437 * @param {string} label_content Description for the policy table. | 437 * @param {string} label_content Description for the policy table. |
| 438 * @param {boolean} includeStatus Whether to display a status column. | |
| 439 * @return {Element} The newly created section. | 438 * @return {Element} The newly created section. |
| 440 */ | 439 */ |
| 441 createPolicyTableSection: function(id, label_title, label_content, | 440 createPolicyTableSection: function(id, label_title, label_content) { |
| 442 includeStatus) { | |
| 443 var section = document.createElement('section'); | 441 var section = document.createElement('section'); |
| 444 section.setAttribute('class', 'policy-table-section'); | 442 section.setAttribute('class', 'policy-table-section'); |
| 445 | 443 |
| 446 // Add title and description. | 444 // Add title and description. |
| 447 var title = window.document.createElement('h3'); | 445 var title = window.document.createElement('h3'); |
| 448 title.textContent = label_title; | 446 title.textContent = label_title; |
| 449 section.appendChild(title); | 447 section.appendChild(title); |
| 450 | 448 |
| 451 if (label_content) { | 449 if (label_content) { |
| 452 var description = window.document.createElement('div'); | 450 var description = window.document.createElement('div'); |
| 453 description.classList.add('table-description'); | 451 description.classList.add('table-description'); |
| 454 description.textContent = label_content; | 452 description.textContent = label_content; |
| 455 section.appendChild(description); | 453 section.appendChild(description); |
| 456 } | 454 } |
| 457 | 455 |
| 458 // Add 'No Policies Set' element. | 456 // Add 'No Policies Set' element. |
| 459 var noPolicies = window.document.createElement('div'); | 457 var noPolicies = window.document.createElement('div'); |
| 460 noPolicies.classList.add('no-policies-set'); | 458 noPolicies.classList.add('no-policies-set'); |
| 461 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); | 459 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); |
| 462 section.appendChild(noPolicies); | 460 section.appendChild(noPolicies); |
| 463 | 461 |
| 464 // Add table of policies. | 462 // Add table of policies. |
| 465 var newTable = this.createPolicyTable(includeStatus); | 463 var newTable = this.createPolicyTable(); |
| 466 this.policyTables[id] = newTable; | 464 this.policyTables[id] = newTable; |
| 467 section.appendChild(newTable); | 465 section.appendChild(newTable); |
| 468 | 466 |
| 469 return section; | 467 return section; |
| 470 }, | 468 }, |
| 471 | 469 |
| 472 /** | 470 /** |
| 473 * Creates a new table for displaying policies. | 471 * Creates a new table for displaying policies. |
| 474 * @param {boolean} includeStatus Whether to include a status column. | |
| 475 * @return {Element} The newly created table. | 472 * @return {Element} The newly created table. |
| 476 */ | 473 */ |
| 477 createPolicyTable: function(includeStatus) { | 474 createPolicyTable: function() { |
| 478 var newTable = window.document.createElement('table'); | 475 var newTable = window.document.createElement('table'); |
| 479 var tableHead = window.document.createElement('thead'); | 476 var tableHead = window.document.createElement('thead'); |
| 480 var tableRow = window.document.createElement('tr'); | 477 var tableRow = window.document.createElement('tr'); |
| 481 var tableHeadings = ['headerScope', 'headerLevel', | 478 var tableHeadings = ['headerScope', 'headerLevel', |
| 482 'headerName', 'headerValue']; | 479 'headerName', 'headerValue', 'headerStatus']; |
| 483 | |
| 484 for (var i = 0; i < tableHeadings.length; i++) { | 480 for (var i = 0; i < tableHeadings.length; i++) { |
| 485 var tableHeader = window.document.createElement('th'); | 481 var tableHeader = window.document.createElement('th'); |
| 486 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); | 482 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); |
| 487 tableRow.appendChild(tableHeader); | 483 tableRow.appendChild(tableHeader); |
| 488 } | 484 } |
| 489 | |
| 490 if (includeStatus) { | |
| 491 var statusHeader = window.document.createElement('th'); | |
| 492 statusHeader.classList.add('status-column'); | |
| 493 statusHeader.textContent = loadTimeData.getString('headerStatus'); | |
| 494 tableRow.appendChild(statusHeader); | |
| 495 } | |
| 496 | |
| 497 tableHead.appendChild(tableRow); | 485 tableHead.appendChild(tableRow); |
| 498 newTable.appendChild(tableHead); | 486 newTable.appendChild(tableHead); |
| 499 cr.ui.decorate(newTable, PolicyTable); | 487 cr.ui.decorate(newTable, PolicyTable); |
| 500 return newTable; | 488 return newTable; |
| 501 }, | 489 }, |
| 502 | 490 |
| 503 /** | 491 /** |
| 504 * Update the status section of the page to show the current cloud policy | 492 * Update the status section of the page to show the current cloud policy |
| 505 * status. | 493 * status. |
| 506 * @param {Object} status Dictionary containing the current policy status. | 494 * @param {Object} status Dictionary containing the current policy status. |
| (...skipping 29 matching lines...) Expand all Loading... | |
| 536 return { | 524 return { |
| 537 Page: Page | 525 Page: Page |
| 538 }; | 526 }; |
| 539 }); | 527 }); |
| 540 | 528 |
| 541 // Have the main initialization function be called when the page finishes | 529 // Have the main initialization function be called when the page finishes |
| 542 // loading. | 530 // loading. |
| 543 document.addEventListener( | 531 document.addEventListener( |
| 544 'DOMContentLoaded', | 532 'DOMContentLoaded', |
| 545 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); | 533 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); |
| OLD | NEW |