| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 An option page for configuring notifications. | 2 An option page for configuring notifications. |
| 3 | 3 |
| 4 Copyright 2010 the Chromium Authors | 4 Copyright 2010 the Chromium Authors |
| 5 | 5 |
| 6 Use of this source code is governed by a BSD-style license that can be found | 6 Use of this source code is governed by a BSD-style license that can be found |
| 7 in the "LICENSE" file. | 7 in the "LICENSE" file. |
| 8 | 8 |
| 9 Brian Kennish <bkennish@chromium.org> | 9 Brian Kennish <bkennish@chromium.org> |
| 10 --> | 10 --> |
| 11 <title>Notification Demo</title> | 11 <!doctype html> |
| 12 <style> | 12 <html> |
| 13 /* Clone the look and feel of "chrome://" pages. */ | 13 <head> |
| 14 body { | 14 <title>Notification Demo</title> |
| 15 margin: 10px; | 15 <link href="style.css" rel="stylesheet" type="text/css"> |
| 16 font: 84% Arial, sans-serif | 16 <script src="options.js"></script> |
| 17 } | 17 </head> |
| 18 | 18 <body> |
| 19 h1 { font-size: 156% } | 19 <h1> |
| 20 | 20 <img src="64.png" alt="Toast"> |
| 21 h1 img { | 21 Notification Demo |
| 22 margin: 1px 5px 0 1px; | 22 </h1> |
| 23 vertical-align: middle | 23 <h2>Options</h2> |
| 24 } | 24 <form id="options"> |
| 25 | 25 <input type="checkbox" name="isActivated" checked> |
| 26 h2 { | 26 Display a notification every |
| 27 border-top: 1px solid #9cc2ef; | 27 <select name="frequency"> |
| 28 background-color: #ebeff9; | 28 <option>1</option> |
| 29 padding: 3px 5px; | 29 <option>2</option> |
| 30 font-size: 100% | 30 <option>3</option> |
| 31 } | 31 <option>4</option> |
| 32 </style> | 32 <option>5</option> |
| 33 <script> | 33 <option>10</option> |
| 34 /* | 34 <option>15</option> |
| 35 Grays out or [whatever the opposite of graying out is called] the option | 35 <option>20</option> |
| 36 field. | 36 <option>25</option> |
| 37 */ | 37 <option>30</option> |
| 38 function ghost(isDeactivated) { | 38 </select> |
| 39 options.style.color = isDeactivated ? 'graytext' : 'black'; | 39 minute(s). |
| 40 // The label color. | 40 </form> |
| 41 options.frequency.disabled = isDeactivated; // The control manipulability. | 41 </body> |
| 42 } | 42 </html> |
| 43 | |
| 44 onload = function() { | |
| 45 // Initialize the option controls. | |
| 46 options.isActivated.checked = JSON.parse(localStorage.isActivated); | |
| 47 // The display activation. | |
| 48 options.frequency.value = localStorage.frequency; | |
| 49 // The display frequency, in minutes. | |
| 50 | |
| 51 if (!options.isActivated.checked) { ghost(true); } | |
| 52 | |
| 53 // Set the display activation and frequency. | |
| 54 options.isActivated.onchange = function() { | |
| 55 localStorage.isActivated = options.isActivated.checked; | |
| 56 ghost(!options.isActivated.checked); | |
| 57 }; | |
| 58 | |
| 59 options.frequency.onchange = function() { | |
| 60 localStorage.frequency = options.frequency.value; | |
| 61 }; | |
| 62 }; | |
| 63 </script> | |
| 64 <h1> | |
| 65 <img src="64.png" alt="Toast"> | |
| 66 Notification Demo | |
| 67 </h1> | |
| 68 <h2>Options</h2> | |
| 69 <form id="options"> | |
| 70 <input type="checkbox" name="isActivated" checked> | |
| 71 Display a notification every | |
| 72 <select name="frequency"> | |
| 73 <option>1</option> | |
| 74 <option>2</option> | |
| 75 <option>3</option> | |
| 76 <option>4</option> | |
| 77 <option>5</option> | |
| 78 <option>10</option> | |
| 79 <option>15</option> | |
| 80 <option>20</option> | |
| 81 <option>25</option> | |
| 82 <option>30</option> | |
| 83 </select> | |
| 84 minute(s). | |
| 85 </form> | |
| OLD | NEW |