| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- Testing Chrome Notifications. --> |
| 2 <!-- Sat. May. 14, 2016, By: huangs@google.com. --> |
| 3 <!-- Last update: Fri. Jul. 8, 2016. --> |
| 4 <!DOCTYPE html> |
| 5 <html> |
| 6 <head> |
| 7 <meta charset="utf-8"> |
| 8 <title>Testing Chrome Notifications</title> |
| 9 <style type="text/css"> |
| 10 .divCell { |
| 11 display: inline-block; |
| 12 } |
| 13 .leftSep { |
| 14 margin-left: 10px; |
| 15 } |
| 16 #divInputs div { |
| 17 display: flex; |
| 18 flex-direction: row; |
| 19 align-items: flex-start; |
| 20 justify-content: flex-start; |
| 21 margin-bottom: 10px; |
| 22 } |
| 23 #divInputs span { |
| 24 display: inline-block; |
| 25 width: 50px; |
| 26 text-align: right; |
| 27 margin-right: 10px; |
| 28 } |
| 29 input, textarea { |
| 30 width: 800px; |
| 31 } |
| 32 textarea { |
| 33 overflow: scroll; |
| 34 white-space: nowrap; |
| 35 } |
| 36 #divOut { |
| 37 margin-top: 20px; |
| 38 font-family: courier; |
| 39 } |
| 40 </style> |
| 41 <script type="text/javascript"> |
| 42 var MAX_OUT_LINE = 16; |
| 43 var XML_PRESET1 = [ |
| 44 '<toast>', |
| 45 ' <visual>', |
| 46 ' <binding template="ToastImageAndText02">', |
| 47 ' <image id="1" src="file:///R:/a.png"/>', |
| 48 ' <text id="1">asdf</text>', |
| 49 ' <text id="2">fdsa</text>', |
| 50 ' </binding>', |
| 51 ' </visual>', |
| 52 '</toast>'].join('\n'); |
| 53 |
| 54 var XML_PRESET2 = [ |
| 55 '<toast>', |
| 56 ' <visual>', |
| 57 ' <binding template="ToastGeneric">', |
| 58 ' <image id="1" placement="appLogoOverride" src="file:///R:/a.png"/>', |
| 59 ' <text id="1">asdf</text>', |
| 60 ' <text id="2">fdsa</text>', |
| 61 ' </binding>', |
| 62 ' </visual>', |
| 63 ' <actions>', |
| 64 ' <action activationType="background" content="Settings..." ' + |
| 65 'arguments="setting"/>', |
| 66 ' </actions>', |
| 67 '</toast>'].join('\n'); |
| 68 |
| 69 var TEXT_PRESET = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' + |
| 70 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'; |
| 71 |
| 72 function outputLine(s) { |
| 73 var divOut = document.querySelector('#divOut'); |
| 74 var ch_list = divOut.querySelectorAll('.line'); |
| 75 for (var i = 0; i < ch_list.length - (MAX_OUT_LINE - 1); ++i) { |
| 76 ch_list[i].parentNode.removeChild(ch_list[i]); |
| 77 } |
| 78 var line = document.createElement('div'); |
| 79 line.classList.add('line'); |
| 80 line.innerHTML = s; |
| 81 divOut.appendChild(line); |
| 82 } |
| 83 |
| 84 function showNotification() { |
| 85 var opts = {}; |
| 86 var title = document.querySelector('#tbTitle').value; |
| 87 var icon = document.querySelector('#tbIcon').value; |
| 88 var body = document.querySelector('#taBody').value; |
| 89 if (icon) |
| 90 opts.icon = icon; |
| 91 if (body) |
| 92 opts.body = body; |
| 93 var notif = new Notification(title, opts); |
| 94 notif.onclick = function(e) { outputLine('click'); } |
| 95 notif.onclose = function(e) { outputLine('close'); } |
| 96 notif.onerror = function(e) { outputLine('error'); } |
| 97 notif.onshow = function(e) { outputLine('show'); } |
| 98 } |
| 99 |
| 100 function bindAll() { |
| 101 document.querySelector('#tbTitle').value = 'Notification test'; |
| 102 document.querySelector('#taBody').value = TEXT_PRESET; |
| 103 document.querySelector('#tbIcon').value = |
| 104 'https://www.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x
92dp.png'; |
| 105 document.querySelector('#btnShow').addEventListener('click', function() { |
| 106 if (Notification.permission === 'granted') { |
| 107 showNotification(); |
| 108 } else { |
| 109 alert('Cannot show notification: ' + Notification.permission); |
| 110 } |
| 111 }); |
| 112 document.querySelector('#cmdText').addEventListener('click', function(e) { |
| 113 e.preventDefault(); |
| 114 document.querySelector('#taBody').value = TEXT_PRESET; |
| 115 }); |
| 116 document.querySelector('#cmdXml1').addEventListener('click', function(e) { |
| 117 e.preventDefault(); |
| 118 document.querySelector('#taBody').value = XML_PRESET1; |
| 119 }); |
| 120 document.querySelector('#cmdXml2').addEventListener('click', function(e) { |
| 121 e.preventDefault(); |
| 122 document.querySelector('#taBody').value = XML_PRESET2; |
| 123 }); |
| 124 } |
| 125 |
| 126 document.addEventListener('DOMContentLoaded', function() { |
| 127 bindAll(); |
| 128 if (Notification.permission !== 'granted') { |
| 129 Notification.requestPermission(function(permission) { |
| 130 console.log(permission); |
| 131 }); |
| 132 } |
| 133 }); |
| 134 </script> |
| 135 </head> |
| 136 <body> |
| 137 <div id="divInputs"> |
| 138 <div class="row"><span>Title: </span><input id="tbTitle" type="text"></input
></div> |
| 139 <div class="row"><span>Body: </span><textarea id="taBody" rows="16"></textar
ea></div> |
| 140 <div class="row"><span>Image: </span><input id="tbIcon" type="text"></input>
</div> |
| 141 </div> |
| 142 <div> |
| 143 <div class="divCell"> |
| 144 <button id="btnShow">Show Notification</btn> |
| 145 </div> |
| 146 <div class="divCell leftSep"> |
| 147 <a href="#" id="cmdText">Text Preset</a> |
| 148 </div> |
| 149 <div class="divCell leftSep"> |
| 150 <a href="#" id="cmdXml1">XML Preset 1</a> |
| 151 </div> |
| 152 <div class="divCell leftSep"> |
| 153 <a href="#" id="cmdXml2">XML Preset 2</a> |
| 154 </div> |
| 155 </div> |
| 156 <div id="divOut"></div> |
| 157 </body> |
| 158 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2033093003:
[Notification] Make HTML5 Notification use ActionCenter on Windows 10, behind Flags.
Base URL: https://chromium.googlesource.com/chromium/src.git@master