| OLD | NEW | 
 | (Empty) | 
|    1 <html> |  | 
|    2 <body onload="onLoad()"> |  | 
|    3 <script> |  | 
|    4  |  | 
|    5 function log(message) { |  | 
|    6   var div = document.createElement('div'); |  | 
|    7   div.innerText = message; |  | 
|    8   document.getElementById('console').appendChild(div); |  | 
|    9 } |  | 
|   10  |  | 
|   11 function strike(id) { |  | 
|   12   document.getElementById(id).style.textDecoration = "line-through" |  | 
|   13 } |  | 
|   14  |  | 
|   15 function onLoad() { |  | 
|   16   if (!Worker.prototype.postMessage) { // fake workers |  | 
|   17       strike('s1'); |  | 
|   18       strike('s2'); |  | 
|   19       log('[using fake workers]'); |  | 
|   20   } else { |  | 
|   21       log('[using real workers]'); |  | 
|   22   } |  | 
|   23 } |  | 
|   24  |  | 
|   25 var primeWorker; |  | 
|   26 var invalidWorker; |  | 
|   27 var count; |  | 
|   28 var timer; |  | 
|   29  |  | 
|   30 function startWorkers() { |  | 
|   31   startButton.disabled = true; |  | 
|   32  |  | 
|   33   primeWorker = new Worker('resources/worker-primes.js');                       
              |  | 
|   34   primeWorker.onmessage = onMessage; |  | 
|   35   primeWorker.onerror = onError; |  | 
|   36   primeWorker.postMessage(2); |  | 
|   37   count = 3; |  | 
|   38  |  | 
|   39   timer = setInterval(onTimer, 1000); |  | 
|   40   try { |  | 
|   41     invalidWorker = new Worker('non-existent-worker.js'); |  | 
|   42   } catch(e) { |  | 
|   43   } |  | 
|   44   log('Started worker'); |  | 
|   45 } |  | 
|   46  |  | 
|   47 function onTimer() { |  | 
|   48   primeWorker.postMessage(count); |  | 
|   49   count+=2; |  | 
|   50 } |  | 
|   51  |  | 
|   52 function onMessage(event) { |  | 
|   53   if (event.data[1]) { |  | 
|   54     log(event.data[0]); |  | 
|   55     if (event.data[0] === 5) |  | 
|   56       strike('s6'); |  | 
|   57   } |  | 
|   58 } |  | 
|   59  |  | 
|   60 function onError(event) { |  | 
|   61   log('Error in worker: ' + event.message); |  | 
|   62   strike('s8'); |  | 
|   63 } |  | 
|   64  |  | 
|   65 function causeError() { |  | 
|   66   primeWorker.postMessage('forty two'); |  | 
|   67 } |  | 
|   68  |  | 
|   69 function stopWorker() { |  | 
|   70   log('Stopping worker...'); |  | 
|   71   if (timer) { |  | 
|   72     clearInterval(timer); |  | 
|   73     timer = 0; |  | 
|   74   } |  | 
|   75   primeWorker.terminate(); |  | 
|   76   startButton.disabled = false; |  | 
|   77 } |  | 
|   78  |  | 
|   79 </script> |  | 
|   80  |  | 
|   81 <h1>Tests debugging of HTML5 Workers</h1> |  | 
|   82  |  | 
|   83 <ol> |  | 
|   84  |  | 
|   85 <li id="s1">Open DevTools, Scripts Panel; Tick Debug on Workers sidebar.</li> |  | 
|   86 <li id="s2">Reload the page.</li> |  | 
|   87 <li id="s3"><button onclick="startWorkers()" id="startButton">Start Worker</butt
     on></li> |  | 
|   88 <li id="s4">Observe 2 workers appear in the worker sidebar pane (including non-e
     xistent-worker.js)"</li> |  | 
|   89 <li id="s5">Observe worker-primes.js and primes.js appear in scripts drop-down b
     ox.</li> |  | 
|   90 <li id="s6">Assure primes are being logged to test console below.</li> |  | 
|   91 <li id="s7">Set a breakpoint on one of worker scripts, assure it's hit.</li> |  | 
|   92 <li id="s8">Try causing an error in worker, observe it's logged in DevTools cons
     ole and in test console below. |  | 
|   93   <button onclick="causeError()">Cause Error</button> |  | 
|   94 <li id="s9"><button onclick="stopWorker()">Stop Worker</button></li> |  | 
|   95  |  | 
|   96 </ol> |  | 
|   97  |  | 
|   98 <div id="console" style="font-family: courier; background-color: black; color: g
     reen; width: 80em; height: 25em; overflow: scroll"> |  | 
|   99 </div> |  | 
|  100  |  | 
|  101 </body> |  | 
|  102 </html> |  | 
| OLD | NEW |