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