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 if (names.hasOwnProperty('chromePolicyNames')) { |
| 326 var table = page.policyTables['chrome']; | |
| 327 table.setPolicyNames(names.chromePolicyNames); | |
| 328 } | |
| 329 if (names.hasOwnProperty('extensionPolicyNames')) { | |
| 330 for (var ext in names.extensionPolicyNames) { | |
| 331 var table = page.getOrCreateTable('extension-' + ext, | |
| 332 names.extensionPolicyNames[ext].name, 'ID: ' + ext); | |
|
Joao da Silva
2013/06/18 13:26:04
nit: indent
anitawoodruff
2013/06/18 13:50:41
Done.
| |
| 333 table.setPolicyNames(names.extensionPolicyNames[ext].policyNames); | |
| 334 } | |
| 335 } | |
| 334 }; | 336 }; |
| 335 | 337 |
| 336 /** | 338 /** |
| 337 * Provide a list of the currently set policy values and any errors detected | 339 * 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 | 340 * while parsing these to the UI. Called by the browser on page load and |
| 339 * whenever policy values change. | 341 * whenever policy values change. |
| 340 * @param {Object} values Dictionary containing the current policy values. | 342 * @param {Object} values Dictionary containing the current policy values. |
| 341 */ | 343 */ |
| 342 Page.setPolicyValues = function(values) { | 344 Page.setPolicyValues = function(values) { |
| 343 var page = this.getInstance(); | 345 var page = this.getInstance(); |
| 344 | |
| 345 if (values.hasOwnProperty('chromePolicies')) { | 346 if (values.hasOwnProperty('chromePolicies')) { |
| 346 var table = page.policyTables['chrome']; | 347 var table = page.policyTables['chrome']; |
| 347 table.setPolicyValues(values.chromePolicies); | 348 table.setPolicyValues(values.chromePolicies); |
| 348 } | 349 } |
| 349 | 350 |
| 350 if (values.hasOwnProperty('extensionPolicies')) { | 351 if (values.hasOwnProperty('extensionPolicies')) { |
| 351 for (var extensionId in values.extensionPolicies) { | 352 for (var extensionId in values.extensionPolicies) { |
| 352 var tableName = values.extensionPolicies[extensionId].name; | 353 var table = page.policyTables['extension-' + extensionId]; |
| 353 var table = page.getOrCreateTable('extension-' + extensionId, tableName, | 354 if (table) |
| 354 'ID: ' + extensionId, false); | 355 table.setPolicyValues(values.extensionPolicies[extensionId]); |
| 355 table.setPolicyValues(values.extensionPolicies[extensionId].policies); | |
| 356 } | 356 } |
| 357 } | 357 } |
| 358 }; | 358 }; |
| 359 | 359 |
| 360 /** | 360 /** |
| 361 * Provide the current cloud policy status to the UI. Called by the browser on | 361 * 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. | 362 * page load if cloud policy is present and whenever the status changes. |
| 363 * @param {Object} status Dictionary containing the current policy status. | 363 * @param {Object} status Dictionary containing the current policy status. |
| 364 */ | 364 */ |
| 365 Page.setStatus = function(status) { | 365 Page.setStatus = function(status) { |
| (...skipping 10 matching lines...) Expand all Loading... | |
| 376 | 376 |
| 377 Page.prototype = { | 377 Page.prototype = { |
| 378 /** | 378 /** |
| 379 * Main initialization function. Called by the browser on page load. | 379 * Main initialization function. Called by the browser on page load. |
| 380 */ | 380 */ |
| 381 initialize: function() { | 381 initialize: function() { |
| 382 uber.onContentFrameLoaded(); | 382 uber.onContentFrameLoaded(); |
| 383 | 383 |
| 384 this.mainSection = $('main-section'); | 384 this.mainSection = $('main-section'); |
| 385 this.policyTables = {}; | 385 this.policyTables = {}; |
| 386 | 386 var chromeTable = this.getOrCreateTable('chrome', 'Chrome policies', ''); |
| 387 var chromeTable = this.getOrCreateTable('chrome', 'Chrome policies', '', | |
| 388 true); | |
| 389 | 387 |
| 390 // Place the initial focus on the filter input field. | 388 // Place the initial focus on the filter input field. |
| 391 $('filter').focus(); | 389 $('filter').focus(); |
| 392 | 390 |
| 393 var self = this; | 391 var self = this; |
| 394 $('filter').onsearch = function(event) { | 392 $('filter').onsearch = function(event) { |
| 395 for (policyTable in self.policyTables) { | 393 for (policyTable in self.policyTables) { |
| 396 self.policyTables[policyTable].setFilterPattern(this.value); | 394 self.policyTables[policyTable].setFilterPattern(this.value); |
| 397 } | 395 } |
| 398 }; | 396 }; |
| (...skipping 16 matching lines...) Expand all Loading... | |
| 415 | 413 |
| 416 /** | 414 /** |
| 417 * Gets the existing policy table for the given id, or if none exists, | 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, |
| 419 * and returns the new table from that section. | 417 * and returns the new table from that section. |
| 420 * @param {string} id The key for the table in policyTables. | 418 * @param {string} id The key for the table in policyTables. |
| 421 * @param {string} label_title Title for this policy table. | 419 * @param {string} label_title Title for this policy table. |
| 422 * @param {string} label_content Description for the policy table. | 420 * @param {string} label_content Description for the policy table. |
| 423 * @return {Element} Policy table associated with the given id. | 421 * @return {Element} Policy table associated with the given id. |
| 424 */ | 422 */ |
| 425 getOrCreateTable: function(id, label_title, label_content, includeStatus) { | 423 getOrCreateTable: function(id, label_title, label_content) { |
| 426 if (this.policyTables.hasOwnProperty(id)) | 424 if (this.policyTables.hasOwnProperty(id)) |
| 427 return this.policyTables[id]; | 425 return this.policyTables[id]; |
| 428 else { | 426 else { |
| 429 var newSection = this.createPolicyTableSection(label_title, | 427 var newSection = this.createPolicyTableSection(label_title, |
| 430 label_content, includeStatus); | 428 label_content); |
|
Joao da Silva
2013/06/18 13:26:04
nit: indent
anitawoodruff
2013/06/18 13:50:41
Done.
| |
| 431 this.mainSection.appendChild(newSection); | 429 this.mainSection.appendChild(newSection); |
| 432 var newTable = newSection.getElementsByTagName('table')[0]; | 430 var newTable = newSection.getElementsByTagName('table')[0]; |
| 433 this.policyTables[id] = newTable; | 431 this.policyTables[id] = newTable; |
| 434 return newTable; | 432 return newTable; |
| 435 } | 433 } |
| 436 }, | 434 }, |
| 437 | 435 |
| 438 /** | 436 /** |
| 439 * Creates a new section containing a title, description and table of | 437 * Creates a new section containing a title, description and table of |
| 440 * policies. | 438 * policies. |
| 441 * @param {string} id Used as key when storing new table in policyTables. | 439 * @param {string} id Used as key when storing new table in policyTables. |
|
anitawoodruff
2013/06/18 13:50:41
oops, this parameter description should have been
| |
| 442 * @param {string} label_title Title for this policy table. | 440 * @param {string} label_title Title for this policy table. |
| 443 * @param {string} label_content Description for the policy table. | 441 * @param {string} label_content Description for the policy table. |
| 444 * @param {boolean} includeStatus Whether to display a status column. | |
| 445 * @return {Element} The newly created section. | 442 * @return {Element} The newly created section. |
| 446 */ | 443 */ |
| 447 createPolicyTableSection: function(label_title, label_content, | 444 createPolicyTableSection: function(label_title, label_content) { |
| 448 includeStatus) { | |
| 449 var section = document.createElement('section'); | 445 var section = document.createElement('section'); |
| 450 section.setAttribute('class', 'policy-table-section'); | 446 section.setAttribute('class', 'policy-table-section'); |
| 451 | 447 |
| 452 // Add title and description. | 448 // Add title and description. |
| 453 var title = window.document.createElement('h3'); | 449 var title = window.document.createElement('h3'); |
| 454 title.textContent = label_title; | 450 title.textContent = label_title; |
| 455 section.appendChild(title); | 451 section.appendChild(title); |
| 456 | 452 |
| 457 if (label_content) { | 453 if (label_content) { |
| 458 var description = window.document.createElement('div'); | 454 var description = window.document.createElement('div'); |
| 459 description.classList.add('table-description'); | 455 description.classList.add('table-description'); |
| 460 description.textContent = label_content; | 456 description.textContent = label_content; |
| 461 section.appendChild(description); | 457 section.appendChild(description); |
| 462 } | 458 } |
| 463 | 459 |
| 464 // Add 'No Policies Set' element. | 460 // Add 'No Policies Set' element. |
| 465 var noPolicies = window.document.createElement('div'); | 461 var noPolicies = window.document.createElement('div'); |
| 466 noPolicies.classList.add('no-policies-set'); | 462 noPolicies.classList.add('no-policies-set'); |
| 467 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); | 463 noPolicies.textContent = loadTimeData.getString('noPoliciesSet'); |
| 468 section.appendChild(noPolicies); | 464 section.appendChild(noPolicies); |
| 469 | 465 |
| 470 // Add table of policies. | 466 // Add table of policies. |
| 471 var newTable = this.createPolicyTable(includeStatus); | 467 var newTable = this.createPolicyTable(); |
| 472 section.appendChild(newTable); | 468 section.appendChild(newTable); |
| 473 | 469 |
| 474 return section; | 470 return section; |
| 475 }, | 471 }, |
| 476 | 472 |
| 477 /** | 473 /** |
| 478 * Creates a new table for displaying policies. | 474 * Creates a new table for displaying policies. |
| 479 * @param {boolean} includeStatus Whether to include a status column. | 475 * @param {boolean} includeStatus Whether to include a status column. |
|
anitawoodruff
2013/06/18 13:50:41
this one too.
| |
| 480 * @return {Element} The newly created table. | 476 * @return {Element} The newly created table. |
| 481 */ | 477 */ |
| 482 createPolicyTable: function(includeStatus) { | 478 createPolicyTable: function() { |
| 483 var newTable = window.document.createElement('table'); | 479 var newTable = window.document.createElement('table'); |
| 484 var tableHead = window.document.createElement('thead'); | 480 var tableHead = window.document.createElement('thead'); |
| 485 var tableRow = window.document.createElement('tr'); | 481 var tableRow = window.document.createElement('tr'); |
| 486 var tableHeadings = ['headerScope', 'headerLevel', | 482 var tableHeadings = ['headerScope', 'headerLevel', |
| 487 'headerName', 'headerValue']; | 483 'headerName', 'headerValue', 'headerStatus']; |
| 488 | |
| 489 for (var i = 0; i < tableHeadings.length; i++) { | 484 for (var i = 0; i < tableHeadings.length; i++) { |
| 490 var tableHeader = window.document.createElement('th'); | 485 var tableHeader = window.document.createElement('th'); |
| 491 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); | 486 tableHeader.textContent = loadTimeData.getString(tableHeadings[i]); |
| 492 tableRow.appendChild(tableHeader); | 487 tableRow.appendChild(tableHeader); |
| 493 } | 488 } |
| 494 | |
| 495 if (includeStatus) { | |
| 496 var statusHeader = window.document.createElement('th'); | |
| 497 statusHeader.classList.add('status-column'); | |
| 498 statusHeader.textContent = loadTimeData.getString('headerStatus'); | |
| 499 tableRow.appendChild(statusHeader); | |
| 500 } | |
| 501 | |
| 502 tableHead.appendChild(tableRow); | 489 tableHead.appendChild(tableRow); |
| 503 newTable.appendChild(tableHead); | 490 newTable.appendChild(tableHead); |
| 504 cr.ui.decorate(newTable, PolicyTable); | 491 cr.ui.decorate(newTable, PolicyTable); |
| 505 return newTable; | 492 return newTable; |
| 506 }, | 493 }, |
| 507 | 494 |
| 508 /** | 495 /** |
| 509 * 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 |
| 510 * status. | 497 * status. |
| 511 * @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... | |
| 541 return { | 528 return { |
| 542 Page: Page | 529 Page: Page |
| 543 }; | 530 }; |
| 544 }); | 531 }); |
| 545 | 532 |
| 546 // Have the main initialization function be called when the page finishes | 533 // Have the main initialization function be called when the page finishes |
| 547 // loading. | 534 // loading. |
| 548 document.addEventListener( | 535 document.addEventListener( |
| 549 'DOMContentLoaded', | 536 'DOMContentLoaded', |
| 550 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); | 537 policy.Page.getInstance().initialize.bind(policy.Page.getInstance())); |
| OLD | NEW |