popup.js revision 2a99a7e74a7f215066514fe81d2bfa6639d9eddd
15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)// found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/** 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This class wraps the popup's form, and performs the proper clearing of data 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * based on the user's selections. It depends on the form containing a single 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * select element with an id of 'timeframe', and a single button with an id of 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 'button'. When you write actual code you should probably be a little more 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * accepting of variance, but this is just a sample app. :) 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Most of this is boilerplate binding the controller to the UI. The bits that 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * specifically will be useful when using the BrowsingData API are contained in 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * `parseMilliseconds_`, `handleCallback_`, and `handleClick_`. 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @constructor 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)var PopupController = function () { 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.button_ = document.getElementById('button'); 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.timeframe_ = document.getElementById('timeframe'); 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.addListeners_(); 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)PopupController.prototype = { 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * A cached reference to the button element. 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @type {Element} 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button_: null, 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * A cached reference to the select element. 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @type {Element} 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) timeframe_: null, 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Adds event listeners to the button in order to capture a user's click, and 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * perform some action in response. 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) addListeners_: function () { 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.button_.addEventListener('click', this.handleClick_.bind(this)); 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Given a string, return milliseconds since epoch. If the string isn't 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * valid, returns undefined. 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @param {string} timeframe One of 'hour', 'day', 'week', '4weeks', or 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 'forever'. 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @returns {number} Milliseconds since epoch. 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) parseMilliseconds_: function (timeframe) { 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var now = new Date().getTime(); 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var milliseconds = { 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'hour': 60 * 60 * 1000, 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'day': 24 * 60 * 60 * 1000, 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 'week': 7 * 24 * 60 * 60 * 1000, 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) '4weeks': 4 * 7 * 24 * 60 * 60 * 1000 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (milliseconds[timeframe]) 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return now - milliseconds[timeframe]; 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (timeframe === 'forever') 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return 0; 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) return null; 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Handle a success/failure callback from the `browsingData` API methods, 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * updating the UI appropriately. 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) handleCallback_: function () { 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var success = document.createElement('div'); 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) success.classList.add('overlay'); 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) success.setAttribute('role', 'alert'); 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) success.textContent = 'Data has been cleared.'; 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) document.body.appendChild(success); 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) setTimeout(function() { success.classList.add('visible'); }, 10); 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) setTimeout(function() { 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (close === false) 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) success.classList.remove('visible'); 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) else 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) window.close(); 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 4000); 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /** 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * When a user clicks the button, this method is called: it reads the current 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * state of `timeframe_` in order to pull a timeframe, then calls the clearing 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * method with appropriate arguments. 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * @private 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) handleClick_: function () { 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) var removal_start = this.parseMilliseconds_(this.timeframe_.value); 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) if (removal_start !== undefined) { 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.button_.setAttribute('disabled', 'disabled'); 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) this.button_.innerText = 'Clearing...'; 1122a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) chrome.browsingData.remove({ "since" : removal_start }, { 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "appcache": true, 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "cache": true, 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "cookies": true, 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "downloads": true, 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "fileSystems": true, 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "formData": true, 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "history": true, 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "indexedDB": true, 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "localStorage": true, 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "serverBoundCertificates": true, 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "pluginData": true, 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "passwords": true, 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) "webSQL": true 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) }, this.handleCallback_.bind(this)); 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}; 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)document.addEventListener('DOMContentLoaded', function () { 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) window.PC = new PopupController(); 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)}); 134