| OLD | NEW |
| 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2010 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('options.contentSettings', function() { | 5 cr.define('options.contentSettings', function() { |
| 6 const List = cr.ui.List; | 6 const List = cr.ui.List; |
| 7 const ListItem = cr.ui.ListItem; | 7 const ListItem = cr.ui.ListItem; |
| 8 const ArrayDataModel = cr.ui.ArrayDataModel; | 8 const ArrayDataModel = cr.ui.ArrayDataModel; |
| 9 | 9 |
| 10 /** | 10 /** |
| 11 * Creates a new exceptions list item. | 11 * Creates a new exceptions list item. |
| 12 * @param {string} contentType The type of the list. |
| 12 * @param {Array} exception A pair of the form [filter, setting]. | 13 * @param {Array} exception A pair of the form [filter, setting]. |
| 13 * @constructor | 14 * @constructor |
| 14 * @extends {cr.ui.ListItem} | 15 * @extends {cr.ui.ListItem} |
| 15 */ | 16 */ |
| 16 function ExceptionsListItem(exception) { | 17 function ExceptionsListItem(contentType, exception) { |
| 17 var el = cr.doc.createElement('li'); | 18 var el = cr.doc.createElement('li'); |
| 19 el.contentType = contentType; |
| 18 el.dataItem = exception; | 20 el.dataItem = exception; |
| 19 el.__proto__ = ExceptionsListItem.prototype; | 21 el.__proto__ = ExceptionsListItem.prototype; |
| 20 el.decorate(); | 22 el.decorate(); |
| 21 | 23 |
| 22 return el; | 24 return el; |
| 23 } | 25 } |
| 24 | 26 |
| 25 ExceptionsListItem.prototype = { | 27 ExceptionsListItem.prototype = { |
| 26 __proto__: ListItem.prototype, | 28 __proto__: ListItem.prototype, |
| 27 | 29 |
| (...skipping 15 matching lines...) Expand all Loading... |
| 43 | 45 |
| 44 // Elements for edit mode. | 46 // Elements for edit mode. |
| 45 var input = cr.doc.createElement('input'); | 47 var input = cr.doc.createElement('input'); |
| 46 input.type = 'text'; | 48 input.type = 'text'; |
| 47 this.appendChild(input); | 49 this.appendChild(input); |
| 48 input.className = 'exceptionInput hidden'; | 50 input.className = 'exceptionInput hidden'; |
| 49 | 51 |
| 50 var select = cr.doc.createElement('select'); | 52 var select = cr.doc.createElement('select'); |
| 51 var optionAllow = cr.doc.createElement('option'); | 53 var optionAllow = cr.doc.createElement('option'); |
| 52 optionAllow.textContent = templateData.allowException; | 54 optionAllow.textContent = templateData.allowException; |
| 55 select.appendChild(optionAllow); |
| 53 var optionBlock = cr.doc.createElement('option'); | 56 var optionBlock = cr.doc.createElement('option'); |
| 54 optionBlock.textContent = templateData.blockException; | 57 optionBlock.textContent = templateData.blockException; |
| 55 select.appendChild(optionAllow); | |
| 56 select.appendChild(optionBlock); | 58 select.appendChild(optionBlock); |
| 59 |
| 60 if (this.contentType == 'cookies') { |
| 61 var optionSession = cr.doc.createElement('option'); |
| 62 optionSession.textContent = templateData.sessionException; |
| 63 select.appendChild(optionSession); |
| 64 this.optionSession = optionSession; |
| 65 } |
| 66 |
| 57 this.appendChild(select); | 67 this.appendChild(select); |
| 58 select.className = 'exceptionSetting hidden'; | 68 select.className = 'exceptionSetting hidden'; |
| 59 | 69 |
| 60 // Used to track whether the URL pattern in the input is valid. | 70 // Used to track whether the URL pattern in the input is valid. |
| 61 // This will be true if the browser process has informed us that the | 71 // This will be true if the browser process has informed us that the |
| 62 // current text in the input is valid. Changing the text resets this to | 72 // current text in the input is valid. Changing the text resets this to |
| 63 // false, and getting a response from the browser sets it back to true. | 73 // false, and getting a response from the browser sets it back to true. |
| 64 // It starts off as false for empty string (new exceptions) or true for | 74 // It starts off as false for empty string (new exceptions) or true for |
| 65 // already-existing exceptions (which we assume are valid). | 75 // already-existing exceptions (which we assume are valid). |
| 66 this.inputValidityKnown = this.pattern; | 76 this.inputValidityKnown = this.pattern; |
| 67 // This one tracks the actual validity of the pattern in the input. This | 77 // This one tracks the actual validity of the pattern in the input. This |
| 68 // starts off as true so as not to annoy the user when he adds a new and | 78 // starts off as true so as not to annoy the user when he adds a new and |
| 69 // empty input. | 79 // empty input. |
| 70 this.inputIsValid = true; | 80 this.inputIsValid = true; |
| 71 | 81 |
| 72 this.patternLabel = patternLabel; | 82 this.patternLabel = patternLabel; |
| 73 this.settingLabel = settingLabel; | 83 this.settingLabel = settingLabel; |
| 74 this.input = input; | 84 this.input = input; |
| 75 this.select = select; | 85 this.select = select; |
| 76 this.optionAllow = optionAllow; | 86 this.optionAllow = optionAllow; |
| 77 this.optionBlock = optionBlock; | 87 this.optionBlock = optionBlock; |
| 78 | 88 |
| 79 this.updateEditables(); | 89 this.updateEditables(); |
| 80 | 90 |
| 81 var listItem = this; | 91 var listItem = this; |
| 82 // Handle events on the editable nodes. | 92 // Handle events on the editable nodes. |
| 83 input.oninput = function(event) { | 93 input.oninput = function(event) { |
| 84 listItem.inputValidityKnown = false; | 94 listItem.inputValidityKnown = false; |
| 85 if (listItem.parentNode) { | 95 chrome.send('checkExceptionPatternValidity', |
| 86 chrome.send('checkExceptionPatternValidity', | 96 [listItem.contentType, input.value]); |
| 87 [listItem.parentNode.contentType, input.value]); | |
| 88 } | |
| 89 }; | 97 }; |
| 90 | 98 |
| 91 var eventsToStop = | 99 var eventsToStop = |
| 92 ['mousedown', 'mouseup', 'contextmenu', 'dblclick', 'paste']; | 100 ['mousedown', 'mouseup', 'contextmenu', 'dblclick', 'paste']; |
| 93 eventsToStop.forEach(function(type) { | 101 eventsToStop.forEach(function(type) { |
| 94 input.addEventListener(type, function(e) { | 102 input.addEventListener(type, function(e) { |
| 95 e.stopPropagation(); | 103 e.stopPropagation(); |
| 96 }); | 104 }); |
| 97 } | 105 } |
| 98 ); | 106 ); |
| (...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 196 updateEditables: function() { | 204 updateEditables: function() { |
| 197 if (!(this.pattern && this.setting)) | 205 if (!(this.pattern && this.setting)) |
| 198 return; | 206 return; |
| 199 | 207 |
| 200 this.input.value = this.pattern; | 208 this.input.value = this.pattern; |
| 201 | 209 |
| 202 if (this.setting == 'allow') | 210 if (this.setting == 'allow') |
| 203 this.optionAllow.selected = true; | 211 this.optionAllow.selected = true; |
| 204 else if (this.setting == 'block') | 212 else if (this.setting == 'block') |
| 205 this.optionBlock.selected = true; | 213 this.optionBlock.selected = true; |
| 214 else if (this.setting == 'session') |
| 215 this.optionSession.selected = true; |
| 206 }, | 216 }, |
| 207 | 217 |
| 208 /** | 218 /** |
| 209 * Whether the user is currently able to edit the list item. | 219 * Whether the user is currently able to edit the list item. |
| 210 * @type {boolean} | 220 * @type {boolean} |
| 211 */ | 221 */ |
| 212 get editing() { | 222 get editing() { |
| 213 return this.hasAttribute('editing'); | 223 return this.hasAttribute('editing'); |
| 214 }, | 224 }, |
| 215 set editing(editing) { | 225 set editing(editing) { |
| 216 var oldEditing = this.editing; | 226 var oldEditing = this.editing; |
| 217 if (oldEditing == editing) | 227 if (oldEditing == editing) |
| 218 return; | 228 return; |
| 219 | 229 |
| 220 var listItem = this; | 230 var listItem = this; |
| 221 var pattern = this.pattern; | 231 var pattern = this.pattern; |
| 222 var setting = this.setting; | 232 var setting = this.setting; |
| 223 var patternLabel = this.patternLabel; | 233 var patternLabel = this.patternLabel; |
| 224 var settingLabel = this.settingLabel; | 234 var settingLabel = this.settingLabel; |
| 225 var input = this.input; | 235 var input = this.input; |
| 226 var select = this.select; | 236 var select = this.select; |
| 227 var optionAllow = this.optionAllow; | 237 var optionAllow = this.optionAllow; |
| 228 var optionBlock = this.optionBlock; | 238 var optionBlock = this.optionBlock; |
| 239 var optionSession = this.optionSession; |
| 229 | 240 |
| 230 // Check that we have a valid pattern and if not we do not change the | 241 // Check that we have a valid pattern and if not we do not change the |
| 231 // editing mode. | 242 // editing mode. |
| 232 if (!editing && (!this.inputValidityKnown || !this.inputIsValid)) { | 243 if (!editing && (!this.inputValidityKnown || !this.inputIsValid)) { |
| 233 input.focus(); | 244 input.focus(); |
| 234 input.select(); | 245 input.select(); |
| 235 return; | 246 return; |
| 236 } | 247 } |
| 237 | 248 |
| 238 patternLabel.classList.toggle('hidden'); | 249 patternLabel.classList.toggle('hidden'); |
| 239 settingLabel.classList.toggle('hidden'); | 250 settingLabel.classList.toggle('hidden'); |
| 240 input.classList.toggle('hidden'); | 251 input.classList.toggle('hidden'); |
| 241 select.classList.toggle('hidden'); | 252 select.classList.toggle('hidden'); |
| 242 | 253 |
| 243 var doc = this.ownerDocument; | 254 var doc = this.ownerDocument; |
| 244 if (editing) { | 255 if (editing) { |
| 245 this.setAttribute('editing', ''); | 256 this.setAttribute('editing', ''); |
| 246 cr.ui.limitInputWidth(input, this, 20); | 257 cr.ui.limitInputWidth(input, this, 20); |
| 247 input.focus(); | 258 input.focus(); |
| 248 input.select(); | 259 input.select(); |
| 249 } else { | 260 } else { |
| 250 var newPattern = input.value; | 261 var newPattern = input.value; |
| 251 | 262 |
| 252 this.pattern = patternLabel.textContent = newPattern; | 263 this.pattern = patternLabel.textContent = newPattern; |
| 253 if (optionAllow.selected) | 264 if (optionAllow.selected) |
| 254 this.setting = 'allow'; | 265 this.setting = 'allow'; |
| 255 else if (optionBlock.selected) | 266 else if (optionBlock.selected) |
| 256 this.setting = 'block'; | 267 this.setting = 'block'; |
| 268 else if (optionSession.selected) |
| 269 this.setting = 'session'; |
| 257 settingLabel.textContent = this.settingForDisplay(); | 270 settingLabel.textContent = this.settingForDisplay(); |
| 258 | 271 |
| 259 this.removeAttribute('editing'); | 272 this.removeAttribute('editing'); |
| 260 | 273 |
| 261 var contentType = this.parentNode.contentType; | 274 var contentType = this.parentNode.contentType; |
| 262 | 275 |
| 263 if (pattern != this.pattern) | 276 if (pattern != this.pattern) |
| 264 chrome.send('removeExceptions', [contentType, pattern]); | 277 chrome.send('removeExceptions', [contentType, pattern]); |
| 265 | 278 |
| 266 chrome.send('setException', [contentType, this.pattern, this.setting]); | 279 chrome.send('setException', [contentType, this.pattern, this.setting]); |
| (...skipping 18 matching lines...) Expand all Loading... |
| 285 List.prototype.decorate.call(this); | 298 List.prototype.decorate.call(this); |
| 286 | 299 |
| 287 this.dataModel = new ArrayDataModel([]); | 300 this.dataModel = new ArrayDataModel([]); |
| 288 }, | 301 }, |
| 289 | 302 |
| 290 /** | 303 /** |
| 291 * Creates an item to go in the list. | 304 * Creates an item to go in the list. |
| 292 * @param {Object} entry The element from the data model for this row. | 305 * @param {Object} entry The element from the data model for this row. |
| 293 */ | 306 */ |
| 294 createItem: function(entry) { | 307 createItem: function(entry) { |
| 295 return new ExceptionsListItem(entry); | 308 return new ExceptionsListItem(this.contentType, entry); |
| 296 }, | 309 }, |
| 297 | 310 |
| 298 /** | 311 /** |
| 299 * Adds an exception to the js model. | 312 * Adds an exception to the js model. |
| 300 * @param {Array} entry A pair of the form [filter, setting]. | 313 * @param {Array} entry A pair of the form [filter, setting]. |
| 301 */ | 314 */ |
| 302 addException: function(entry) { | 315 addException: function(entry) { |
| 303 this.dataModel.push(entry); | 316 this.dataModel.push(entry); |
| 304 | 317 |
| 305 // When an empty row is added, put it into editing mode. | 318 // When an empty row is added, put it into editing mode. |
| (...skipping 129 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 435 this.updateButtonSensitivity(); | 448 this.updateButtonSensitivity(); |
| 436 }, | 449 }, |
| 437 }; | 450 }; |
| 438 | 451 |
| 439 return { | 452 return { |
| 440 ExceptionsListItem: ExceptionsListItem, | 453 ExceptionsListItem: ExceptionsListItem, |
| 441 ExceptionsList: ExceptionsList, | 454 ExceptionsList: ExceptionsList, |
| 442 ExceptionsArea: ExceptionsArea | 455 ExceptionsArea: ExceptionsArea |
| 443 }; | 456 }; |
| 444 }); | 457 }); |
| OLD | NEW |