├── .gitignore
├── README.md
├── data
    ├── audio-iframe.html
    ├── audio-iframe.js
    ├── channels.js
    ├── chat-rtc.js
    ├── chat.html
    ├── domutils.js
    ├── freeze.js
    ├── logging.js
    ├── login-iframe.html
    ├── login-iframe.js
    ├── master.js
    ├── md5.js
    ├── mirror.js
    ├── rtc.js
    ├── share-worker.js
    ├── sharing.html
    ├── sharing.js
    ├── startup-help.html
    ├── user.js
    └── wsecho.js
├── examples
    └── index.html
├── lib
    ├── channels.js
    ├── chrome-md5.js
    ├── main.js
    ├── rtc.js
    ├── sharer.js
    ├── sidebar.js
    ├── startup-panel.js
    └── user.js
├── package.json
├── server.js
├── site
    ├── blank.html
    ├── bootstrap
    │   ├── css
    │   │   ├── bootstrap.css
    │   │   └── bootstrap.min.css
    │   ├── img
    │   │   ├── glyphicons-halflings-white.png
    │   │   └── glyphicons-halflings.png
    │   └── js
    │   │   ├── bootstrap.js
    │   │   └── bootstrap.min.js
    ├── client.js
    ├── homepage.css
    ├── homepage.html
    ├── share-button-screenshot.png
    ├── share-html-inner.js
    ├── share-html.js
    ├── share-link-2-screenshot.png
    ├── share-link-screenshot.png
    ├── view-inner.html
    └── view.html
├── test
    ├── test_diff.html
    └── test_jsmirror.html
└── todo.txt


/.gitignore:
--------------------------------------------------------------------------------
1 | Profile
2 | data/browsermirror.xpi
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Browser Mirror
 2 | 
 3 | This is an experiment in session sharing through the browser.
 4 | 
 5 | The goal is primarily to explore the feasibility of a particular technique; it is well possible that this will not be a feasible manner of session sharing, but exactly *why* should be interesting.
 6 | 
 7 | ## Implementation
 8 | 
 9 | This is not cooperative sharing, as in the case of Etherpad or Google Wave, but rather a master/client relationship.  The master browser is the active browser, and runs all the Javascript.  The mirror receives all the HTML (i.e., DOM elements) but no Javascript.  Anything that *happens* happens on the master browser and is relayed to the mirror.
10 | 
11 | The mirror in turn will capture events and relay them back to the master.  (This is where feasibility becomes questionable.)  So if for instance the mirror (client) user clicks on something, the specific element and the click event goes back to the master, where it is presented as though the master user clicked on the element.  If this in turn has visible side-effects, these are then transmitted back to the mirror.
12 | 
13 | Form inputs however are transmitted differently, in part because form status is not directly visible in the DOM, but also because the two browsers do not share a mouse cursor, place of focus, or typing cursor.  Instead these edits are allowed in the mirror and the resulting values transmitted back to the master.  There are problems however with things like an input that itself has a dynamic event handler, consider for instance `<input type="text" value="Search...">` which on focus removes the `Search...` text.  This only happens in response to a focus event, and the focus event does not happen on the master.  (Though perhaps it could be triggered, without actually triggering the master's true focus?)
14 | 
15 | Editing conflicts are most likely to occur within these input fields as well.  It is possible that a form of [Operational Transformation](http://en.wikipedia.org/wiki/Operational_transformation) could be used to specifically manage concurrent changes to form fields ([mobwrite](http://code.google.com/p/google-mobwrite/) could be used for this).  It is unclear to me how WYSIWYG editors will work; though since `contentEditable` is a fairly explicit feature we could special case this as well.
16 | 
17 | Notable iframes require additional work, but only insofar as compound pages must be handled.
18 | 
19 | Flash is a complete no-go.
20 | 
21 | ## Communication
22 | 
23 | In addition to just sharing the same page, direct communication will be appropriate.  Simple chat is implemented, as is the concept of highlighting an element.  Because the two browsers are not necessarily rendering the same way (e.g., zoom levels, browser screen size, etc) all these operations have to happen on a DOM level.  I.e., you can't point at a *place*, you can only point at an *element* (though we find the element closest to your place, and possibly we could use an offset to get finer resolution).
24 | 
25 | There is a rough implementation of screen position, but I haven't figured out how to present that.  Also noting changes would probably be useful, so you can see that the other user is changing something (potentially off-screen for you)
26 | .
27 | ## Bookmarklet or Plugin
28 | 
29 | Right now this is implemented as a bookmarklet.  This is relatively easy to work with and largely works.  It cannot feasibly handle iframes, nor can it handle the transition to another page (i.e., if you click a link you will lose your sharing).
30 | 
31 | Ultimately the master would probably be best as a plugin.  This could manage the transitions, and it's possible some things will be revealed which can be solved in a plugin but could not with in-page Javascript.
32 | 
33 | The mirror should probably not require any special browser functionality.  This would also make it easier to share a session with any user, regardless of what they are using.
34 | 
35 | ## Initiating the sharing
36 | 
37 | Right now you are given a URL which the mirror user should go to, starting the sharing session.  Later it's possible F1 or an Open Web App service could facilitate the starting of a shared session, utilizing things like your social contacts.  This work seems to be progressing reasonably elsewhere, so this project won't attempt anything fancy.
38 | 
39 | ## Native sharing
40 | 
41 | A web application *written to be shared* can in many ways be more elegant than what is implemented here.  For instance, it would be superior to share a Google Doc using their built-in sharing facilities than to use this technique.  The reliability of course will be much higher right now, but even if this project worked exactly as intended it would still be better to use the first-class editing concepts built into the web application, which understand intention far better than this project can.
42 | 
43 | One could imagine a formal way for a web page to indicate that it is shareable (and how), and for this to be a fallback when the page doesn't have a native sense of session sharing.
44 | 
45 | ## Permissions
46 | 
47 | Right now the mirror client basically has permission to do anything (though certain things like file selection are not possible).  But it would be easy to give more limited permissions, for instance only permission to view a session, or to require confirmation before some actions take place (like browsing to another URL).  With a plugin it would also be possible to allow the remote client to select a file (possibly using for tech support).
48 | 


--------------------------------------------------------------------------------
/data/audio-iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <style>
 5 |       #audio-chat {
 6 |         width: 100%;
 7 |         height: 100%;
 8 |       }
 9 |     </style>
10 |     <script src="channels.js"></script>
11 |     <script src="rtc.js"></script>
12 |     <script src="audio-iframe.js"></script>
13 |   </head>
14 |   <body>
15 | 
16 |     <video id="audio-chat"></video>
17 | 
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/data/audio-iframe.js:
--------------------------------------------------------------------------------
 1 | var expectedOrigin = null;
 2 | var source;
 3 | 
 4 | var pc;
 5 | 
 6 | // console messages don't show up in this context:
 7 | console = {
 8 |   log: function () {
 9 |     var s = "";
10 |     for (var i=0; i<arguments.length; i++) {
11 |       if (s) {
12 |         s += " ";
13 |       }
14 |       if (typeof arguments[i] == "string") {
15 |         s += arguments[i];
16 |       } else {
17 |         s += JSON.stringify(arguments[i]);
18 |       }
19 |     }
20 |     alert(s);
21 |   }
22 | };
23 | console.warn = console.error = console.info = console.debug = console.log;
24 | 
25 | var channel = new ChromePostMessageIncomingChannel();
26 | channel.onmessage = function (data) {
27 |   alert('CHAT MSG:' + JSON.stringify(data));
28 |   if (data.wantOffer) {
29 |     setupAudio(function (error, result) {
30 |       if (error) {
31 |         console.warn("Error doing setup:", error);
32 |         // FIXME: Should probably message back that it didn't work
33 |         return;
34 |       }
35 |       pc = result.pc;
36 |       channel.send({rtcOffer: result.offer});
37 |     }, "audio-chat");
38 |   } else if (data.rtcOffer) {
39 |   try{
40 |     setupAudio(function (error, result) {
41 |     alert('returned');
42 |       if (error) {
43 |         alert("Error doing setup with offer:", error);
44 |         return;
45 |       }
46 |       pc = result.pc;
47 |       alert('got offer, sending answer');
48 |       channel.send({rtcAnswer: result.answer});
49 |     }, "audio-chat", data.rtcOffer);
50 |     }catch(e){alert("Error in setupAudio: " + e);}
51 |   } else if (data.rtcAnswer) {
52 |     respondToAnswer(function (error) {
53 |     }, pc, data.rtcAnswer);
54 |   }
55 | };
56 | 


--------------------------------------------------------------------------------
/data/channels.js:
--------------------------------------------------------------------------------
  1 | /* Channel abstraction.  Supported channels:
  2 | 
  3 | - WebSocket to an address
  4 | - port.emit/port.on proxying
  5 | - postMessage between windows
  6 | 
  7 | In the future:
  8 | 
  9 | - XMLHttpRequest to a server (with some form of queuing)
 10 | 
 11 | The interface:
 12 | 
 13 |   channel = new ChannelName(parameters)
 14 | 
 15 | The instantiation is per-channel-type
 16 | 
 17 | Methods:
 18 | 
 19 |   onmessage: set to function (jsonData)
 20 |   rawdata: set to true if you want onmessage to receive raw string data
 21 |   onclose: set to function ()
 22 |   onopen: set to function ()
 23 |   send: function (string or jsonData)
 24 |   close: function ()
 25 | 
 26 | .send() will encode the data if it is not a string.
 27 | 
 28 | (should I include readyState as an attribute?)
 29 | 
 30 | Channels must accept messages immediately, caching if the connection
 31 | is not fully established yet.
 32 | 
 33 | */
 34 | 
 35 | if (typeof exports != "undefined" && typeof require != "undefined" &&
 36 |     typeof setTimeout == "undefined") {
 37 |   // In an addon context, need to import setTimeout
 38 |   setTimeout = require("timers").setTimeout;
 39 |   clearTimeout = require("timers").clearTimeout;
 40 | }
 41 | 
 42 | 
 43 | function AbstractChannel() {
 44 |   this.constructor.apply(this, arguments);
 45 | }
 46 | /* Subclasses must define:
 47 | 
 48 | - ._send(string)
 49 | - ._setupConnection()
 50 | - ._ready()
 51 | - .close() (and must set this.closed to true)
 52 | 
 53 | And must call:
 54 | 
 55 | - ._flush() on open
 56 | - ._incoming(string) on incoming message
 57 | - onclose()/onopen() (not onmessage - instead _incoming)
 58 | */
 59 | 
 60 | AbstractChannel.subclass = function (overrides) {
 61 |   var C = function () {
 62 |     this.constructor.apply(this, arguments);
 63 |     this.baseConstructor.apply(this, arguments);
 64 |   };
 65 |   C.prototype = new AbstractChannel();
 66 |   for (var i in overrides) {
 67 |     if (overrides.hasOwnProperty(i)) {
 68 |       C.prototype[i] = overrides[i];
 69 |     }
 70 |   }
 71 |   return C;
 72 | };
 73 | 
 74 | AbstractChannel.prototype = {
 75 |   onmessage: null,
 76 |   rawdata: false,
 77 |   onclose: null,
 78 |   onopen: null,
 79 |   closed: false,
 80 | 
 81 |   baseConstructor: function () {
 82 |     this._buffer = [];
 83 |     this._setupConnection();
 84 |   },
 85 | 
 86 |   send: function (data) {
 87 |     if (this.closed) {
 88 |       throw 'Cannot send to a closed connection';
 89 |     }
 90 |     if (typeof data != "string") {
 91 |       data = JSON.stringify(data);
 92 |     }
 93 |     if (! this._ready()) {
 94 |       this._buffer.push(data);
 95 |       return;
 96 |     }
 97 |     this._send(data);
 98 |   },
 99 | 
100 |   _flush: function () {
101 |     for (var i=0; i<this._buffer.length; i++) {
102 |       this._send(this._buffer[i]);
103 |     }
104 |     this._buffer = [];
105 |   },
106 | 
107 |   _incoming: function (data) {
108 |     if (! this.rawdata) {
109 |       try {
110 |         data = JSON.parse(data);
111 |       } catch (e) {
112 |         console.error("Got invalid JSON data:", data.substr(0, 40));
113 |         throw e;
114 |       }
115 |     }
116 |     if (this.onmessage) {
117 |       this.onmessage(data);
118 |     }
119 |   }
120 | 
121 | };
122 | 
123 | 
124 | var WebSocketChannel = AbstractChannel.subclass({
125 | 
126 |   constructor: function (address) {
127 |     if (address.search(/^https?:/i) === 0) {
128 |       address = address.replace(/^http/i, 'ws');
129 |     }
130 |     this.address = address;
131 |     this.socket = null;
132 |     this._reopening = false;
133 |   },
134 | 
135 |   toString: function () {
136 |     var s = '[WebSocketChannel to ' + this.address;
137 |     if (! this.socket) {
138 |       s += ' (socket unopened)';
139 |     } else {
140 |       s += ' readyState: ' + this.socket.readyState;
141 |     }
142 |     if (this.closed) {
143 |       s += ' CLOSED';
144 |     }
145 |     return s + ']';
146 |   },
147 | 
148 |   close: function () {
149 |     this.closed = true;
150 |     if (this.socket) {
151 |       // socket.onclose will call this.onclose:
152 |       this.socket.close();
153 |     } else {
154 |       if (this.onclose) {
155 |         this.onclose();
156 |       }
157 |     }
158 |   },
159 | 
160 |   _send: function (data) {
161 |     this.socket.send(data);
162 |   },
163 | 
164 |   _ready: function () {
165 |     return this.socket && this.socket.readyState == this.socket.OPEN;
166 |   },
167 | 
168 |   _setupConnection: function () {
169 |     if (this.closed) {
170 |       return;
171 |     }
172 |     this.socket = new WebSocket(this.address);
173 |     this.socket.onopen = (function () {
174 |       this._flush();
175 |       if ((! this._reopening) && this.onopen) {
176 |         this.onopen();
177 |       }
178 |       this._reopening = false;
179 |     }).bind(this);
180 |     this.socket.onclose = (function (event) {
181 |       this.socket = null;
182 |       console.error('WebSocket close', event.wasClean ? 'clean' : 'unclean',
183 |                     'code:', event.code, 'reason:', event.reason || 'none');
184 |       if (! this.closed) {
185 |         this._reopening = true;
186 |         this._setupConnection();
187 |       }
188 |     }).bind(this);
189 |     this.socket.onmessage = (function (event) {
190 |       this._incoming(event.data);
191 |     }).bind(this);
192 |     this.socket.onerror = (function (event) {
193 |       console.error('WebSocket error:', event.data);
194 |     }).bind(this);
195 |   }
196 | 
197 | });
198 | 
199 | 
200 | /* Sends TO a window or iframe */
201 | var PostMessageChannel = AbstractChannel.subclass({
202 |   _pingPollPeriod: 100, // milliseconds
203 |   _pingPollIncrease: 100, // +100 milliseconds for each failure
204 |   _pingMax: 2000, // up to a max of 2000 milliseconds
205 | 
206 |   constructor: function (win, expectedOrigin) {
207 |     this.expectedOrigin = expectedOrigin;
208 |     this._pingReceived = false;
209 |     this._receiveMessage = this._receiveMessage.bind(this);
210 |     if (win) {
211 |       this.bindWindow(win, true);
212 |     }
213 |     this._pingFailures = 0;
214 |   },
215 | 
216 |   toString: function () {
217 |     var s = '[PostMessageChannel';
218 |     if (this.window) {
219 |       s += ' to window ' + this.window;
220 |     } else {
221 |       s += ' not bound to a window';
222 |     }
223 |     if (this.window && ! this._pingReceived) {
224 |       s += ' still establishing';
225 |     }
226 |     return s + ']';
227 |   },
228 | 
229 |   bindWindow: function (win, noSetup) {
230 |     if (this.window) {
231 |       this.close();
232 |       // Though we deinitialized everything, we aren't exactly closed:
233 |       this.closed = false;
234 |     }
235 |     if (win && win.contentWindow) {
236 |       win = win.contentWindow;
237 |     }
238 |     this.window = win;
239 |     // FIXME: The distinction between this.window and window seems unimportant
240 |     // in the case of postMessage
241 |     var w = this.window;
242 |     // In a Content context we add the listener to the local window
243 |     // object, but in the addon context we add the listener to some
244 |     // other window, like the one we were given:
245 |     if (typeof window != "undefined") {
246 |       w = window;
247 |     }
248 |     w.addEventListener("message", this._receiveMessage, false);
249 |     if (! noSetup) {
250 |       this._setupConnection();
251 |     }
252 |   },
253 | 
254 |   _send: function (data) {
255 |     this.window.postMessage(data, this.expectedOrigin || "*");
256 |   },
257 | 
258 |   _ready: function () {
259 |     return this.window && this._pingReceived;
260 |   },
261 | 
262 |   _setupConnection: function () {
263 |     if (this.closed || this._pingReceived || (! this.window)) {
264 |       return;
265 |     }
266 |     this._pingFailures++;
267 |     this._send("hello");
268 |     // We'll keep sending ping messages until we get a reply
269 |     var time = this._pingPollPeriod + (this._pingPollIncrease * this._pingFailures);
270 |     time = time > this._pingPollMax ? this._pingPollMax : time;
271 |     this._pingTimeout = setTimeout(this._setupConnection.bind(this), time);
272 |   },
273 | 
274 |   _receiveMessage: function (event) {
275 |     if (event.source !== this.window) {
276 |       return;
277 |     }
278 |     if (this.expectedOrigin && event.origin != this.expectedOrigin) {
279 |       console.info("Expected message from", this.expectedOrigin,
280 |                    "but got message from", event.origin);
281 |       return;
282 |     }
283 |     if (! this.expectedOrigin) {
284 |       this.expectedOrigin = event.origin;
285 |     }
286 |     if (event.data == "hello") {
287 |       this._pingReceived = true;
288 |       if (this._pingTimeout) {
289 |         clearTimeout(this._pingTimeout);
290 |         this._pingTimeout = null;
291 |       }
292 |       if (this.onopen) {
293 |         this.onopen();
294 |       }
295 |       this._flush();
296 |       return;
297 |     }
298 |     this._incoming(event.data);
299 |   },
300 | 
301 |   close: function () {
302 |     this.closed = true;
303 |     this._pingReceived = false;
304 |     if (this._pingTimeout) {
305 |       clearTimeout(this._pingTimeout);
306 |     }
307 |     window.removeEventListener("message", this._receiveMessage, false);
308 |     if (this.onclose) {
309 |       this.onclose();
310 |     }
311 |   }
312 | 
313 | });
314 | 
315 | 
316 | /* Handles message FROM an exterior window/parent */
317 | var PostMessageIncomingChannel = AbstractChannel.subclass({
318 | 
319 |   constructor: function (expectedOrigin) {
320 |     this.source = null;
321 |     this.expectedOrigin = expectedOrigin;
322 |     this._receiveMessage = this._receiveMessage.bind(this);
323 |     window.addEventListener("message", this._receiveMessage, false);
324 |   },
325 | 
326 |   toString: function () {
327 |     var s = '[PostMessageIncomingChannel';
328 |     if (this.source) {
329 |       s += ' bound to source ' + s;
330 |     } else {
331 |       s += ' awaiting source';
332 |     }
333 |     return s + ']';
334 |   },
335 | 
336 |   _send: function (data) {
337 |     this.source.postMessage(data, this.expectedOrigin);
338 |   },
339 | 
340 |   _ready: function () {
341 |     return !!this.source;
342 |   },
343 | 
344 |   _setupConnection: function () {
345 |   },
346 | 
347 |   _receiveMessage: function (event) {
348 |     if (this.expectedOrigin && this.expectedOrigin != "*" &&
349 |         event.origin != this.expectedOrigin) {
350 |       // FIXME: Maybe not worth mentioning?
351 |       console.info("Expected message from", this.expectedOrigin,
352 |                    "but got message from", event.origin);
353 |       return;
354 |     }
355 |     if (! this.expectedOrigin) {
356 |       this.expectedOrigin = event.origin;
357 |     }
358 |     if (! this.source) {
359 |       this.source = event.source;
360 |     }
361 |     if (event.data == "hello") {
362 |       // Just a ping
363 |       this.source.postMessage("hello", this.expectedOrigin);
364 |       return;
365 |     }
366 |     this._incoming(event.data);
367 |   },
368 | 
369 |   close: function () {
370 |     this.closed = true;
371 |     window.removeEventListener("message", this._receiveMessage, false);
372 |     if (this._pingTimeout) {
373 |       clearTimeout(this._pingTimeout);
374 |     }
375 |     if (this.onclose) {
376 |       this.onclose();
377 |     }
378 |   }
379 | 
380 | });
381 | 
382 | 
383 | var CHROME_CHANNEL_EVENT = "BrowserMirrorChromeChannel";
384 | 
385 | /* Sends TO a window or iframe, from a CHROME window.  Windows and
386 | iframes can't talk back to a chrome window, so we use another
387 | approach */
388 | var ChromePostMessageChannel = AbstractChannel.subclass({
389 |   _pingPollPeriod: 100, // milliseconds
390 | 
391 |   constructor: function (win, doc, expectedOrigin) {
392 |     this.expectedOrigin = expectedOrigin;
393 |     this._pingReceived = false;
394 |     this.doc = doc;
395 |     if (win) {
396 |       this.bindWindow(win, true);
397 |     }
398 |     this._receiveMessage = this._receiveMessage.bind(this);
399 |     this.doc.addEventListener(CHROME_CHANNEL_EVENT, this._receiveMessage, false, true);
400 |   },
401 | 
402 |   toString: function () {
403 |     var s = '[ChromePostMessageChannel';
404 |     if (this.window) {
405 |       s += ' to window ' + this.window;
406 |     } else {
407 |       s += ' not bound to a window';
408 |     }
409 |     if (this.window && ! this._pingReceived) {
410 |       s += ' still establishing';
411 |     }
412 |     return s + ']';
413 |   },
414 | 
415 |   bindWindow: function (win, noSetup) {
416 |     if (this.window) {
417 |       this.close();
418 |     }
419 |     if (win && win.contentWindow) {
420 |       win = win.contentWindow;
421 |     }
422 |     this.window = win;
423 |     if (! noSetup) {
424 |       this._setupConnection();
425 |     }
426 |   },
427 | 
428 |   _send: function (data) {
429 |     this.window.postMessage(data, this.expectedOrigin || "*");
430 |   },
431 | 
432 |   _ready: function () {
433 |     return this.window && this.pingReceived;
434 |   },
435 | 
436 |   _setupConnection: function () {
437 |     if (this.closed || this._pingReceived || (! this.window)) {
438 |       return;
439 |     }
440 |     this._send("hello");
441 |     this._pingTimeout = setTimeout(this._setupConnection.bind(this), this._pingPollPeriod);
442 |   },
443 | 
444 |   _receiveMessage: function (event) {
445 |     var el = event.target;
446 |     var data = el.getAttribute('data-payload');
447 |     el.parentNode.removeChild(el);
448 |     el = null;
449 |     if (data == "hello") {
450 |       this._pingReceived = true;
451 |       if (this._pingTimeout) {
452 |         clearTimeout(this._pingTimeout);
453 |         this._pingTimeout = null;
454 |       }
455 |       if (this.onopen) {
456 |         this.onopen();
457 |       }
458 |       this._flush();
459 |       return;
460 |     }
461 |     self._incoming(data);
462 |   },
463 | 
464 |   close: function () {
465 |     this.closed = true;
466 |     this.doc.remoteEventListener(CHROME_CHANNEL_EVENT, this._receiveMessage, false, true);
467 |     if (this._pingTimeout) {
468 |       clearTimeout(this._pingTimeout);
469 |     }
470 |     if (this.onclose) {
471 |       this.onclose();
472 |     }
473 |   }
474 | 
475 | });
476 | 
477 | 
478 | /* Handles message FROM an exterior CHROME window/parent, with events
479 | for handling the inability of these windows to talk to their chrome
480 | parents */
481 | var ChromePostMessageIncomingChannel = AbstractChannel.subclass({
482 | 
483 |   constructor: function () {
484 |     this._receiveMessage = this._receiveMessage.bind(this);
485 |     window.addEventListener("message", this._receiveMessage, false);
486 |   },
487 | 
488 |   toString: function () {
489 |     var s = '[ChromePostMessageIncomingChannel]';
490 |     return s;
491 |   },
492 | 
493 |   _ready: function () {
494 |     return !! document.head;
495 |   },
496 | 
497 |   _send: function (data) {
498 |     var event = document.createEvent("Events");
499 |     event.initEvent(CHROME_CHANNEL_EVENT, true, false);
500 |     var el = document.createElement("BrowserMirrorPayloadElement");
501 |     el.setAttribute("data-payload", data);
502 |     document.head.appendChild(el);
503 |     el.dispatchEvent(event);
504 |   },
505 | 
506 |   _setupConnection: function () {
507 |   },
508 | 
509 |   _receiveMessage: function (event) {
510 |     if (event.source || event.origin) {
511 |       // If either of these are set, it's not a postMessage from a
512 |       // Chrome window
513 |       // FIXME: warn?  Or an option to warn in this case?
514 |       return;
515 |     }
516 |     if (event.data == "hello") {
517 |       if (this._ready()) {
518 |         this._send("hello");
519 |       } else {
520 |         // Wait a moment to respond
521 |         setTimeout((function () {
522 |           this._receiveMessage(event);
523 |         }).bind(this), 100);
524 |       }
525 |       return;
526 |     }
527 |     this._incoming(event.data);
528 |   },
529 | 
530 |   close: function () {
531 |     this.closed = true;
532 |     window.removeEventListener("message", this._receiveMessage, false);
533 |     if (this.onclose) {
534 |       this.onclose();
535 |     }
536 |   }
537 | 
538 | });
539 | 
540 | /* Sends messages over a port.  The "port" is the port object, such as self.port
541 |    or worker.port; it must implement emit, on, and removeListener.
542 | 
543 |    Closed and Opened events are sent across the port to indicate when
544 |   the remote channel is setup or closed.
545 | */
546 | var PortChannel = AbstractChannel.subclass({
547 | 
548 |   constructor: function (port, prefix) {
549 |     this.prefix = prefix || '';
550 |     this.port = port;
551 |     this._incoming = this._incoming.bind(this);
552 |     this._remoteOpened = this._remoteOpened.bind(this);
553 |     this._remoteClosed = this._remoteClosed.bind(this);
554 |     this._gotHello = false;
555 |   },
556 | 
557 |   toString: function () {
558 |     var s = '[PortChannel';
559 |     s += ' port: ' + this.port.toString();
560 |     if (this.prefix) {
561 |       s += ' prefix: "' + this.prefix + '"';
562 |     }
563 |     s += ']';
564 |     return s;
565 |   },
566 | 
567 |   _setupConnection: function () {
568 |     this.port.on(this.prefix + 'Send', this._incoming);
569 |     this.port.on(this.prefix + 'Opened', this._remoteOpened);
570 |     this.port.on(this.prefix + 'Closed', this._remoteClosed);
571 |     this.port.emit("Opened");
572 |   },
573 | 
574 |   destroy: function () {
575 |     this.port.removeListener(this.prefix + 'Send', this._incoming);
576 |     this.port.removeListener(this.prefix + 'Opened', this._remoteOpened);
577 |     this.port.removeListener(this.prefix + 'Closed', this._remoteClosed);
578 |   },
579 | 
580 |   _ready: function () {
581 |     // FIXME: is any kind of ping necessary?
582 |     return this._gotHello;
583 |   },
584 | 
585 |   _remoteOpened: function (helloBack) {
586 |     this._gotHello = true;
587 |     if (! helloBack) {
588 |       // We'll say hello back, in case our original hello was lost
589 |       this.port.emit("Opened", true);
590 |     }
591 |     if (this.onopen) {
592 |       this.onopen();
593 |     }
594 |     this._flush();
595 |   },
596 | 
597 |   _remoteClosed: function () {
598 |     this._gotHello = false;
599 |     if (this.onclose) {
600 |       this.onclose();
601 |     }
602 |     this.destroy();
603 |   },
604 | 
605 |   close: function () {
606 |     this.port.emit("Closed");
607 |     this._remoteClosed();
608 |   },
609 | 
610 |   _send: function (s) {
611 |     this.port.emit("Send", s);
612 |   }
613 | 
614 | });
615 | 
616 | 
617 | /* This proxies to another channel located in another process, via port.emit/port.on */
618 | var PortProxyChannel = AbstractChannel.subclass({
619 | 
620 |   constructor: function (prefix, self_) {
621 |     this.prefix = prefix || '';
622 |     this.self = self_ || self;
623 |     this._incoming = this._incoming.bind(this);
624 |     this._remoteOpened = this._remoteOpened.bind(this);
625 |   },
626 | 
627 |   toString: function () {
628 |     var s = '[PortProxyChannel';
629 |     if (typeof self == "undefined" || this.self !== self) {
630 |       s += ' bound to self ' + this.self;
631 |     }
632 |     if (this.prefix) {
633 |       s += ' with prefix "' + this.prefix + '"';
634 |     }
635 |     return s + ']';
636 |   },
637 | 
638 |   _setupConnection: function () {
639 |     this.self.port.on(this.prefix + "IncomingData", this._incoming);
640 |     this.self.port.on(this.prefix + "Opened", this._remoteOpened);
641 |   },
642 | 
643 |   _ready: function () {
644 |     // FIXME: is any kind of ping necessary?
645 |     return true;
646 |   },
647 | 
648 |   _send: function (data) {
649 |     this.self.port.emit(this.prefix + "SendData", data);
650 |   },
651 | 
652 |   close: function () {
653 |     try {
654 |       this.self.port.emit(this.prefix + "Close");
655 |     } catch (e) {
656 |       console.log('Error on close', e, e.name);
657 |     }
658 |     this.self.port.removeListener(this.prefix + "IncomingData", this._incoming);
659 |     this.self.port.removeListener(this.prefix + "Opened", this._remoteOpened);
660 |     this.closed = true;
661 |     if (this.onclose) {
662 |       this.onclose();
663 |     }
664 |   },
665 | 
666 |   _remoteOpened: function () {
667 |     // Note this isn't the same as _ready, because we rely on the
668 |     // remote connection to do caching/buffering
669 |     if (this.onopen) {
670 |       this.onopen();
671 |     }
672 |   }
673 | 
674 | });
675 | 
676 | /* Will handle incoming requests for the given channel over a port.
677 | Returns a function that tears down this connection.  The teardown
678 | happens automatically on close. */
679 | function PortIncomingChannel(channel, prefix, self_) {
680 |   prefix = prefix || '';
681 |   self_ = self_ || self;
682 |   function remoteSendData(data) {
683 |     channel.send(data);
684 |   }
685 |   function remoteClose() {
686 |     self_.port.removeListener(prefix + "SendData", remoteSendData);
687 |     self_.port.removeListener(prefix + "Close", remoteClose);
688 |     channel.close();
689 |   }
690 |   self_.port.on(prefix + "SendData", remoteSendData);
691 |   self_.port.on(prefix + "Close", remoteClose);
692 |   channel.rawdata = true;
693 |   channel.onmessage = function (data) {
694 |     self_.port.emit(prefix + "IncomingData", data);
695 |   };
696 |   channel.onopen = function () {
697 |     self_.port.emit(prefix + "Opened");
698 |   };
699 |   channel.onclose = function () {
700 |     // FIXME: call remoteClose?
701 |     self_.port.emit(prefix + "Closed");
702 |   };
703 |   return {
704 |     close: remoteClose
705 |   };
706 | }
707 | 
708 | /* Echos all the connection proxying from from_ (the worker that wants
709 | a connection) to to_ (the worker that actually implements the
710 | connection).  Returns a function that will tear down the connection. */
711 | function EchoProxy(from_, to_, prefix) {
712 |   prefix = prefix || '';
713 |   var bindings = [];
714 |   function echo(name, source, dest) {
715 |     function echoer() {
716 |       var args = [name];
717 |       for (var i=0; i<arguments.length; i++) {
718 |         args.push(arguments[i]);
719 |       }
720 |       dest.port.emit.apply(dest.port, args);
721 |     }
722 |     source.port.on(name, echoer);
723 |     bindings.push([source.port, name, echoer]);
724 |   }
725 |   function removeBindings() {
726 |     for (var i=0; i<bindings.length; i++) {
727 |       bindings[i][0].removeListener(bindings[i][1], bindings[i][2]);
728 |     }
729 |   }
730 |   echo(prefix + "IncomingData", to_, from_);
731 |   echo(prefix + "Opened", to_, from_);
732 |   echo(prefix + "Closed", to_, from_);
733 |   echo(prefix + "SendData", from_, to_);
734 |   echo(prefix + "Close", from_, to_);
735 |   return {
736 |     close: removeBindings,
737 |     send: function (data) {
738 |       if (typeof data != "string") {
739 |         data = JSON.stringify(data);
740 |       }
741 |       to_.port.emit(prefix + "SendData", data);
742 |     }
743 |   };
744 | }
745 | 
746 | if (typeof exports != "undefined") {
747 |   exports.EchoProxy = EchoProxy;
748 |   exports.PostMessageChannel = PostMessageChannel;
749 |   exports.ChromePostMessageChannel = ChromePostMessageChannel;
750 |   exports.PostMessageIncomingChannel = PostMessageIncomingChannel;
751 |   exports.PortChannel = PortChannel;
752 |   exports.PortProxyChannel = PortProxyChannel;
753 | }
754 | 


--------------------------------------------------------------------------------
/data/chat-rtc.js:
--------------------------------------------------------------------------------
 1 | var pc;
 2 | 
 3 | function acceptRTC(data, networkCallback) {
 4 |   if (data.rtcOffer) {
 5 |     enableAudio(data.rtcOffer, networkCallback);
 6 |     document.getElementById('audio-chat').innerHTML = 'incoming chat';
 7 |   } else {
 8 |     respondToAnswer(function (error) {
 9 |       if (error) {
10 |         // FIXME: not sure if we have console?
11 |         console.error('Got error responding to answer:', error);
12 |       }
13 |       document.getElementById('audio-chat').innerHTML = 'chatting!';
14 |     }, pc, data.rtcAnswer);
15 |   }
16 | }
17 | 
18 | function enableAudio(offer, networkCallback) {
19 |   setupAudio(function (error, result) {
20 |     if (error) {
21 |       console.error('Got error enabling audio:', error);
22 |       return;
23 |     }
24 |     pc = result.pc;
25 |     if (result.offer) {
26 |       networkCallback({rtcOffer: result.offer});
27 |     } else {
28 |       networkCallback({rtcAnswer: result.answer});
29 |     }
30 |   }, 'audio-container', offer);
31 | }
32 | 
33 | function supportsWebRTC(networkCallback) {
34 |   var el = document.getElementById('audio-chat-container');
35 |   el.style.display = '';
36 |   var button = document.getElementById('audio-chat');
37 |   button.addEventListener('click', function () {
38 |     document.getElementById('audio-chat'.innerHTML = 'chat request sent');
39 |     enableAudio(networkCallback);
40 |   }, false);
41 | }
42 | 


--------------------------------------------------------------------------------
/data/chat.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <style type="text/css">
 4 |     * {
 5 |       font-family: sans-serif;
 6 |     }
 7 |     div.block {
 8 |       margin-bottom: 1em;
 9 |     }
10 |     body {
11 |       background-color: #ddd;
12 |     }
13 |     .chat-message {
14 |       border-bottom: 1px solid #fff;
15 |     }
16 |     .chat-remote {
17 |       background-color: #fff;
18 |     }
19 |   </style>
20 | </head>
21 | <body>
22 | 
23 | <!--
24 | <div class="block">
25 | 
26 |   <span id="jsmirror-view"
27 |         style="border: 1px outset #999; cursor: pointer; display: inline-block; width: 1em; text-align: center; color: #060;"
28 |         title="Turn this on to show where the remote user is scrolled to"
29 |         >&#8597</span>
30 | 
31 |   <span id="jsmirror-highlight"
32 |         style="border: 1px outset #999; margin-left: 1px; cursor: pointer; display: inline-block; width: 1em; text-align: center; color: #900; font-weight: bold;"
33 |         title="Press this button and click on the page to highlight a position on the page"
34 |         >&#10132;</span>
35 | 
36 | </div>
37 | -->
38 | 
39 | <div id="jsmirror-container">
40 | 
41 |   <div class="block">
42 | 
43 |     <span id="jsmirror-share-text" style="display: none">
44 |       <label for="jsmirror-share-field">share this link (copied):</label>
45 |     </span>
46 | 
47 |     <div id="audio-chat-container" style="display: none">
48 |       <button id="audio-chat">talk</button>
49 |     </div>
50 | 
51 |     <div style="display: none">
52 |       <div id="login-container">
53 |         <div id="login-button-container"></div>
54 |         <div id="login-status-container"><a href="#" id="login-status">-</a></div>
55 |       </div>
56 |       <div id="user-list"></div>
57 |     </div>
58 | 
59 |     <div id="audio-container" style="display: none">
60 |       <iframe id="audio-iframe"></iframe>
61 |     </div>
62 | 
63 | 
64 |     <input type="text"
65 |            id="jsmirror-share-field"
66 |            value="..."
67 |            style="width: 100%; display: none"
68 |            >
69 | 
70 |     <a id="jsmirror-share-url"
71 |        title="Give this link to a friend to let them view your session"
72 |        href="..."
73 |        >share</a>
74 | 
75 |   </div>
76 | 
77 |   <div class="block">
78 | 
79 |     Chat:
80 |     <div id="jsmirror-chat"></div>
81 |     <input type="text"
82 |            id="jsmirror-input"
83 |            style="border: 1px solid #000; width: 100%;">
84 |   </div>
85 | 
86 | </div>
87 | 
88 | </body>
89 | </html>
90 | 


--------------------------------------------------------------------------------
/data/domutils.js:
--------------------------------------------------------------------------------
  1 | function getElementPosition(el) {
  2 |   var top = 0;
  3 |   var left = 0;
  4 |   while (el) {
  5 |     if (el.offsetTop) {
  6 |       top += el.offsetTop;
  7 |     }
  8 |     if (el.offsetLeft) {
  9 |       left += el.offsetLeft;
 10 |     }
 11 |     el = el.offsetParent;
 12 |   }
 13 |   return {top: top, left: left};
 14 | }
 15 | 
 16 | function doOnLoad(func) {
 17 |   /* Runs a function on window load, or immediately if the window has
 18 |      already loaded */
 19 |   if (this.document.readyState == 'complete') {
 20 |     func();
 21 |   } else {
 22 |     window.addEventListener('load', func, false);
 23 |   }
 24 | }
 25 | 
 26 | 
 27 | function getScreenRange(doc) {
 28 |   /* Returns {start, end} where these elements are the closest ones
 29 |      to the top and bottom of the currently-visible screen. */
 30 |   doc = doc || document;
 31 |   var win = doc.defaultView;
 32 |   var start = win.pageYOffset;
 33 |   var end = start + win.innerHeight;
 34 |   var nodes = iterNodes(document.body);
 35 |   var atStart = true;
 36 |   var startEl = null;
 37 |   var endEl = null;
 38 |   var startOffsetTop = 0;
 39 |   var endOffsetTop = 0;
 40 |   while (true) {
 41 |     var next = nodes();
 42 |     if (! next) {
 43 |       break;
 44 |     }
 45 |     if (next.jsmirrorHide || (! next.jsmirrorId)) {
 46 |       continue;
 47 |     }
 48 |     if (next.nodeType != document.ELEMENT_NODE) {
 49 |       continue;
 50 |     }
 51 |     var offsetTop = 0;
 52 |     var el = next;
 53 |     while (el) {
 54 |       if (el.offsetTop) {
 55 |         offsetTop += el.offsetTop;
 56 |       }
 57 |       el = el.offsetParent;
 58 |     }
 59 |     if (atStart) {
 60 |       if (offsetTop > start) {
 61 |         startEl = endEl = next;
 62 |         atStart = false;
 63 |         startOffsetTop = start - offsetTop;
 64 |         continue;
 65 |       }
 66 |     } else {
 67 |       if (offsetTop + next.clientHeight > end) {
 68 |         break;
 69 |       } else {
 70 |         endOffsetTop = end - (offsetTop + next.clientHeight);
 71 |         endEl = next;
 72 |       }
 73 |     }
 74 |   }
 75 |   return {start: startEl, end: endEl,
 76 |           startOffsetTop: startOffsetTop, endOffsetTop: endOffsetTop};
 77 | }
 78 | 
 79 | function iterNodes(start) {
 80 |   /* Iterates, in order (depth-first) all elements in the document.
 81 |      Returns a callback that yields these elements. */
 82 |   var stack = [[start, null]];
 83 |   var cursor = 0;
 84 |   return function () {
 85 |     if (! stack[cursor]) {
 86 |       // Finished
 87 |       return null;
 88 |     }
 89 |     var item = stack[cursor];
 90 |     if (item[1] === null) {
 91 |       // We should return the item directly
 92 |       var result = item[0];
 93 |       if (! result) {
 94 |         throw 'weird item in stack';
 95 |       }
 96 |       if (result.nodeType == this.document.ELEMENT_NODE && result.childNodes.length) {
 97 |         // Put the children into the item's place
 98 |         stack[cursor] = [result.childNodes, 0];
 99 |       } else {
100 |         // Otherwise just pop this item from the stack
101 |         stack[cursor] = null;
102 |         cursor--;
103 |       }
104 |     } else {
105 |       var result = item[0][item[1]];
106 |       if (! result) {
107 |         throw 'weird item in stack';
108 |       }
109 |       if (result.nodeType == this.document.ELEMENT_NODE && result.childNodes.length) {
110 |         // Add this new element's child to the stack
111 |         if (item[1] >= (item[0].length - 1)) {
112 |           stack[cursor] = [result.childNodes, 0];
113 |         } else {
114 |           item[1]++;
115 |           cursor++;
116 |           stack[cursor] = [result.childNodes, 0];
117 |         }
118 |       } else {
119 |         if (item[1] >= (item[0].length - 1)) {
120 |           // We've finished with this element's children entirely
121 |           stack[cursor] = null;
122 |           cursor--;
123 |         } else {
124 |           // We have more to do, so just go to the next child
125 |           item[1]++;
126 |         }
127 |       }
128 |     }
129 |     return result;
130 |   };
131 | }
132 | 
133 | function expandRange(range) {
134 |   /* Given a range object, return
135 |        {start: el, startOffset: int, startSibling: bool,
136 |         end: el, endOffset: int, endSibling: bool}
137 |      The standard range object (https://developer.mozilla.org/en/DOM/range) tends to
138 |      point to text nodes which are not referencable for us.  If *Sibling is true, then the
139 |      offset is after/before the element; if false then it is *interior to* the element.
140 |   */
141 |   var result = {start: range.startContainer, end: range.endContainer,
142 |                 startOffset: range.startOffset, endOffset: range.endOffset,
143 |                 startText: false, endText: false};
144 |   function doit(name) {
145 |     if (result[name].nodeType == this.document.TEXT_NODE) {
146 |       while (true) {
147 |         var prev = result[name].previousSibling;
148 |         if (prev === null) {
149 |           result[name] = result[name].parentNode;
150 |           result[name+'Text'] = 'inner';
151 |           break;
152 |         } else if (prev.nodeType == this.document.ELEMENT_NODE) {
153 |           result[name] = prev;
154 |           result[name+'Text'] = 'after';
155 |           break;
156 |         } else if (prev.nodeType == this.document.TEXT_NODE) {
157 |           result[name] = prev;
158 |           result[name+'Offset'] += prev.nodeValue.length;
159 |         }
160 |       }
161 |     }
162 |   }
163 |   doit('start'); doit('end');
164 |   return result;
165 | }
166 | 
167 | function showRange(range, elCallback) {
168 |   var inner;
169 |   if (range.start == range.end && range.startText == 'inner' && range.endText == 'inner') {
170 |     // A special case, when the range is entirely within one element
171 |     var el = splitTextBetween(range.start, range.startOffset, range.endOffset);
172 |     elCallback(el);
173 |     return;
174 |   }
175 |   if (range.startText == 'inner') {
176 |     range.start = splitTextAfter(range.start.childNodes[0], range.startOffset);
177 |   } else if (range.startText == 'after') {
178 |     range.start = splitTextAfter(range.start.nextSibling, range.startOffset);
179 |   } else if (range.startOffset) {
180 |     inner = range.start.childNodes[range.startOffset];
181 |     // While the spec says these offsets specify children, they don't always, and sometimes
182 |     // the "container" is the element selected.
183 |     if (inner) {
184 |       range.start = inner;
185 |     }
186 |   }
187 |   if (range.endText == 'inner') {
188 |     range.end = splitTextBefore(range.end.childNodes[0], range.endOffset);
189 |   } else if (range.endText == 'after') {
190 |     range.end = splitTextBefore(range.end.nextSibling, range.endOffset);
191 |   } else if (range.endOffset) {
192 |     inner = range.end.childNodes[range.endOffset];
193 |     if (inner) {
194 |       range.end = inner;
195 |     }
196 |   }
197 |   // Now we strictly need to go from the start element to the end element (inclusive!)
198 |   var pos = range.start;
199 |   while (true) {
200 |     elCallback(pos);
201 |     pos = getNextElement(pos);
202 |     if (pos === null) {
203 |       log(WARN, 'pos fell out to null', range.start);
204 |       break;
205 |     }
206 |     while (containsElement(pos, range.end)) {
207 |       // FIXME: at some point pos might be a TextNode that needs to be wrapped in
208 |       // a span.
209 |       pos = pos.childNodes[0];
210 |     }
211 |     if (pos == range.end) {
212 |       elCallback(pos);
213 |       break;
214 |     }
215 |   }
216 | }
217 | 
218 | function containsElement(container, subelement) {
219 |   /* Returns true if subelement is inside container
220 |      Does not return true if subelement == container */
221 |   if (container == subelement) {
222 |     return false;
223 |   }
224 |   if (container.nodeType != this.document.ELEMENT_NODE) {
225 |     return false;
226 |   }
227 |   for (var i=0; i<container.childNodes.length; i++) {
228 |     var node = container.childNodes[i];
229 |     if (node == subelement) {
230 |       return true;
231 |     }
232 |     if (containsElement(container.childNodes[i], subelement)) {
233 |       return true;
234 |     }
235 |   }
236 |   return false;
237 | }
238 | 
239 | function getNextElement(el) {
240 |   if (el.childNodes && el.childNodes.length) {
241 |     return el.childNodes[0];
242 |   }
243 |   while (! el.nextSibling) {
244 |     el = el.parentNode;
245 |     if (! el) {
246 |       log(WARN, 'no parent');
247 |       return null;
248 |     }
249 |   }
250 |   return el.nextSibling;
251 | }
252 | 
253 | function splitTextBefore(el, offset) {
254 |   /* Creates a node that emcompasses all the text starting at el
255 |      and going offset characters */
256 |   var span = this.document.createElement('span');
257 |   span.artificialRangeElement = true;
258 |   var text = '';
259 |   if (el.nodeType != this.document.TEXT_NODE) {
260 |     throw 'Unexpected node: ' + el;
261 |   }
262 |   while (el.nodeValue.length < offset) {
263 |     text += el.nodeValue;
264 |     offset -= el.nodeValue.length;
265 |     var remove = el;
266 |     el = el.nextSibling;
267 |     remove.parentNode.removeChild(remove);
268 |   }
269 |   text += el.nodeValue.substr(0, offset);
270 |   var rest = el.nodeValue.substr(offset, el.nodeValue.length-offset);
271 |   el.nodeValue = rest;
272 |   span.appendChild(this.document.createTextNode(text));
273 |   el.parentNode.insertBefore(span, el);
274 |   return span;
275 | }
276 | 
277 | function splitTextAfter(el, offset) {
278 |   /* Creates a node *after* offset characters, encompassing all
279 |      text that follows it.  Also all other text siblings will be
280 |      encompassed by spans. */
281 |   var text = '';
282 |   while (el.nodeValue.length < offset) {
283 |     text += el.nodeValue;
284 |     offset -= el.nodeValue.length;
285 |     if (el.nextSibling) {
286 |       el = el.nextSibling;
287 |     } else {
288 |       log(WARN, 'Could not get ' + offset + 'chars from element', el);
289 |       break;
290 |     }
291 |   }
292 |   var rest = el.nodeValue.substr(offset, el.nodeValue.length-offset);
293 |   el.nodeValue = el.nodeValue.substr(0, offset);
294 |   var last = this.document.createElement('span');
295 |   last.artificialRangeElement = true;
296 |   var span = last;
297 |   last.appendChild(this.document.createTextNode(rest));
298 |   el.parentNode.insertBefore(last, el.nextSibling);
299 |   var pos = last.nextSibling;
300 |   while (pos) {
301 |     if (pos.nodeType == this.document.TEXT_NODE) {
302 |       if (last) {
303 |         var here = pos;
304 |         pos = pos.nextSibling;
305 |         last.appendChild(here);
306 |       } else {
307 |         last = this.document.createElement('span');
308 |         last.artificialRangeElement = true;
309 |         var here = pos;
310 |         pos = pos.nextSibling;
311 |         here.parentNode.insertBefore(last, here);
312 |         last.appendChild(here);
313 |       }
314 |     } else {
315 |       last = null;
316 |       pos = pos.nextSibling;
317 |     }
318 |   }
319 |   return span;
320 | }
321 | 
322 | function splitTextBetween(el, start, end) {
323 |   /* Creates a span that encompasses the text within el, between start and
324 |      end character offsets */
325 |   if (start > end) {
326 |     throw 'Unexpected range: '+start+' to '+end;
327 |   }
328 |   var innerLength = end-start;
329 |   var startText = '';
330 |   var endText = '';
331 |   var innerText = '';
332 |   var inStart = true;
333 |   var inEnd = false;
334 |   var textNodes = [];
335 |   for (var i=0; i<el.childNodes.length; i++) {
336 |     var node = el.childNodes[i];
337 |     if (node.nodeType != this.document.TEXT_NODE) {
338 |       if (inEnd) {
339 |         break;
340 |       }
341 |       log(WARN, 'Unexpected element', node);
342 |       continue;
343 |     }
344 |     textNodes.push(node);
345 |     var text = node.nodeValue;
346 |     if (inStart && text.length < start) {
347 |       startText += text;
348 |       start -= text.length;
349 |     } else if (inStart) {
350 |       startText += text.substr(0, start);
351 |       inStart = false;
352 |       text = text.substr(start, text.length-start);
353 |     }
354 |     if ((! inStart) && (! inEnd)) {
355 |       if (text.length < innerLength) {
356 |         innerText += text;
357 |         innerLength -= text.length;
358 |       } else {
359 |         innerText += text.substr(0, innerLength);
360 |         text = text.substr(innerLength, text.length-innerLength);
361 |         inEnd = true;
362 |       }
363 |     }
364 |     if (inEnd) {
365 |       endText += text;
366 |     }
367 |   }
368 |   var startNode = this.document.createTextNode(startText);
369 |   var endNode = this.document.createTextNode(endText);
370 |   var innerNode = this.document.createElement('span');
371 |   innerNode.artificialRangeElement = true;
372 |   innerNode.appendChild(this.document.createTextNode(innerText));
373 |   for (i=0; i<textNodes.length; i++) {
374 |     el.removeChild(textNodes[i]);
375 |   }
376 |   el.insertBefore(endNode, el.childNodes[0]);
377 |   el.insertBefore(innerNode, endNode);
378 |   el.insertBefore(startNode, innerNode);
379 |   return innerNode;
380 | }
381 | 
382 | var TEMPORARY_HIGHLIGHT_DELAY = 10000;
383 | 
384 | function temporaryHighlight(el, offsetTop, offsetLeft, mode) {
385 |   var doc = el.ownerDocument;
386 |   offsetTop = offsetTop || 0;
387 |   offsetLeft = offsetLeft || 0;
388 |   var size = 100;
389 |   var elPos = getElementPosition(el);
390 |   var circle = this.document.createElement('div');
391 |   circle.style.backgroundColor = 'transparent';
392 |   circle.style.border = '2px solid #f00';
393 |   circle.style.position = 'absolute';
394 |   circle.style.width = size + 'px';
395 |   circle.style.height = size + 'px';
396 |   circle.style.borderRadius = (size/2) + 'px';
397 |   circle.style.top = (elPos.top + offsetTop - (size/2)) + 'px';
398 |   circle.style.left = (elPos.left + offsetLeft - (size/2)) + 'px';
399 |   circle.jsmirrorHide = true;
400 |   doc.body.appendChild(circle);
401 |   function canceller() {
402 |     if (circle !== null) {
403 |       doc.body.removeChild(circle);
404 |       circle = null;
405 |     }
406 |   }
407 |   setTimeout(canceller, TEMPORARY_HIGHLIGHT_DELAY);
408 |   /*
409 |   if (mode != 'redisplay') {
410 |     var message = this.document.createElement('div');
411 |     message.innerHTML = '<a href="#" style="color: #99f; text-decoration: underline">place noted</a>';
412 |     var anchor = message.getElementsByTagName('a')[0];
413 |     anchor.setAttribute('data-place', JSON.stringify({
414 |       element: el.jsmirrorId,
415 |       offsetTop: offsetTop,
416 |       offsetLeft: offsetLeft
417 |     }));
418 |     var self = this;
419 |     // FIXME: this is a closure, but almost doesn't need to be.
420 |     // If it matters at all?
421 |     anchor.addEventListener('click', function (event) {
422 |       var anchor = event.target;
423 |       var data = JSON.parse(anchor.getAttribute('data-place'));
424 |       var el = self.getElement(data.element);
425 |       self.temporaryHighlight(el, data.offsetTop, data.offsetLeft, 'redisplay');
426 |       event.preventDefault();
427 |       event.stopPropagation();
428 |     }, false);
429 |     // FIXME: can't send nodes anymore
430 |     this.displayMessage(message, (mode == 'local'));
431 |   }
432 |   */
433 |   return canceller;
434 | }
435 | 
436 | function binder(func, bindThis, name) {
437 |   var name = func.name;
438 |   function repl() {
439 |     try {
440 |       var result = func.apply(bindThis || this, arguments);
441 |     } catch (e) {
442 |       console.warn(name + "() raised:", e+'');
443 |       throw e;
444 |     }
445 |     if (result !== undefined) {
446 |       console.log(name + "() returned:", JSON.stringify(result));
447 |     }
448 |     return result;
449 |   }
450 |   return repl;
451 | }
452 | 


--------------------------------------------------------------------------------
/data/freeze.js:
--------------------------------------------------------------------------------
  1 | if (! window.Freeze) {
  2 |   var Freeze = {};
  3 | }
  4 | 
  5 | Freeze.makeId = function () {
  6 |   return 'el' + (arguments.callee.counter++);
  7 | };
  8 | 
  9 | // This makes it more sortable:
 10 | Freeze.makeId.counter=1000;
 11 | 
 12 | // These elements can have e.g., clientWidth of 0 but still be relevant:
 13 | Freeze.skipElementsOKEmpty = {
 14 |   LINK: true,
 15 |   STYLE: true,
 16 |   HEAD: true,
 17 |   META: true,
 18 |   BODY: true,
 19 |   APPLET: true,
 20 |   BASE: true,
 21 |   BASEFONT: true,
 22 |   BDO: true,
 23 |   BR: true,
 24 |   OBJECT: true,
 25 |   TD: true,
 26 |   TR: true,
 27 |   TH: true,
 28 |   THEAD: true,
 29 |   TITLE: true
 30 |   // COL, COLGROUP?
 31 | };
 32 | 
 33 | // These are elements that are empty, i.e., have no closing tag:
 34 | Freeze.voidElements = {
 35 |   AREA: true,
 36 |   BASE: true,
 37 |   BR: true,
 38 |   COL: true,
 39 |   COMMAND: true,
 40 |   EMBED: true,
 41 |   HR: true,
 42 |   IMG: true,
 43 |   INPUT: true,
 44 |   KEYGEN: true,
 45 |   LINK: true,
 46 |   META: true,
 47 |   PARAM: true,
 48 |   SOURCE: true,
 49 |   TRACK: true,
 50 |   WBR: true
 51 | };
 52 | 
 53 | // These elements are never sent:
 54 | Freeze.skipElementsBadTags = {
 55 |   SCRIPT: true,
 56 |   NOSCRIPT: true
 57 | };
 58 | 
 59 | Freeze.skipElement = function (el) {
 60 |   /* true if this element should be skipped when sending to the mirror */
 61 |   var tag = el.tagName;
 62 |   if (this.skipElementsBadTags[tag] || el.jsmirrorHide ||
 63 |       el.id == 'webSocketContainer') {
 64 |     return true;
 65 |   }
 66 |   // Skip elements that can't be seen, and have no children, and are potentially
 67 |   // "visible" elements (e.g., not STYLE)
 68 |   // Note elements with children might have children with, e.g., absolute
 69 |   // positioning -- so they might not make the parent have any width, but
 70 |   // may still need to be displayed.
 71 |   if ((el.style && el.style.display == 'none') ||
 72 |       ((el.clientWidth === 0 && el.clientHeight === 0) &&
 73 |        (! this.skipElementsOKEmpty[tag]) &&
 74 |        (! el.childNodes.length))) {
 75 |     return true;
 76 |   }
 77 |   return false;
 78 | };
 79 | 
 80 | Freeze.serializeDocument = function () {
 81 |   /* Serializes a complete document to JSON object */
 82 |   // FIXME: should I clear this.elements here?
 83 |   var doc = unsafeWindow.document;
 84 |   var result = {
 85 |     href: location.href,
 86 |     htmlAttrs: this.serializeAttributes(doc.childNodes[0]),
 87 |     head: this.serializeElement(doc.head),
 88 |     body: this.serializeElement(doc.body),
 89 |     hash: location.hash || ""
 90 |   };
 91 |   return result;
 92 | };
 93 | 
 94 | // FIXME: this is hacky:
 95 | Freeze.elementTracker = {};
 96 | 
 97 | Freeze.trackElement = function (el) {
 98 |   var id = this.makeId();
 99 |   el.jsmirrorId = id;
100 |   this.elementTracker.elements[id] = el;
101 | };
102 | 
103 | Freeze.serializeElement = function (el, includeHTML) {
104 |   /* Serializes a single element to a JSON object.
105 |      The object looks like:
106 |        [tagName, localId, {attrs}, [children...]]
107 | 
108 |      If includeHTML is true then an additional innerHTML item will be added to the end of each list
109 |    */
110 |   if (! el.jsmirrorId) {
111 |     this.trackElement(el);
112 |   }
113 |   if (el.tagName == 'CANVAS') {
114 |     return ['IMG', el.jsmirrorId, {src: el.toDataURL('image/png')}, []];
115 |   }
116 |   var attrs = this.serializeAttributes(el);
117 |   var children;
118 |   if (el.tagName == 'IFRAME') {
119 |     children = [];
120 |     try {
121 |       var html = this.staticHTML(el.contentWindow.document.documentElement);
122 |     } catch (e) {
123 |       console.warn('Had to skip iframe for permission reasons:', e+'', 'src:', el.src);
124 |       // A placeholder for the iframe:
125 |       return ['SPAN', el.jsmirrorId, {}, []];
126 |     }
127 |     attrs.src = this.encodeData('text/html', html);
128 |   } else {
129 |     children = this.normalChildren(el);
130 |     var length = children.length;
131 |     for (var i=0; i<length; i++) {
132 |       var child = children[i];
133 |       if (typeof child !== 'string') {
134 |         children[i] = this.serializeElement(children[i]);
135 |       }
136 |     }
137 |   }
138 |   var result = [el.tagName, el.jsmirrorId, attrs, children];
139 |   if (includeHTML) {
140 |     result.push(el.innerHTML);
141 |   }
142 |   return result;
143 | };
144 | 
145 | Freeze.normalChildren = function (el) {
146 |   // Returns a normalized representation of a set of children, as
147 |   // as a list of text and elements, with no two adjacent text elements
148 |   // and no empty text strings.  Ignorable elements are omitted.
149 |   var result = [];
150 |   var children = el.childNodes;
151 |   var length = children.length;
152 |   for (var i=0; i<length; i++) {
153 |     var child = children[i];
154 |     if (this.skipElement(child)) {
155 |       continue;
156 |     }
157 |     if (child.nodeType == this.TEXT_NODE) {
158 |       var value = child.nodeValue;
159 |       if (! value) {
160 |         continue;
161 |       }
162 |       if (i && typeof result[result.length-1] == 'string') {
163 |         // Append this text to the last
164 |         result[result.length-1] += value;
165 |       } else {
166 |         result.push(value);
167 |       }
168 |     } else if (child.nodeType == this.ELEMENT_NODE) {
169 |       result.push(child);
170 |     }
171 |   }
172 |   return result;
173 | };
174 | 
175 | /* Remove innerHTML from the document (if serializeElement was used
176 | with innerHTML true) */
177 | Freeze.filterInnerHTML = function (doc) {
178 |   var result = [doc[0], doc[1], doc[2], []];
179 |   for (var i=0; i<doc[3].length; i++) {
180 |     if (typeof doc[3][i] == 'string') {
181 |       result[3].push(doc[3][i]);
182 |     } else {
183 |       result[3].push(this.filterInnerHTML(doc[3][i]));
184 |     }
185 |   }
186 |   return result;
187 | };
188 | 
189 | Freeze.serializeAttributes = function (el) {
190 |   /* Serialize the attributes of an element into a JSON object */
191 |   var attrs = {};
192 |   if (el.attributes) {
193 |     var length = el.attributes.length;
194 |     for (var i=0; i<length; i++) {
195 |       var attrName = el.attributes[i].name;
196 |       if (attrName.substr(0, 2).toLowerCase() == "on") {
197 |         // Don't keep any event-based attributes
198 |         continue;
199 |       } else if (attrName == 'href' || attrName == 'src' || attrName == 'value') {
200 |         // Dereference these fancy-like, which should make them absolute
201 |         attrs[attrName] = el[attrName];
202 |       } else {
203 |         attrs[attrName] = el.attributes[i].nodeValue;
204 |       }
205 |     }
206 |   }
207 |   if (el.tagName == 'TEXTAREA') {
208 |     // This doesn't show up as an attribute
209 |     // FIXME: Perhaps all INPUT elements should get this treatment?
210 |     attrs.value = el.value;
211 |   }
212 |   return attrs;
213 | };
214 | 
215 | Freeze.compareAttributes = function (attrs, el) {
216 |   /* Returns true if serializeAttributes(el) would produce attrs */
217 |   var count = 0;
218 |   var tagName = el.tagName;
219 |   for (var i in attrs) {
220 |     if (! attrs.hasOwnProperty(i)) {
221 |       continue;
222 |     }
223 |     count++;
224 |     var value;
225 |     if (i == 'href' || i == 'src' || i == 'value') {
226 |       value = el[i];
227 |       if (! el.hasAttribute(i)) {
228 |         // This happens in particularly with a virtual "value" attribute
229 |         count--;
230 |       }
231 |     } else {
232 |       value = el.getAttribute(i);
233 |     }
234 |     if (value != attrs[i]) {
235 |       console.log('got diff in attributes', i);
236 |       return false;
237 |     }
238 |   }
239 |   var elAttrsLength = el.attributes.length;
240 |   if (elAttrsLength == count) {
241 |     return true;
242 |   }
243 |   // There might be "blocked" attributes
244 |   for (i=0; i<elAttrsLength; i++) {
245 |     var attr = el.attributes[i];
246 |     if (attr.name.substr(0, 2).toLowerCase() == 'on') {
247 |       count++;
248 |     }
249 |   }
250 |   return count == elAttrsLength;
251 | };
252 | 
253 | Freeze.compareAttributes2 = function (attrs, el) {
254 |   var elAttrs = this.serializeAttributes(el);
255 |   var result = true;
256 |   for (var i in attrs) {
257 |     if (attrs[i] != elAttrs[i]) {
258 |       result = false;
259 |     }
260 |   }
261 |   for (var i in elAttrs) {
262 |     if (attrs[i] != elAttrs[i]) {
263 |       result = false;
264 |     }
265 |   }
266 |   var otherResult = this.compareAttributes(attrs, el);
267 |   if (result != otherResult) {
268 |     console.log('Disagreement', el.tagName, result, otherResult);
269 |   }
270 |   return result;
271 | };
272 | 
273 | 
274 | Freeze.htmlQuote = function (s) {
275 |   /* Does minimal quoting of a string for embedding as a literal in HTML */
276 |   if (! s) {
277 |     return s;
278 |   }
279 |   if (s.search(/[&<"]/) == -1) {
280 |     return s;
281 |   }
282 |   return s.replace(/&/g, "&amp;").replace(/</g, '&lt;').replace(/"/g, "&quot;");
283 | };
284 | 
285 | Freeze.encodeData = function (content_type, data) {
286 |   /* Encodes the given data as a data: URL */
287 |   // FIXME: utf8?
288 |   return 'data:' + content_type + ';base64,' + btoa(data);
289 | };
290 | 
291 | Freeze.staticHTML = function (el) {
292 |   /* Converts the element to static HTML, dropping anything that isn't static */
293 |   if (el.tagName == 'CANVAS') {
294 |     return '<IMG SRC="' + this.htmlQuote(el.toDataURL('image/png')) + '">';
295 |   }
296 |   var replSrc = null;
297 |   if (el.tagName == 'IFRAME') {
298 |     // FIXME: need to add <base> element
299 |     try {
300 |       var html = this.staticHTML(el.contentWindow.document.documentElement);
301 |       replSrc = this.encodeData('text/html', html);
302 |     } catch (e) {
303 |       console.warn('Had to skip iframe for permission reasons:', e+'');
304 |     }
305 |   }
306 |   var s = '<' + el.tagName;
307 |   var attrs = el.attributes;
308 |   var l;
309 |   if (attrs && (l = attrs.length)) {
310 |     for (var i=0; i<l; i++) {
311 |       var name = attrs[i].name;
312 |       if (name.substr(0, 2).toLowerCase() == "on") {
313 |         continue;
314 |       }
315 |       if (name == 'src' && replSrc) {
316 |         var value = replSrc;
317 |       } else if (name == "href" || name == "src" || name == "value") {
318 |         var value = el[name];
319 |       } else {
320 |         var value = attrs[i].nodeValue;
321 |       }
322 |       // FIXME: should the name be quoted in any fashion?
323 |       s += ' ' + name + '="' + this.htmlQuote(value) + '"';
324 |     }
325 |   }
326 |   s += '>';
327 |   if (! this.voidElements[el.tagName]) {
328 |     s += this.staticChildren(el);
329 |     s += '</' + el.tagName + '>';
330 |   }
331 |   return s;
332 | };
333 | 
334 | Freeze.getAttributes = function (el) {
335 |   var result = [];
336 |   var attrs = el.attributes;
337 |   if (attrs && attrs.length) {
338 |     var l = attrs.length;
339 |     for (var i=0; i<l; i++) {
340 |       var name = attrs[i].name;
341 |       if (name.substr(0, 2).toLowerCase() == "on") {
342 |         continue;
343 |       }
344 |       if (name == "href" || name == "src" || name == "value") {
345 |         var value = el[name];
346 |       } else {
347 |         var value = attrs[i].nodeValue;
348 |       }
349 |       result.push([name, value]);
350 |     }
351 |   }
352 |   return result;
353 | };
354 | 
355 | Freeze.TEXT_NODE = document.TEXT_NODE;
356 | Freeze.ELEMENT_NODE = document.ELEMENT_NODE;
357 | 
358 | Freeze.staticChildren = function (el) {
359 |   /* Converts all the children of the given element to static HTML */
360 |   var s = '';
361 |   var children = el.childNodes;
362 |   var l = children.length;
363 |   for (var i=0; i<l; i++) {
364 |     var child = children[i];
365 |     if (this.skipElement(child)) {
366 |       continue;
367 |     }
368 |     if (child.nodeType == this.TEXT_NODE) {
369 |       var value = child.nodeValue;
370 |       s += this.htmlQuote(value);
371 |     } else if (child.nodeType == this.ELEMENT_NODE) {
372 |       s += this.staticHTML(child);
373 |     }
374 |   }
375 |   return s;
376 | };
377 | 


--------------------------------------------------------------------------------
/data/logging.js:
--------------------------------------------------------------------------------
 1 | VERBOSE = 10; DEBUG = 20; INFO = 30; NOTIFY = 40; WARN = ERROR = 50; CRITICAL = 60;
 2 | LOG_LEVEL = DEBUG;
 3 | 
 4 | function log(level) {
 5 |   if (level > WARN && console.trace) {
 6 |     console.trace();
 7 |   }
 8 |   if (typeof console == 'undefined') {
 9 |     return;
10 |   }
11 |   if (level < LOG_LEVEL) {
12 |     return;
13 |   }
14 |   var args = [];
15 |   for (var i=1; i<arguments.length; i++) {
16 |     args.push(arguments[i]);
17 |   }
18 |   var method = 'log';
19 |   if (level >= ERROR && console.error) {
20 |     method = 'error';
21 |   } else if (level >= INFO && console.info) {
22 |     method = 'info';
23 |   } else if (console.debug) {
24 |     method = 'debug';
25 |   }
26 |   if (! console[method]) {
27 |     method = 'log';
28 |   }
29 |   if (! console[method].apply) {
30 |     // On Fennec I'm getting problems with console[method].apply
31 |     console.log(args);
32 |   } else {
33 |     try {
34 |       console[method].apply(console, args);
35 |     } catch (e) {
36 |       console[method].apply(console, ["Could not log: " + e]);
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/data/login-iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>login</title>
 5 |     <script src="https://login.persona.org/include.js"></script>
 6 |     <script src="/data/logging.js"></script>
 7 |     <script src="/data/channels.js"></script>
 8 |     <script src="/data/login-iframe.js"></script>
 9 |     <style>
10 |       body {
11 |         margin: 0
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <a href="#" id="login"><img src="https://developer.mozilla.org/files/3967/plain_sign_in_black.png"></a>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/data/login-iframe.js:
--------------------------------------------------------------------------------
 1 | // console messages don't show up in this context:
 2 | console = {
 3 |   log: function () {
 4 |     var s = "";
 5 |     for (var i=0; i<arguments.length; i++) {
 6 |       if (s) {
 7 |         s += " ";
 8 |       }
 9 |       if (typeof arguments[i] == "string") {
10 |         s += arguments[i];
11 |       } else {
12 |         s += JSON.stringify(arguments[i]);
13 |       }
14 |     }
15 |     alert(s);
16 |   }
17 | };
18 | console.warn = console.error = console.info = console.debug = console.log;
19 | 
20 | var channel = new ChromePostMessageIncomingChannel();
21 | channel.onmessage = function (data) {
22 |   if (data.logout) {
23 |     navigator.id.logout();
24 |   }
25 | };
26 | 
27 | window.addEventListener("load", function () {
28 |   var el = document.getElementById('login');
29 |   el.addEventListener('click', function (event) {
30 |     event.preventDefault();
31 |     event.stopPropagation();
32 |     navigator.id.request();
33 |   }, false);
34 | }, false);
35 | 
36 | // Set loggedInUser using the channel?
37 | navigator.id.watch({
38 |   onlogin: function (assertion) {
39 |     channel.send({
40 |       assertion: assertion,
41 |       audience: location.protocol + '//' + location.host
42 |     });
43 |   },
44 |   onlogout: function () {
45 |     channel.send({logout: true});
46 |   }
47 | });
48 | 


--------------------------------------------------------------------------------
/data/master.js:
--------------------------------------------------------------------------------
  1 | var ELEMENT_NODE;
  2 | 
  3 | function Master(channel, document) {
  4 |   this.channel = channel;
  5 |   this.document = document;
  6 |   ELEMENT_NODE = this.document.ELEMENT_NODE;
  7 |   this.elements = {};
  8 |   // FIXME: this is a hacky way of keeping the element list in sync with Freeze:
  9 |   Freeze.elementTracker = this;
 10 |   setInterval(binder(this.sendDoc, this), 2000);
 11 |   //setInterval(this.updateScreenArrowIfScrolled.bind(this), 1200);
 12 |   // This gets rid of garbage elements in this.elements:
 13 |   setInterval(this.refreshElements.bind(this), 10000);
 14 |   this.channel.send({href: location.href});
 15 | }
 16 | 
 17 | Master.prototype = {
 18 | 
 19 |   toString: function () {
 20 |     return '[Master channel: ' + this.channel + ']';
 21 |   },
 22 | 
 23 |   sendDoc: function sendDoc() {
 24 |     var docData = Freeze.serializeDocument();
 25 |     var data = {};
 26 |     var docDataJson = JSON.stringify(docData);
 27 |     if ((! this.lastSentDoc) || this.lastSentDoc != docDataJson) {
 28 |       // Need to send some doc update
 29 |       if (! this.lastSentDoc) {
 30 |         // There's no previous doc so we have to send a full document
 31 |         data.doc = docData;
 32 |         this.lastSentDoc = docDataJson;
 33 |         this.lastSentDocData = docData;
 34 |       } else {
 35 |         var commands = [];
 36 |         var result = this.diffDocuments(this.lastSentDocData.head, this.document.head, commands);
 37 |         if (result === null) {
 38 |           commands = null;
 39 |         } else {
 40 |           result = this.diffDocuments(this.lastSentDocData.body, this.document.body, commands, false);
 41 |           if (result === null) {
 42 |             commands = null;
 43 |           }
 44 |         }
 45 |         if (commands === null || ! commands.length) {
 46 |           log(DEBUG, "Sending complete document", commands === null ? "fault" : "diff failure");
 47 |           data.doc = docData;/*
 48 |           log(WARN, '------------------------------------------------------------');
 49 |           log(WARN, this.lastSentDoc);
 50 |           log(WARN, '============================================================');
 51 |           log(WARN, docDataJson);
 52 |           log(WARN, '------------------------------------------------------------');*/
 53 |           this.lastSentDoc = docDataJson;
 54 |           this.lastSentDocData = docData;
 55 |         } else if (commands && commands.length) {
 56 |           log(DEBUG, 'Diffs:');
 57 |           for (var i=0; i<commands.length; i++) {
 58 |             log(DEBUG, '...diff', diffRepr([commands[i]]));
 59 |           }
 60 |           data.diffs = commands;
 61 |           this.lastSentDoc = docDataJson;
 62 |           this.lastSentDocData = docData;
 63 |         } else {
 64 |           log(DEBUG, 'No updates to send/should not happen');
 65 |         }
 66 |       }
 67 |     }
 68 |     // FIXME: reimplement getRange:
 69 |     var range = this.getRange ? this.getRange() : null;
 70 |     if (range) {
 71 |       range = expandRange(range);
 72 |       range.start = range.start.jsmirrorId;
 73 |       range.end = range.end.jsmirrorId;
 74 |       var rangeJson = JSON.stringify(range);
 75 |       if ((! this.sentRange) || rangeJson != this.sentRange) {
 76 |         data.range = range;
 77 |         this.sentRange = rangeJson;
 78 |       }
 79 |     } else {
 80 |       if (this.sentRange) {
 81 |         data.range = null;
 82 |         this.sentRange = null;
 83 |       }
 84 |     }
 85 |     if (data.range || data.doc || data.diffs) {
 86 |       this.channel.send(data);
 87 |     }
 88 |   },
 89 | 
 90 |   diffDocuments: function (orig, current, commands) {
 91 |     if (! current) {
 92 |       throw 'Got bad current argument: ' + current;
 93 |     }
 94 |     if (commands === undefined) {
 95 |       commands = [];
 96 |     }
 97 |     if (! current.jsmirrorId) {
 98 |       log(WARN, "Got diffDocuments element without an id", current);
 99 |       current.jsmirrorId = Freeze.makeId();
100 |       this.elements[current.jsmirrorId] = current;
101 |     }
102 |     var origTagName = orig[0];
103 |     var origId = orig[1];
104 |     var origAttrs = orig[2];
105 |     var origChildren = orig[3];
106 |     var origInnerHTML = orig[4];
107 |     if (origTagName != current.tagName) {
108 |       // We can't diff a tag that doesn't match
109 |       log(WARN, 'got tag name change', origTagName, current.tagName);
110 |       return null;
111 |     }
112 |     if (! Freeze.compareAttributes(origAttrs, current)) {
113 |       commands.push(['attrs', current.jsmirrorId, Freeze.serializeAttributes(current)]);
114 |     }
115 |     if (origId != current.jsmirrorId) {
116 |       // This shouldn't happen
117 |       log(WARN, "Tag ids don't match", origId, current.jsmirrorId, current);
118 |       return null;
119 |     }
120 |     if (origInnerHTML !== undefined && current.innerHTML == origInnerHTML) {
121 |       // Deep comparison matches
122 |       return commands;
123 |     }
124 |     var curChildren = Freeze.normalChildren(current);
125 |     var curLength = curChildren.length;
126 |     var origLength = origChildren.length;
127 |     if (curLength === 1 && origLength === 1 &&
128 |         typeof curChildren[0] === "string" && typeof origChildren[0] === "string") {
129 |       // A special case of an element with just one string child
130 |       if (origChildren[0] !== curChildren[0]) {
131 |         commands.push(["replace_text", current.jsmirrorId, curChildren[0]]);
132 |       }
133 |       return commands;
134 |     }
135 |     var origPos = 0;
136 |     var curPos = 0;
137 |     while (origPos < origLength || curPos < curLength) {
138 |       // If two equal strings, walk forward
139 |       if (typeof origChildren[origPos] == "string" &&
140 |           origChildren[origPos] === curChildren[curPos]) {
141 |         origPos++;
142 |         curPos++;
143 |         continue;
144 |       }
145 |       var nextPos = this.findNextMatch(origChildren, curChildren, origPos, curPos);
146 |       if (nextPos === null) {
147 |         // No more matches, so we need to add everything up to the end
148 |         nextPos = [origLength, curLength];
149 |       }
150 |       var origNext = nextPos[0];
151 |       var curNext = nextPos[1];
152 |       if (origPos < origNext) {
153 |         // We have to delete some orig children
154 |         if (origPos + 1 == origNext && typeof origChildren[origPos] == "string") {
155 |           // Only a string has changed
156 |           if (origNext >= origLength) {
157 |             commands.push(["delete_last_text", current.jsmirrorId]);
158 |           } else {
159 |             commands.push(["deletetext-", origChildren[origPos+1][1]]);
160 |           }
161 |         } else {
162 |           // Some elements have to be deleted
163 |           var startText = typeof origChildren[origPos] == "string";
164 |           for (var i=origPos; i<origNext; i++) {
165 |             if (typeof origChildren[i] == "string") {
166 |               continue;
167 |             }
168 |             var command = "delete";
169 |             if (i == origPos+1 && startText) {
170 |               command += "-";
171 |             }
172 |             if (i+1 < origChildren && typeof origChildren[i+1] == "string") {
173 |               command += "+";
174 |             }
175 |             commands.push([command, origChildren[i][1]]);
176 |           }
177 |         }
178 |       }
179 |       if (curPos < curNext) {
180 |         // We have to insert some new children
181 |         var pushes = [];
182 |         for (var i=curPos; i<curNext; i++) {
183 |           if (typeof curChildren[i] == "string") {
184 |             pushes.push(curChildren[i]);
185 |           } else {
186 |             if (! curChildren[i].jsmirrorId) {
187 |               curChildren[i].jsmirrorId = Freeze.makeId();
188 |               this.elements[curChildren[i].jsmirrorId] = curChildren[i];
189 |             }
190 |             pushes.push(Freeze.serializeElement(curChildren[i]));
191 |           }
192 |         }
193 |         if (curChildren[curNext]) {
194 |           commands.push(["insert_before", curChildren[curNext], pushes]);
195 |         } else {
196 |           commands.push(["append_to", current.jsmirrorId, pushes]);
197 |         }
198 |       }
199 |       if (origChildren[origNext]) {
200 |         this.diffDocuments(origChildren[origNext], curChildren[curNext], commands);
201 |       }
202 |       curPos = curNext+1;
203 |       origPos = origNext+1;
204 |     }
205 |     return commands;
206 |   },
207 | 
208 |   findNextMatch: function (origChildren, curChildren, origStart, curStart) {
209 |     if (origStart >= origChildren.length || curStart >= curChildren.length) {
210 |       return null;
211 |     }
212 |     while (typeof curChildren[curStart] == "string" ||
213 |            (! curChildren[curStart].jsmirrorId)) {
214 |       curStart++;
215 |       if (curStart >= curChildren.length) {
216 |         // There's nothing with an id
217 |         return null;
218 |       }
219 |     }
220 |     // First we see if we can find a match for curStart in origChildren
221 |     var check = origStart;
222 |     var checkId = curChildren[curStart].jsmirrorId;
223 |     if (! checkId) { // FIXME: why is this if statement here
224 |       while (check < origChildren.length) {
225 |         if (typeof origChildren[check] != "string" && checkId == origChildren[check][1]) {
226 |           return [check, curStart];
227 |         }
228 |         check++;
229 |       }
230 |     }
231 |     // We didn't find a match, so we'll try to find a match for the origStart in curChildren
232 |     // This should never really go more than one loop
233 |     while (typeof origChildren[origStart] == "string") {
234 |       origStart++;
235 |       if (origStart >= origChildren.length) {
236 |         // There's no more elements
237 |         return null;
238 |       }
239 |     }
240 |     checkId = origChildren[origStart][1];
241 |     check = curStart;
242 |     while (check < curChildren.length) {
243 |       if (typeof curChildren[check] != "string" &&
244 |           checkId == curChildren[check].jsmirrorId) {
245 |         return [origStart, check];
246 |       }
247 |       check++;
248 |     }
249 |     // Fell out of the loop - nothing matched, so we'll try later elements all around
250 |     return this.findNextMatch(origChildren, curChildren, origStart+1, curStart+1);
251 |   },
252 | 
253 |   processCommand: function (command) {
254 |     if (command.event) {
255 |       this.processEvent(command.event);
256 |     }
257 |     if (command.change) {
258 |       this.processChange(command.change);
259 |     }
260 |     if (command.highlight) {
261 |       this.processHighlight(command.highlight);
262 |     }
263 |     // Skipping screen
264 |     if (command.hello) {
265 |       // Have to send the doc again
266 |       if (command.isMaster) {
267 |         alert('Two computers are sending updates, everything will break!\n' +
268 |               'The other computer is at: ' + (command.href || 'unknown'));
269 |       }
270 |       this.lastSentDoc = this.lastSentDocData = this.sentRange = null;
271 |       this.sendDoc();
272 |     }
273 |   },
274 | 
275 |   processEvent: function (event) {
276 |     var realEvent = this.deserializeEvent(event);
277 |     if (realEvent.type == 'keypress') {
278 |       event.type = 'keydown';
279 |       var downEvent = this.deserializeEvent(event);
280 |       this.dispatchEvent(downEvent, event.target);
281 |     }
282 |     this.dispatchEvent(realEvent, event.target);
283 |     if (realEvent.type == 'keypress') {
284 |       event.type = 'keyup';
285 |       var upEvent = this.deserializeEvent(event);
286 |       this.dispatchEvent(upEvent, event.target);
287 |     }
288 |   },
289 | 
290 |   deserializeEvent: function (event) {
291 |     var value;
292 |     var newEvent = this.document.createEvent(event.module);
293 |     for (var i in event) {
294 |       if (! event.hasOwnProperty(i)) {
295 |         continue;
296 |       }
297 |       value = event[i];
298 |       if (value && typeof value == "object" && value.jsmirrorId) {
299 |         var el = this.getElement(value.jsmirrorId) || null;
300 |         console.log('derefing object', i, value.jsmirrorId, el);
301 |         if (! el) {
302 |           log(WARN, "Could not find element", value.jsmirrorId);
303 |         }
304 |         value = el;
305 |       }
306 |       event[i] = value;
307 |     }
308 |     this.initEvent(newEvent, event, event.module);
309 |     // This might be redundant:
310 |     for (i in event) {
311 |       if (! event.hasOwnProperty(i)) {
312 |         continue;
313 |       }
314 |       newEvent[i] = event[i];
315 |     }
316 |     return newEvent;
317 |   },
318 | 
319 | 
320 |   initEvent: function (event, data, module) {
321 |     /* Instantiates an actual native event object */
322 |     if (module in this.eventAliases) {
323 |       module = this.eventAliases[module];
324 |     }
325 |     if (module === 'UIEvents') {
326 |       event.initUIEvent(
327 |         data.type,
328 |         data.canBubble || true,
329 |         data.cancelable || true,
330 |         data.view || window,
331 |         data.detail);
332 |     } else if (module == 'MouseEvents') {
333 |       log(INFO, {
334 |         type:data.type,
335 |         canBubble:data.canBubble || true,
336 |         cancelable:data.cancelable || true,
337 |         view:this.document.defaultView,
338 |         detail:data.detail === undefined ? 1 : this.detail,
339 |         screenX:data.screenX,
340 |         screenY:data.screenY,
341 |         clientX:data.clientX,
342 |         clientY:data.clientY,
343 |         ctrlKey:data.ctrlKey,
344 |         altKey:data.altKey,
345 |         shiftKey:data.shiftKey,
346 |         metaKey:data.metaKey,
347 |         button:data.button,
348 |         relatedTraget:data.relatedTarget || null});
349 |       event.initMouseEvent(
350 |         data.type,
351 |         data.canBubble || true,
352 |         data.cancelable || true,
353 |         this.document.defaultView,
354 |         1,//data.detail,
355 |         data.screenX,
356 |         data.screenY,
357 |         data.clientX,
358 |         data.clientY,
359 |         data.ctrlKey,
360 |         data.altKey,
361 |         data.shiftKey,
362 |         data.metaKey,
363 |         data.button,
364 |         data.relatedTarget || null);
365 |     } else if (module == 'HTMLEvents') {
366 |       event.initEvent(
367 |         data.type,
368 |         data.canBubble || true,
369 |         data.cancelable || true);
370 |     } else if (module == 'KeyboardEvent') {
371 |       var method = event.initKeyboardEvent ? 'initKeyboardEvent' : 'initKeyEvent';
372 |       event[method](
373 |         data.type,
374 |         data.canBubble || true,
375 |         data.cancelable || true,
376 |         data.view || window,
377 |         data.ctrlKey,
378 |         data.altKey,
379 |         data.shiftKey,
380 |         data.metaKey,
381 |         data.keyCode,
382 |         data.charCode);
383 |     }
384 |   },
385 | 
386 |   eventAliases: {
387 |     UIEvent: 'UIEvents',
388 |     KeyEvents: 'KeyboardEvent',
389 |     Event: 'HTMLEvents',
390 |     Events: 'HTMLEvents',
391 |     MouseScrollEvents: 'MouseEvents',
392 |     MouseEvent: 'MouseEvents',
393 |     HTMLEvent: 'HTMLEvents',
394 |     PopupEvents: 'MouseEvents'
395 |   },
396 | 
397 |   dispatchEvent: function (event, target) {
398 |     log(INFO, 'Dispatching internal event', event.type, event, target);
399 |     if (target && ! target.dispatchEvent) {
400 |       log(WARN, 'huh', event, target, target===window);
401 |       target = window;
402 |     }
403 |     if (target) {
404 |       var doDefault = target.dispatchEvent(event);
405 |       log(DEBUG, 'should do default', doDefault, event.type, target.tagName, target.href);
406 |       if (doDefault && target['on'+event.type]) {
407 |         // FIXME: how do you cancel this?
408 |         target['on'+event.type](event);
409 |       }
410 |       if (doDefault) {
411 |         if (event.type == 'click') {
412 |           this.doDefaultAction(event, target);
413 |         }
414 |       }
415 |     } else {
416 |       // FIXME: do other default actions
417 |       this.document.dispatchEvent(event);
418 |     }
419 |   },
420 | 
421 |   doDefaultAction: function (event, target) {
422 |     if (target.tagName === 'A') {
423 |       if (target.href) {
424 |         var base = target.href;
425 |         var hash = '';
426 |         if (base.indexOf('#') != -1) {
427 |           hash = base.substr(base.indexOf('#'), base.length);
428 |           base = base.substr(0, base.indexOf('#'));
429 |         }
430 |         var hereBase = location.href;
431 |         if (hereBase.indexOf('#') != -1) {
432 |           hereBase = hereBase.substr(0, hereBase.indexOf('#'));
433 |         }
434 |         if (base === hereBase) {
435 |           // Not a remote link, so it's okay
436 |           location.hash = hash;
437 |           this.channel.send({doc: {hash: hash}});
438 |           return;
439 |         }
440 |         // FIXME: make this a query:
441 |         //this.queryHref(target.href);
442 |         location.href = target.href;
443 |       }
444 |       return;
445 |     }
446 |     target = target.parentNode;
447 |     if (target) {
448 |       this.doDefaultAction(event, target);
449 |     }
450 |   },
451 | 
452 |   processChange: function (change) {
453 |     var target = this.getElement(change.target);
454 |     target.value = change.value;
455 |     var realEvent = this.document.createEvent("UIEvent");
456 |     realEvent.initUIEvent(
457 |       "change",
458 |       true, // canBubble
459 |       true, // cancelable
460 |       window, // view
461 |       {} // detail
462 |     );
463 |     var doDefault = target.dispatchEvent(realEvent);
464 |     if (doDefault && target.onchange) {
465 |       target.onchange(realEvent);
466 |     }
467 |     // FIXME: if not doDefault, should I set the target.value?
468 |     // FIXME: and should I set value after or before firing events?
469 |     // A normal change event will also fire lots of keydown and keyup events
470 |     // which sometimes are caught instead of a change event.  We'll trigger
471 |     // a keyup event just to make sure...
472 |     realEvent = this.document.createEvent('KeyboardEvent');
473 |     // FIXME: is it okay to leave both keyCode and charCode as 0?
474 |     // FIXME: probably should only fire on text fields
475 |     // FIXME: should test this with some field that does something special with Return
476 |     var method = realEvent.initKeyboardEvent ? 'initKeyboardEvent' : 'initKeyEvent';
477 |     realEvent[method](
478 |       'keyup',
479 |       true, // canBubble
480 |       true, // cancelable
481 |       window, // view
482 |       false, // ctrlKey
483 |       false, // altKey
484 |       false, // shiftKey
485 |       false, // metaKey
486 |       0, // keyCode
487 |       0 // charCode
488 |       );
489 |     doDefault = target.dispatchEvent(realEvent);
490 |     if (doDefault && target.onkeyup) {
491 |       target.onkeyup(realEvent);
492 |     }
493 |   },
494 | 
495 |   processHighlight: function (highlight) {
496 |     var el = this.getElement(highlight.target);
497 |     if (el) {
498 |       this.temporaryHighlight(el, highlight.offsetTop, highlight.offsetLeft,
499 |                               highlight.mode || 'remote');
500 |     }
501 |   },
502 | 
503 |   refreshElements: function () {
504 |     return;
505 |     this.elements = {};
506 |     function recur(elements, el) {
507 |       elements[el.jsmirrorId] = el;
508 |       var l = el.childNodes.length;
509 |       for (var i=0; i<l; i++) {
510 |         var child = el.childNodes[i];
511 |         if (child.nodeType === ELEMENT_NODE) {
512 |           recur(elements, child);
513 |         }
514 |       }
515 |     }
516 |     recur(this.elements, this.document.head);
517 |     recur(this.elements, this.document.body);
518 |   },
519 | 
520 |   getElement: function (id) {
521 |     if (! this.elements[id]) {
522 |       console.warn("Could not find element", id);
523 |     }
524 |     return this.elements[id] || null;
525 |   }
526 | 
527 | };
528 | 
529 | 
530 | function diffRepr(data) {
531 |   /* Gives a string representation of a diff */
532 |   var result = '';
533 |   for (var i=0; i<data.length; i++) {
534 |     if (result) {
535 |       result += '\n';
536 |     }
537 |     var name = data[i][0];
538 |     var elId = data[i][1];
539 |     if (window.master || window.mirror) {
540 |       var el = (window.master || window.mirror).getElement(elId);
541 |       if (el) {
542 |         elId = el.tagName+':'+elId;
543 |       }
544 |     }
545 |     if (name === 'attrs') {
546 |       result += 'attrs('+elId+')='+keys(data[i][2], true).join(',');
547 |     } else if (name.substr(0, 6) == 'delete') {
548 |       result += name + '(' + elId + ')';
549 |     } else {
550 |       result += name + '(' + elId + ')=' + data[i][2].length + '/' + parseInt(JSON.stringify(data[i][2]).length, 10);
551 |       result += '\n    ' + JSON.stringify(data[i][2]);
552 |     }
553 |   }
554 |   return result;
555 | }
556 | 
557 | function keys(obj, sort) {
558 |   var result = [];
559 |   for (var i in obj) {
560 |     result.push(i);
561 |   }
562 |   if (sort) {
563 |     result.sort();
564 |   }
565 |   return result;
566 | }
567 | 


--------------------------------------------------------------------------------
/data/md5.js:
--------------------------------------------------------------------------------
  1 | // From http://pajhome.org.uk/crypt/md5/md5.html
  2 | // © 1998 - 2011 Paul Johnston, distributed under the BSD License   Updated:23 Aug 2010
  3 | 
  4 | 
  5 | /*
  6 |  * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
  7 |  * Digest Algorithm, as defined in RFC 1321.
  8 |  * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
  9 |  * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 10 |  * Distributed under the BSD License
 11 |  * See http://pajhome.org.uk/crypt/md5 for more info.
 12 |  */
 13 | 
 14 | /*
 15 |  * Configurable variables. You may need to tweak these to be compatible with
 16 |  * the server-side, but the defaults work in most cases.
 17 |  */
 18 | var hexcase = 0;   /* hex output format. 0 - lowercase; 1 - uppercase        */
 19 | var b64pad  = "";  /* base-64 pad character. "=" for strict RFC compliance   */
 20 | 
 21 | /*
 22 |  * These are the functions you'll usually want to call
 23 |  * They take string arguments and return either hex or base-64 encoded strings
 24 |  */
 25 | function hex_md5(s)    { return rstr2hex(rstr_md5(str2rstr_utf8(s))); }
 26 | function b64_md5(s)    { return rstr2b64(rstr_md5(str2rstr_utf8(s))); }
 27 | function any_md5(s, e) { return rstr2any(rstr_md5(str2rstr_utf8(s)), e); }
 28 | function hex_hmac_md5(k, d)
 29 |   { return rstr2hex(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
 30 | function b64_hmac_md5(k, d)
 31 |   { return rstr2b64(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
 32 | function any_hmac_md5(k, d, e)
 33 |   { return rstr2any(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d)), e); }
 34 | 
 35 | /*
 36 |  * Perform a simple self-test to see if the VM is working
 37 |  */
 38 | function md5_vm_test()
 39 | {
 40 |   return hex_md5("abc").toLowerCase() == "900150983cd24fb0d6963f7d28e17f72";
 41 | }
 42 | 
 43 | /*
 44 |  * Calculate the MD5 of a raw string
 45 |  */
 46 | function rstr_md5(s)
 47 | {
 48 |   return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
 49 | }
 50 | 
 51 | /*
 52 |  * Calculate the HMAC-MD5, of a key and some data (raw strings)
 53 |  */
 54 | function rstr_hmac_md5(key, data)
 55 | {
 56 |   var bkey = rstr2binl(key);
 57 |   if(bkey.length > 16) bkey = binl_md5(bkey, key.length * 8);
 58 | 
 59 |   var ipad = Array(16), opad = Array(16);
 60 |   for(var i = 0; i < 16; i++)
 61 |   {
 62 |     ipad[i] = bkey[i] ^ 0x36363636;
 63 |     opad[i] = bkey[i] ^ 0x5C5C5C5C;
 64 |   }
 65 | 
 66 |   var hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
 67 |   return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
 68 | }
 69 | 
 70 | /*
 71 |  * Convert a raw string to a hex string
 72 |  */
 73 | function rstr2hex(input)
 74 | {
 75 |   try { hexcase } catch(e) { hexcase=0; }
 76 |   var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
 77 |   var output = "";
 78 |   var x;
 79 |   for(var i = 0; i < input.length; i++)
 80 |   {
 81 |     x = input.charCodeAt(i);
 82 |     output += hex_tab.charAt((x >>> 4) & 0x0F)
 83 |            +  hex_tab.charAt( x        & 0x0F);
 84 |   }
 85 |   return output;
 86 | }
 87 | 
 88 | /*
 89 |  * Convert a raw string to a base-64 string
 90 |  */
 91 | function rstr2b64(input)
 92 | {
 93 |   try { b64pad } catch(e) { b64pad=''; }
 94 |   var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 95 |   var output = "";
 96 |   var len = input.length;
 97 |   for(var i = 0; i < len; i += 3)
 98 |   {
 99 |     var triplet = (input.charCodeAt(i) << 16)
100 |                 | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0)
101 |                 | (i + 2 < len ? input.charCodeAt(i+2)      : 0);
102 |     for(var j = 0; j < 4; j++)
103 |     {
104 |       if(i * 8 + j * 6 > input.length * 8) output += b64pad;
105 |       else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F);
106 |     }
107 |   }
108 |   return output;
109 | }
110 | 
111 | /*
112 |  * Convert a raw string to an arbitrary string encoding
113 |  */
114 | function rstr2any(input, encoding)
115 | {
116 |   var divisor = encoding.length;
117 |   var i, j, q, x, quotient;
118 | 
119 |   /* Convert to an array of 16-bit big-endian values, forming the dividend */
120 |   var dividend = Array(Math.ceil(input.length / 2));
121 |   for(i = 0; i < dividend.length; i++)
122 |   {
123 |     dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1);
124 |   }
125 | 
126 |   /*
127 |    * Repeatedly perform a long division. The binary array forms the dividend,
128 |    * the length of the encoding is the divisor. Once computed, the quotient
129 |    * forms the dividend for the next step. All remainders are stored for later
130 |    * use.
131 |    */
132 |   var full_length = Math.ceil(input.length * 8 /
133 |                                     (Math.log(encoding.length) / Math.log(2)));
134 |   var remainders = Array(full_length);
135 |   for(j = 0; j < full_length; j++)
136 |   {
137 |     quotient = Array();
138 |     x = 0;
139 |     for(i = 0; i < dividend.length; i++)
140 |     {
141 |       x = (x << 16) + dividend[i];
142 |       q = Math.floor(x / divisor);
143 |       x -= q * divisor;
144 |       if(quotient.length > 0 || q > 0)
145 |         quotient[quotient.length] = q;
146 |     }
147 |     remainders[j] = x;
148 |     dividend = quotient;
149 |   }
150 | 
151 |   /* Convert the remainders to the output string */
152 |   var output = "";
153 |   for(i = remainders.length - 1; i >= 0; i--)
154 |     output += encoding.charAt(remainders[i]);
155 | 
156 |   return output;
157 | }
158 | 
159 | /*
160 |  * Encode a string as utf-8.
161 |  * For efficiency, this assumes the input is valid utf-16.
162 |  */
163 | function str2rstr_utf8(input)
164 | {
165 |   var output = "";
166 |   var i = -1;
167 |   var x, y;
168 | 
169 |   while(++i < input.length)
170 |   {
171 |     /* Decode utf-16 surrogate pairs */
172 |     x = input.charCodeAt(i);
173 |     y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
174 |     if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF)
175 |     {
176 |       x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF);
177 |       i++;
178 |     }
179 | 
180 |     /* Encode output as utf-8 */
181 |     if(x <= 0x7F)
182 |       output += String.fromCharCode(x);
183 |     else if(x <= 0x7FF)
184 |       output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F),
185 |                                     0x80 | ( x         & 0x3F));
186 |     else if(x <= 0xFFFF)
187 |       output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F),
188 |                                     0x80 | ((x >>> 6 ) & 0x3F),
189 |                                     0x80 | ( x         & 0x3F));
190 |     else if(x <= 0x1FFFFF)
191 |       output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07),
192 |                                     0x80 | ((x >>> 12) & 0x3F),
193 |                                     0x80 | ((x >>> 6 ) & 0x3F),
194 |                                     0x80 | ( x         & 0x3F));
195 |   }
196 |   return output;
197 | }
198 | 
199 | /*
200 |  * Encode a string as utf-16
201 |  */
202 | function str2rstr_utf16le(input)
203 | {
204 |   var output = "";
205 |   for(var i = 0; i < input.length; i++)
206 |     output += String.fromCharCode( input.charCodeAt(i)        & 0xFF,
207 |                                   (input.charCodeAt(i) >>> 8) & 0xFF);
208 |   return output;
209 | }
210 | 
211 | function str2rstr_utf16be(input)
212 | {
213 |   var output = "";
214 |   for(var i = 0; i < input.length; i++)
215 |     output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF,
216 |                                    input.charCodeAt(i)        & 0xFF);
217 |   return output;
218 | }
219 | 
220 | /*
221 |  * Convert a raw string to an array of little-endian words
222 |  * Characters >255 have their high-byte silently ignored.
223 |  */
224 | function rstr2binl(input)
225 | {
226 |   var output = Array(input.length >> 2);
227 |   for(var i = 0; i < output.length; i++)
228 |     output[i] = 0;
229 |   for(var i = 0; i < input.length * 8; i += 8)
230 |     output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (i%32);
231 |   return output;
232 | }
233 | 
234 | /*
235 |  * Convert an array of little-endian words to a string
236 |  */
237 | function binl2rstr(input)
238 | {
239 |   var output = "";
240 |   for(var i = 0; i < input.length * 32; i += 8)
241 |     output += String.fromCharCode((input[i>>5] >>> (i % 32)) & 0xFF);
242 |   return output;
243 | }
244 | 
245 | /*
246 |  * Calculate the MD5 of an array of little-endian words, and a bit length.
247 |  */
248 | function binl_md5(x, len)
249 | {
250 |   /* append padding */
251 |   x[len >> 5] |= 0x80 << ((len) % 32);
252 |   x[(((len + 64) >>> 9) << 4) + 14] = len;
253 | 
254 |   var a =  1732584193;
255 |   var b = -271733879;
256 |   var c = -1732584194;
257 |   var d =  271733878;
258 | 
259 |   for(var i = 0; i < x.length; i += 16)
260 |   {
261 |     var olda = a;
262 |     var oldb = b;
263 |     var oldc = c;
264 |     var oldd = d;
265 | 
266 |     a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
267 |     d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
268 |     c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
269 |     b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
270 |     a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
271 |     d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
272 |     c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
273 |     b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
274 |     a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
275 |     d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
276 |     c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
277 |     b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
278 |     a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
279 |     d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
280 |     c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
281 |     b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
282 | 
283 |     a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
284 |     d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
285 |     c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
286 |     b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
287 |     a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
288 |     d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
289 |     c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
290 |     b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
291 |     a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
292 |     d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
293 |     c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
294 |     b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
295 |     a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
296 |     d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
297 |     c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
298 |     b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
299 | 
300 |     a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
301 |     d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
302 |     c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
303 |     b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
304 |     a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
305 |     d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
306 |     c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
307 |     b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
308 |     a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
309 |     d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
310 |     c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
311 |     b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
312 |     a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
313 |     d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
314 |     c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
315 |     b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
316 | 
317 |     a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
318 |     d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
319 |     c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
320 |     b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
321 |     a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
322 |     d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
323 |     c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
324 |     b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
325 |     a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
326 |     d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
327 |     c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
328 |     b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
329 |     a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
330 |     d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
331 |     c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
332 |     b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
333 | 
334 |     a = safe_add(a, olda);
335 |     b = safe_add(b, oldb);
336 |     c = safe_add(c, oldc);
337 |     d = safe_add(d, oldd);
338 |   }
339 |   return Array(a, b, c, d);
340 | }
341 | 
342 | /*
343 |  * These functions implement the four basic operations the algorithm uses.
344 |  */
345 | function md5_cmn(q, a, b, x, s, t)
346 | {
347 |   return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
348 | }
349 | function md5_ff(a, b, c, d, x, s, t)
350 | {
351 |   return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
352 | }
353 | function md5_gg(a, b, c, d, x, s, t)
354 | {
355 |   return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
356 | }
357 | function md5_hh(a, b, c, d, x, s, t)
358 | {
359 |   return md5_cmn(b ^ c ^ d, a, b, x, s, t);
360 | }
361 | function md5_ii(a, b, c, d, x, s, t)
362 | {
363 |   return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
364 | }
365 | 
366 | /*
367 |  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
368 |  * to work around bugs in some JS interpreters.
369 |  */
370 | function safe_add(x, y)
371 | {
372 |   var lsw = (x & 0xFFFF) + (y & 0xFFFF);
373 |   var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
374 |   return (msw << 16) | (lsw & 0xFFFF);
375 | }
376 | 
377 | /*
378 |  * Bitwise rotate a 32-bit number to the left.
379 |  */
380 | function bit_rol(num, cnt)
381 | {
382 |   return (num << cnt) | (num >>> (32 - cnt));
383 | }
384 | 


--------------------------------------------------------------------------------
/data/rtc.js:
--------------------------------------------------------------------------------
 1 | function supportsWebRTC() {
 2 |   // FIXME: this is to disable the currently-nonfunctioning RTC support
 3 |   return false;
 4 |   return !!(
 5 |     (window.mozRTCPeerConnection || window.RTCPeerConnection) &&
 6 |     (navigator.mozGetUserMedia || navigator.getUserMedia)
 7 |   );
 8 | }
 9 | 
10 | if (window.mozRTCPeerConnection) {
11 |   RTCPeerConnection = mozRTCPeerConnection;
12 | }
13 | 
14 | if (navigator.mozGetUserMedia) {
15 |   navigator.getUserMedia = navigator.mozGetUserMedia;
16 | }
17 | 
18 | function setupAudio(callback, audioEl, offer) {
19 |   if (offer) {
20 |     console.log('Got offer, creating answer');
21 |   } else {
22 |     console.log('Creating offer');
23 |   }
24 |   var pc = new RTCPeerConnection();
25 |   if (typeof audioEl == "string") {
26 |     audioEl = document.getElementById(audioEl);
27 |   }
28 |   /*if (audioEl.tagName != "AUDIO") {
29 |     // FIXME: add controls?
30 |     var el = document.createElement("audio");
31 |     audioEl.appendChild(el);
32 |     audioEl = el;
33 |   }*/
34 |   if (audioEl.tagName != "VIDEO") {
35 |     // FIXME: add controls?
36 |     var el = document.createElement("video");
37 |     el.style.width = '100%';
38 |     audioEl.appendChild(el);
39 |     audioEl = el;
40 |   }
41 |   console.log('creating media');
42 |   // FIXME: change to audio
43 |   console.log(navigator.mozGetUserMedia({video: true}, function (stream) {
44 |     console.log('media created', stream);
45 |     pc.addStream(stream);
46 |     audioEl.mozSrcObject = stream;
47 |     audioEl.play();
48 |     if (offer) {
49 |       console.log('setting remotedescription from offer');
50 |       pc.setRemoteDescription(offer, function () {
51 |         console.log('remotedescription set / making answer');
52 |         pc.createAnswer(offer, function (answer) {
53 |           console.log('createAnswer returned / setting localdescription');
54 |           pc.setLocalDescription(answer, function () {
55 |             console.log('setLocalDescription done');
56 |             callback(null, {pc: pc, answer: answer});
57 |           }, function (code) {
58 |             callback({stage: 'setLocalDescription', code: code});
59 |           });
60 |         }, function (code) {
61 |           callback({stage: 'createAnswer', code: code});
62 |         });
63 |       }, function (code) {
64 |         callback({stage: 'setRemoteDescription', code: code});
65 |       });
66 |     } else {
67 |       // We need to generate an offer
68 |       console.log('creating offer');
69 |       pc.createOffer(function (offer) {
70 |         console.log('offer created / setting localDescription');
71 |         pc.setLocalDescription(offer, function () {
72 |           console.log('Finished description ready for callback');
73 |           callback(null, {pc: pc, offer: offer});
74 |         }, function (code) {
75 |           callback({stage: 'setLocalDescription', code: code});
76 |         });
77 |       }, function (code) {
78 |         callback({stage: 'createOffer', code: code});
79 |       });
80 |     }
81 |   }, function (code) {
82 |     console.error("No stream available");
83 |     callback({stage: "getUserMedia", code: code});
84 |   }));
85 |   console.log('thing finished');
86 | }
87 | 
88 | function respondToAnswer(callback, pc, answer) {
89 |   pc.setRemoteDescription(function () {
90 |     callback();
91 |   }, function (code) {
92 |     callback({stage: "setRemoteDescription", code: code});
93 |   });
94 | }
95 | 


--------------------------------------------------------------------------------
/data/share-worker.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | In-content share implementation for the addon
 3 | */
 4 | 
 5 | var channel = null;
 6 | var master = null;
 7 | 
 8 | var myId = parseInt(Math.random()*1000, 10);
 9 | 
10 | console.log('Starting up worker', myId);
11 | 
12 | self.port.on("StartShare", function () {
13 |   channel = new PortChannel(self.port);
14 |   console.log('Starting channel:', channel.toString());
15 |   channel.send({hello: true, isMaster: true, supportsWebRTC: supportsWebRTC()});
16 |   master = new Master(channel, unsafeWindow.document);
17 |   channel.onmessage = function (data) {
18 |     /*
19 |     if (data.chatMessage) {
20 |       self.port.emit("LocalMessage", data);
21 |     }
22 |     if (data.bye) {
23 |       // FIXME: should sanitize ID
24 |       self.port.emit("LocalMessage", {chatMessage: "Bye!", messageId: "browsermirror-bye-" + data.clientId});
25 |     }
26 |     if (data.hello) {
27 |       self.port.emit("LocalMessage", {connected: data.clientId});
28 |     }
29 |     */
30 |     if (data.rtcOffer || data.rtcAnswer) {
31 |       console.log('Got remote offer');
32 |       self.port.emit("RTC", data);
33 |       return;
34 |     }
35 |     if (data.supportsWebRTC && supportsWebRTC()) {
36 |       self.port.emit("SupportsWebRTC");
37 |     }
38 |     if (data.hello) {
39 |       channel.send({helloBack: true, isMaster: true, supportsWebRTC: supportsWebRTC()});
40 |     }
41 |     master.processCommand(data);
42 |   };
43 | });
44 | 


--------------------------------------------------------------------------------
/data/sharing.html:
--------------------------------------------------------------------------------
1 | <div>
2 |   <a id="share" href="#">share</span>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/data/sharing.js:
--------------------------------------------------------------------------------
1 | self.port.on("ShareOn", function () {
2 |   document.getElementById('share').innerHTML = 'sharing...';
3 | });
4 | 
5 | self.port.on("ShareOff", function () {
6 |   document.getElementById('share').innerHTML = 'share';
7 | });
8 | 


--------------------------------------------------------------------------------
/data/startup-help.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Welcome to SeeItSaveIt!</title>
 5 |   </head>
 6 |   <body>
 7 | 
 8 | <p>Thanks for checking out <a target="_blank"
 9 | href="https://browsermirror.ianbicking.org">BrowserMirror</a>!</p>
10 | 
11 | <p>You should see a link/button at the bottom right of the
12 | browser: <span style="text-decoration: underline; color:
13 | #00f">share</span> &mdash; if you don't then you need to show the
14 | Add-on Bar:</p>
15 | 
16 | <p>Go to <strong>View &gt; Toolbars &gt; Add-on bar</strong> to
17 | display the bar
18 | (or <a href="http://support.mozilla.org/en-US/kb/add-on-bar-quick-access-to-add-ons">read
19 | more here</a>).</p>
20 | 
21 | <p>Once you see the button, click it to start sharing your session.
22 | Once you are sharing you have to tell someone else; on the sidebar on
23 | the left click "<strong>share</strong>" and it will give you a link
24 | that you can give to someone else to start sharing your session.</p>
25 | 
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/data/user.js:
--------------------------------------------------------------------------------
  1 | function Class(proto) {
  2 |   var makeInstance = function () {
  3 |     var instance = Object.create(proto);
  4 |     instance.constructor.apply(instance, arguments);
  5 |     return instance;
  6 |   };
  7 |   makeInstance.prototype = proto;
  8 |   return makeInstance;
  9 | }
 10 | 
 11 | var Users = Class({
 12 |   constructor: function (containerEl) {
 13 |     this.data = {};
 14 |     this.containerEl = containerEl;
 15 |   },
 16 | 
 17 |   get: function (clientId) {
 18 |     if (! this.data.hasOwnProperty(clientId)) {
 19 |       var user = new User(clientId, this);
 20 |       user.addToUserList(this.containerEl);
 21 |       this.data[clientId] = user;
 22 |       return user;
 23 |     } else {
 24 |       return this.data[clientId];
 25 |     }
 26 |   },
 27 | 
 28 |   checkAll: function () {
 29 |     for (var i in this.data) {
 30 |       if (! this.data.hasOwnProperty(i)) {
 31 |         continue;
 32 |       }
 33 |       var user = this.data[i];
 34 |       user.checkTimeout();
 35 |     }
 36 |   },
 37 | 
 38 |   removeUser: function (user) {
 39 |     delete this.data[user.clientId];
 40 |   },
 41 | 
 42 |   setContainer: function (el) {
 43 |     this.containerEl = el;
 44 |     for (var i in this.data) {
 45 |       if (! this.data.hasOwnProperty(i)) {
 46 |         continue;
 47 |       }
 48 |       this.data[i].addToUserList(el);
 49 |     }
 50 |   },
 51 | 
 52 |   destroy: function () {
 53 |     for (var i in this.data) {
 54 |       if (! this.data.hasOwnProperty(i)) {
 55 |         continue;
 56 |       }
 57 |       this.data[i].removeUser();
 58 |     }
 59 |     this.data = {};
 60 |   }
 61 | });
 62 | 
 63 | function User(clientId, users) {
 64 |   this.clientId = clientId;
 65 |   this.users = users;
 66 |   this.lastPing = Date.now();
 67 | }
 68 | 
 69 | User.prototype = {
 70 | 
 71 |   MAX_PING_TIME: 1000 * 60 * 30, // 30 minutes
 72 |   BYE_TIMEOUT: 1000, // 1 second until a "bye" is final
 73 |   defunct: false,
 74 |   timingOut: false,
 75 | 
 76 |   processCommand: function (command) {
 77 |     this.lastPing = Date.now();
 78 |     if (this.timingOut) {
 79 |       this.setTimingOut();
 80 |     }
 81 |     this.timingOut = false;
 82 |     if (command.email) {
 83 |       // FIXME: this just trusts the user
 84 |       this.setEmail(command.email);
 85 |     }
 86 |     if (command.bye) {
 87 |       this.defunct = true;
 88 |       // FIXME: show that the user is going?
 89 |       this.timingOut = true;
 90 |       this.setTimingOut();
 91 |       setTimeout(this.checkTimeout.bind(this), this.BYE_TIMEOUT);
 92 |     }
 93 |   },
 94 | 
 95 |   checkTimeout: function () {
 96 |     if (this.timingOut) {
 97 |       this.removeUser();
 98 |     }
 99 |     if (this.isExpired()) {
100 |       this.timingOut = true;
101 |       this.setTimingOut();
102 |       setTimeout(this.checkTimeout.bind(this), this.BYE_TIMEOUT);
103 |     }
104 |   },
105 | 
106 |   setTimingOut: function () {
107 |     if (! this.userElement) {
108 |       return;
109 |     }
110 |     if (this.timingOut) {
111 |       if (this.userElement.className.search(/timing-out/) == -1) {
112 |         this.userElement.className += ' timing-out';
113 |       }
114 |     } else if (this.userElement.className.search(/timing-out/) != -1) {
115 |       this.userElement.className = this.userElement.className.replace(/\s*timing-out/, '');
116 |     }
117 |   },
118 | 
119 |   setEmail: function (email) {
120 |     if (this.email) {
121 |       this.email = null;
122 |       this.showIcon();
123 |       this.showName();
124 |     }
125 |     this.email = email;
126 |     this.addIcon();
127 |     this.showName();
128 |   },
129 | 
130 |   showIcon: function () {
131 |     if (! this.userElement) {
132 |       return;
133 |     }
134 |     if (this.email) {
135 |       var img = this.userElement.ownerDocument.createElememnt('img');
136 |       img.src = secureGravatar(this.email, 32, 'retro');
137 |       img.className = 'profile';
138 |       this.userElement.insertBefore(img, this.userElement.childNodes[0]);
139 |     } else {
140 |       var el = this.userElement.querySelector('img.profile');
141 |       if (el) {
142 |         el.parentNode.removeChild(el);
143 |       }
144 |     }
145 |   },
146 | 
147 |   showName: function () {
148 |     if (! this.userElement) {
149 |       return;
150 |     }
151 |     var el = this.userElement.querySelector('span.username');
152 |     el.innerHTML = '';
153 |     el.appendChild(el.ownerDocument.createTextNode(this.email || 'unknown person'));
154 |     el.className = 'username';
155 |     if (! this.email) {
156 |       el.className += ' unknown';
157 |     }
158 |   },
159 | 
160 |   isExpired: function () {
161 |     if (this.defunct) {
162 |       return true;
163 |     }
164 |     return Date.now() - this.lastPing > this.MAX_PING_TIME;
165 |   },
166 | 
167 |   removeUser: function () {
168 |     if (this.userElement) {
169 |       this.userElement.parentNode.removeChild(this.userElement);
170 |     }
171 |     this.userElement = null;
172 |     this.users.removeUser(this);
173 |   },
174 | 
175 |   addToUserList: function (userListEl) {
176 |     if (this.userElement) {
177 |       this.removeUser();
178 |     }
179 |     if (! userListEl) {
180 |       return;
181 |     }
182 |     var doc = userListEl.ownerDocument;
183 |     this.userElement = doc.createElement('div');
184 |     this.userElement.className = 'user';
185 |     var name = doc.createElement('span');
186 |     name.className = 'username';
187 |     this.userElement.appendChild(name);
188 |     userListEl.appendChild(this.userElement);
189 |   }
190 | 
191 | };
192 | 
193 | function secureGravatar(email, size, fallback) {
194 |   email = email.replace(/^\s*/, '');
195 |   email = email.replace(/\s*$/, '');
196 |   email = email.toLowerCase();
197 |   return ('https://secure.gravatar.com/avatar/' +
198 |           hex_md5(email) +
199 |           '?size=' + encodeURIComponent(size) +
200 |           'd=' + encodeURIComponent(fallback));
201 | }
202 | 
203 | 
204 | if (typeof require != "undefined") {
205 |   hex_md5 = require("./chrome-md5.js").hex_md5;
206 |   setTimeout = require("timers").setTimeout;
207 | }
208 | 
209 | if (typeof exports != "undefined") {
210 |   exports.Users = Users;
211 | }
212 | 


--------------------------------------------------------------------------------
/data/wsecho.js:
--------------------------------------------------------------------------------
 1 | /* Acts as a kind of echoing websocket */
 2 | 
 3 | function startProxier(address) {
 4 |   var channel = null;
 5 |   var channelAddress = null;
 6 |   var closing = false;
 7 |   var closer = null;
 8 |   channel = new WebSocketChannel(address);
 9 |   closer = PortIncomingChannel(channel);
10 | }
11 | 
12 | self.port.on("StartProxier", startProxier);
13 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <title>Example document</title>
 4 | <script src="../mirror.js"></script>
 5 | <script>
 6 | var master = new Master('/share/foo');
 7 | window.addEventListener('load', function () {
 8 |   master.poll(5000);
 9 | }, false);
10 | document.addEventListener('click', function (ev) {
11 |   window.gev = ev;
12 |   console.log('set background on', ev.target);
13 |   ev.target.style.backgroundColor = '#fdd';
14 | }, false);
15 | </script>
16 | </head>
17 | <body>
18 | 
19 | <h1>Example</h1>
20 | 
21 | <p>This is an example document.
22 | A field: <input type="text" name="foo" value="something" />
23 | </p>
24 | 
25 | <p>A link: <a href="#testy">testy</a></p>
26 | 
27 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
28 | 
29 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
30 | 
31 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
32 | 
33 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
34 | 
35 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
36 | 
37 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
38 | 
39 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
40 | 
41 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
42 | 
43 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
44 | 
45 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
46 | 
47 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
48 | 
49 | 
50 | </body> </html>
51 | 


--------------------------------------------------------------------------------
/lib/channels.js:
--------------------------------------------------------------------------------
1 | ../data/channels.js


--------------------------------------------------------------------------------
/lib/chrome-md5.js:
--------------------------------------------------------------------------------
 1 | const { CC, Ci } = require("chrome");
 2 | 
 3 | exports.hex_md5 = function (str) {
 4 |   var converter =
 5 |     Cc["@mozilla.org/intl/scriptableunicodeconverter"].
 6 |       createInstance(Ci.nsIScriptableUnicodeConverter);
 7 | 
 8 |   converter.charset = "UTF-8";
 9 |   // result is an out parameter,
10 |   // result.value will contain the array length
11 |   var result = {};
12 |   // data is an array of bytes
13 |   var data = converter.convertToByteArray(str, result);
14 |   var ch = Cc["@mozilla.org/security/hash;1"]
15 |              .createInstance(Ci.nsICryptoHash);
16 |   ch.init(ch.MD5);
17 |   ch.update(data, data.length);
18 |   var hash = ch.finish(false);
19 | 
20 |   // return the two-digit hexadecimal code for a byte
21 |   function toHexString(charCode)
22 |   {
23 |     return ("0" + charCode.toString(16)).slice(-2);
24 |   }
25 | 
26 |   // convert the binary hash data to a hex string.
27 |   var s = [toHexString(hash.charCodeAt(i)) for (i in hash)].join("");
28 |   return s;
29 | };
30 | 


--------------------------------------------------------------------------------
/lib/main.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | The main.js module handles the widget that activates sharing, and the
 3 | configuration for URLs
 4 | */
 5 | 
 6 | const widgets = require("widget");
 7 | const data = require("self").data;
 8 | const tabs = require("tabs");
 9 | const { Sharer } = require("./sharer.js");
10 | const { btoa } = require("chrome").Cu.import("resource://gre/modules/Services.jsm");
11 | const simplePrefs = require('simple-prefs');
12 | const { StartupPanel } = require("./startup-panel");
13 | 
14 | function getServer() {
15 |   return simplePrefs.prefs.server.replace(/\/*$/, '');
16 | }
17 | 
18 | function httpServer(server) {
19 |   // Fixes problem where insecure content (like CSS from a site) isn't
20 |   // served up because the viewer is over https.  Not sure what we
21 |   // should really do.
22 |   var livePrefix = 'https://browsermirror.ianbicking.org';
23 |   if (server.indexOf(livePrefix) == 0) {
24 |     return 'http://browsermirror.ianbicking.org:8080' + server.substr(livePrefix.length, server.length);
25 |   }
26 |   return server;
27 | }
28 | 
29 | function makeId() {
30 |   if (simplePrefs.prefs.stickyShareId) {
31 |     return simplePrefs.prefs.stickyShareId;
32 |   }
33 |   return btoa(Math.random()).replace(/=/g, '').substr(0, 10);
34 | }
35 | 
36 | StartupPanel({
37 |   name: "SeeItSaveIt",
38 |   contentURL: data.url("startup-help.html")
39 | });
40 | 
41 | var sharer = widgets.Widget({
42 |   id: "browsermirror-sharer",
43 |   label: "Share This Session",
44 |   contentURL: data.url("sharing.html"),
45 |   contentScriptFile: data.url("sharing.js"),
46 |   onClick: startShare,
47 |   width: 46
48 | });
49 | 
50 | var sharingWorker = null;
51 | 
52 | function startShare() {
53 |   if (sharingWorker) {
54 |     sharingWorker.destroy();
55 |     sharingWorker = null;
56 |     sharer.port.emit("ShareOff");
57 |     return;
58 |   }
59 |   var id = makeId();
60 |   var server = getServer();
61 |   var urls = {
62 |     hub: server + '/hub/' + id,
63 |     share: httpServer(server) + '/' + id,
64 |     audioIframe: server + '/data/audio-iframe.html',
65 |     loginIframe: server + '/data/login-iframe.html',
66 |     blank: server + '/static/blank.html'
67 |   };
68 |   sharingWorker = new Sharer(tabs.activeTab, urls, function () {
69 |     sharingWorker.destroy();
70 |     sharingWorker = null;
71 |     sharer.port.emit("ShareOff");
72 |   });
73 |   sharer.port.emit("ShareOn");
74 | }
75 | 


--------------------------------------------------------------------------------
/lib/rtc.js:
--------------------------------------------------------------------------------
 1 | const { Cu, Ci, Cc } = require("chrome");
 2 | Cu.import("resource://gre/modules/Services.jsm");
 3 | 
 4 | 
 5 | const windowMediator = Cc['@mozilla.org/appshell/window-mediator;1'].
 6 |                        getService(Ci.nsIWindowMediator);
 7 | 
 8 | function getBrowser() {
 9 |   /*
10 |   FIXME: this is how it's done in webrtcUI.jsm:
11 | 
12 |   let someWindow = Services.wm.getMostRecentWindow(null);
13 |   let contentWindow = someWindow.QueryInterface(Ci.nsIInterfaceRequestor)
14 |                                 .getInterface(Ci.nsIDOMWindowUtils)
15 |                                 .getOuterWindowWithId(windowID);
16 |   */
17 |   let contentWindow = windowMediator.getMostRecentWindow("navigator:browser");
18 |   let browser = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor)
19 |                                .getInterface(Ci.nsIWebNavigation)
20 |                                .QueryInterface(Ci.nsIDocShell)
21 |                                .chromeEventHandler;
22 |   return browser;
23 | }
24 | 
25 | function getUserMedia(options, onsuccess, onerror) {
26 |   let browser = getBrowser();
27 |   let navigator = browser.ownerDocument.defaultView.navigator;
28 |   if (! onerror) {
29 |     onerror = function (error) {
30 |       Cu.reportError(error);
31 |     };
32 |   }
33 |   navigator.mozGetUserMedia(options, onsuccess, onerror);
34 | }
35 | 
36 | function getPeerConnection() {
37 |   let browser = getBrowser();
38 |   let win = browser.ownerDocument.defaultView;
39 |   return new win.MozRTCPeerConnection();
40 | }
41 | 
42 | exports.getUserMedia = getUserMedia;
43 | 


--------------------------------------------------------------------------------
/lib/sharer.js:
--------------------------------------------------------------------------------
  1 | const { EchoProxy, ChromePostMessageChannel, PortProxyChannel, PortChannel } = require("./channels.js");
  2 | const { data } = require("self");
  3 | const clipboard = require("clipboard");
  4 | const { Sidebar } = require("./sidebar");
  5 | const tabs = require("tabs");
  6 | const { Page } = require("page-worker");
  7 | const { setInterval } = require("timers");
  8 | const { Users } = require("./user.js");
  9 | const windows = require("windows");
 10 | const { getUserMedia } = require("./rtc");
 11 | 
 12 | function Sharer(tab, urls, onclose) {
 13 |   this.tab = tab;
 14 |   this.urls = urls;
 15 |   this._onclose = onclose;
 16 |   this.sidebar = new Sidebar({
 17 |     title: 'Sharing',
 18 |     url: data.url('chat.html'),
 19 |     onReady: (function () {
 20 |       this.bindChatEvents();
 21 |     }).bind(this),
 22 |     showForTab: (function (tab) {
 23 |       if (tab == this.tab) {
 24 |         return true;
 25 |       }
 26 |       // We have to check if we changed tabs in *this* window, or changed windows
 27 |       // or tabs in another window
 28 |       var tabs = windows.browserWindows.activeWindow.tabs;
 29 |       for (var i=0; i<tabs.length; i++) {
 30 |         if (tabs[i] == this.tab) {
 31 |           // We changed to another tab in the same window
 32 |           return false;
 33 |         }
 34 |       }
 35 |       console.log('Changed to tab ' + tab.url + ' in another window');
 36 |       return true;
 37 |     }).bind(this),
 38 |     onClose: (function (event) {
 39 |       this.onclose();
 40 |     }).bind(this)
 41 |   });
 42 |   this.tabActivate = this.tabActivate.bind(this);
 43 |   tabs.on("activate", this.tabActivate);
 44 |   this.attachWorker = this.attachWorker.bind(this);
 45 |   this.tab.on("ready", this.attachWorker);
 46 |   this.proxyChannel = makeSocketProxy(this.urls.hub, this.urls.blank);
 47 |   this.proxyChannel.onmessage = (function (data) {
 48 |     console.log('got message', JSON.stringify(data).substr(0, 40));
 49 |     if (data.rtcOffer) {
 50 |       this.processRtcOffer(data.rtcOffer);
 51 |     }
 52 |     if (data.rtcAnswer) {
 53 |       this.processRtcAnswer(data.rtcAnswer);
 54 |     }
 55 |     if (data.clientId) {
 56 |       var user = this.users.get(data.clientId);
 57 |       user.processCommand(data);
 58 |     }
 59 |     if (data.chatMessage) {
 60 |       this.addChat(data.chatMessage, data.local, data.messageId);
 61 |     }
 62 |     if (data.youAreVerified) {
 63 |       this.loginStatus = data.youAreVerified;
 64 |       this.showLoginStatus();
 65 |     }
 66 |     if (this.workerChannel) {
 67 |       this.workerChannel.send(data);
 68 |     } else {
 69 |       console.warn("Got message with no worker attached");
 70 |     }
 71 |   }).bind(this);
 72 |   this.loginStatus = null;
 73 |   this.attachWorker();
 74 |   this.pollForBack();
 75 |   this.users = new Users(null);
 76 | }
 77 | 
 78 | Sharer.prototype = {
 79 | 
 80 |   destroy: function () {
 81 |     this.worker.destroy();
 82 |     this.worker = null;
 83 |     this.sidebar.destroy();
 84 |     this.sidebar = null;
 85 |     if (this.socketProxier) {
 86 |       this.socketProxier.destroy();
 87 |       this.socketProxier = null;
 88 |     }
 89 |     if (this.proxyChannel) {
 90 |       this.proxyChannel.close();
 91 |     }
 92 |     tabs.removeListener("activate", this.tabActivate);
 93 |     this.tab.removeListener("ready", this.attachWorker);
 94 |     this.users.destroy();
 95 |   },
 96 | 
 97 |   onclose: function () {
 98 |     this.proxyChannel.send({chatMessage: "Bye!", bye: true});
 99 |     if (this._onclose) {
100 |       this._onclose();
101 |     }
102 |   },
103 | 
104 |   pollForBack: function () {
105 |     // FIXME: this is a hack for the tab ready event not firing when you hit "back"
106 |     setInterval((function () {
107 |       if (this.tab.url != this.expectedAttachedUrl) {
108 |         console.log("Got a tab refresh, possibly because of a Back button");
109 |         this.attachWorker();
110 |       }
111 |     }).bind(this), 100);
112 |   },
113 | 
114 |   attachWorker: function () {
115 |     if (this.worker) {
116 |       console.log('Destroying worker:', this.worker.description);
117 |       try {
118 |         this.workerChannel.close();
119 |       } catch (e) {
120 |         // This frequently fails because of a defunct worker, but we don't care.
121 |       }
122 |       this.worker.destroy();
123 |       this.worker = null;
124 |     }
125 |     this.expectedAttachedUrl = this.tab.url;
126 |     this.worker = this.tab.attach({
127 |       contentScriptFile: [
128 |         data.url("logging.js"),
129 |         data.url("channels.js"),
130 |         data.url("rtc.js"),
131 |         data.url("freeze.js"),
132 |         data.url("domutils.js"),
133 |         data.url("master.js"),
134 |         data.url("share-worker.js")
135 |       ]
136 |     });
137 |     this.worker.description = 'Mirror worker for: ' + this.tab.url;
138 |     console.log('Created worker for:', this.worker.description);
139 |     //this.socketProxier.bindWorker(this.worker);
140 |     //this.worker.port.on("LocalMessage", this.processLocalMessage.bind(this));
141 |     this.worker.port.on("LocalMessage", function (msg) {
142 |       console.warn("Should not send message:", msg);
143 |     });
144 |     // FIXME: these aren't necessary anymore, I could watch directly in onmessage:
145 |     this.worker.port.on("RTC", this.acceptRTC.bind(this));
146 |     this.worker.port.on("SupportsWebRTC", this.supportsWebRTC.bind(this));
147 |     console.log('starty');
148 |     this.workerChannel = new PortChannel(this.worker.port);
149 |     console.log('starty2');
150 |     this.workerChannel.onmessage = (function (data) {
151 |       console.log('got outgoing data', JSON.stringify(data).substr(0, 40));
152 |       this.proxyChannel.send(data);
153 |     }).bind(this);
154 |     console.log('initiated', this.workerChannel.toString());
155 |     this.worker.port.emit("StartShare", this.urls.hub, this.urls.share);
156 |   },
157 | 
158 |   bindChatEvents: function () {
159 |     var doc = this.sidebar.window().document;
160 |     /*
161 |     var highlightButton = doc.getElementById('jsmirror-highlight');
162 |     if (highlightButton) {
163 |       highlightButton.addEventListener('click', (function () {
164 |         this.worker.port.emit("Highlight");
165 |         highlightButton.style.backgroundColor = '#f00';
166 |         highlightButton.style.color = '#fff';
167 |       }).bind(this), false);
168 |     }*/
169 |     var chatInput = doc.getElementById('jsmirror-input');
170 |     chatInput.addEventListener('keypress', (function (event) {
171 |       if (event.keyCode == 13) { // Enter
172 |         var message = chatInput.value;
173 |         this.addChat(message, true);
174 |         this.proxyChannel.send({chatMessage: message});
175 |         chatInput.value = '';
176 |       }
177 |     }).bind(this), false);
178 |     var shareUrl = doc.getElementById('jsmirror-share-url');
179 |     shareUrl.href = this.urls.share;
180 |     var shareField = doc.getElementById('jsmirror-share-field');
181 |     shareField.value = this.urls.share;
182 |     shareField.addEventListener("change", (function () {
183 |       shareField.value = this.urls.share;
184 |     }).bind(this), false);
185 |     var shareText = doc.getElementById('jsmirror-share-text');
186 |     shareUrl.addEventListener('click', (function (event) {
187 |       event.preventDefault();
188 |       event.stopPropagation();
189 |       shareUrl.style.display = 'none';
190 |       shareField.style.display = '';
191 |       shareText.style.display = '';
192 |       shareField.focus();
193 |       shareField.select();
194 |       clipboard.set(this.urls.share, 'text');
195 |     }).bind(this), false);
196 |     shareField.addEventListener('blur', function () {
197 |       shareField.style.display = 'none';
198 |       shareText.style.display = 'none';
199 |       shareUrl.style.display = '';
200 |     }, false);
201 |     shareText.addEventListener('click', function (event) {
202 |       // We don't want clicking the label to cause a blur
203 |       // FIXME: doesn't work, I guess the blur happens first
204 |       shareField.focus();
205 |       shareField.select();
206 |       event.preventDefault();
207 |       event.stopPropagation();
208 |     }, false);
209 |     var loginStatus = doc.getElementById('login-status');
210 |     loginStatus.addEventListener('click', (function (event) {
211 |       event.preventDefault();
212 |       event.stopPropagation();
213 |       this.getLoginIframe().getChannel().send({logout: true});
214 |       this.loginStatus = null;
215 |       this.showLoginStatus();
216 |     }).bind(this), false);
217 |     var usersEl = doc.getElementById('user-list');
218 |     this.users.setContainer(usersEl);
219 |     this.getLoginIframe().getChannel().onmessage = (function (data) {
220 |       if (data.assertion) {
221 |         this.proxyChannel.send({
222 |           verifyEmail: {
223 |             assertion: data.assertion,
224 |             audience: data.audience
225 |           }
226 |         });
227 |       }
228 |       if (data.logout) {
229 |         this.loginStatus = null;
230 |         this.showLoginStatus();
231 |       }
232 |     }).bind(this);
233 |     this.showLoginStatus();
234 |   },
235 | 
236 |   processLocalMessage: function (message) {
237 |     if (message.chatMessage) {
238 |       this.addChat(message.chatMessage, message.local, message.messageId);
239 |     } else if (message.arrowUpdate) {
240 |       // FIXME: do this
241 |     } else if (message.connected) {
242 |       var doc = this.sidebar.window().document;
243 |       var id = "browsermirror-bye-" + message.connected;
244 |       var el = doc.getElementById(id);
245 |       if (el) {
246 |         el.innerHTML = "";
247 |         el.appendChild(doc.createTextNode("Reconnected"));
248 |       }
249 |     } else {
250 |       console.warn("Got unexpected local message:", JSON.stringify(message));
251 |     }
252 |   },
253 | 
254 |   addChat: function (message, here, messageId) {
255 |     var doc = this.sidebar.window().document;
256 |     var el = doc.createElement('div');
257 |     if (messageId) {
258 |       el.id = messageId;
259 |     }
260 |     var prevEl = doc.getElementById(messageId);
261 |     if (prevEl) {
262 |       prevEl.parentNode.removeChild(prevEl);
263 |     }
264 |     el.className = 'chat-message';
265 |     if (here) {
266 |       el.className += ' chat-local';
267 |     } else {
268 |       el.className += ' chat-remote';
269 |     }
270 |     el.appendChild(doc.createTextNode(message));
271 |     var container = doc.getElementById('jsmirror-chat');
272 |     container.appendChild(el);
273 |   },
274 | 
275 |   tabActivate: function () {
276 |     // FIXME: this isn't quite right, since it's just whether a share
277 |     // is active in the current window, not anywhere, but the button
278 |     // is effectively global
279 |     /*
280 |     if (tabs.activeTab != this.tab) {
281 |       sharer.port.emit("ShareOff");
282 |     } else {
283 |       sharer.port.emit("ShareOn");
284 |     }*/
285 |   },
286 | 
287 |   acceptRTC: function (data) {
288 |     var iframe = this.getChatIframe();
289 |     console.log('sending message', data, iframe.channel.toString());
290 |     iframe.channel.send(data);
291 |   },
292 | 
293 |   supportsWebRTC: function () {
294 |     var doc = this.sidebar.window().document;
295 |     doc.getElementById('audio-chat-container').style.display = '';
296 |     var chatEl = doc.getElementById('audio-chat');
297 |     chatEl.addEventListener('click', (function () {
298 |       chatEl.innerHTML = 'chat request sent';
299 |       this.getChatIframe().send({wantOffer: true});
300 | 
301 |     }).bind(this), false);
302 |   },
303 | 
304 |   getChatIframe: function () {
305 |     if (! this._chatIframe) {
306 |       var doc = this.sidebar.window().document;
307 |       // FIXME: this is probably too early to reveal the iframe:
308 |       doc.getElementById('audio-container').style.display = '';
309 |       console.log('opening iframe', this.urls.audioIframe);
310 |       this._chatIframe = new ChatIframe(
311 |         doc.getElementById('audio-iframe'), doc, this.urls.audioIframe,
312 |         this.proxyChannel);
313 |     }
314 |     return this._chatIframe;
315 |   },
316 | 
317 |   getLoginIframe: function () {
318 |     if (! this._loginIframe) {
319 |       var doc = this.sidebar.window().document;
320 |       var el = doc.getElementById('login-button-container');
321 |       this._loginIframe = new LoginButton(
322 |         el, doc, this.urls.loginIframe);
323 |     }
324 |     return this._loginIframe;
325 |   },
326 | 
327 |   showLoginStatus: function () {
328 |     var iframe = this.getLoginIframe();
329 |     var doc = this.sidebar.window().document;
330 |     var loginStatusContainer = doc.getElementById('login-status-container');
331 |     var loginStatusEl = doc.getElementById('login-status');
332 |     if (this.loginStatus) {
333 |       iframe.hide();
334 |       loginStatusContainer.style.display = '';
335 |       loginStatusEl.innerHTML = '';
336 |       loginStatusEl.appendChild(doc.createTextNode(this.loginStatus.email));
337 |     } else {
338 |       iframe.show();
339 |       loginStatusContainer.style.display = '';
340 |       loginStatusEl.innerHTML = '-';
341 |     }
342 |   }
343 | 
344 | };
345 | 
346 | exports.Sharer = Sharer;
347 | 
348 | function ChatIframe(iframe, doc, iframeUrl, proxier) {
349 |   iframe.src = iframeUrl;
350 |   this.iframe = iframe;
351 |   this.channel = new ChromePostMessageChannel(iframe, doc);
352 |   this.proxier = proxier;
353 |   this.channel.onmessage = (function (data) {
354 |     console.log('proxying on chat message:', data);
355 |     this.proxier.send(data);
356 |   }).bind(this);
357 | }
358 | 
359 | ChatIframe.prototype = {
360 |   toString: function () {
361 |     return '[ChatIframe src: ' + this.iframe.src + ' channel: ' + this.channel + ']';
362 |   },
363 |   send: function (data) {
364 |     this.channel.send(data);
365 |   }
366 | };
367 | 
368 | function makeSocketProxy(hubUrl, blankUrl) {
369 |   var wsWorker = Page({
370 |     contentScriptFile: [
371 |       data.url("channels.js"),
372 |       data.url("wsecho.js")
373 |     ],
374 |     contentUrl: blankUrl
375 |   });
376 |   wsWorker.description = 'Socket forwarder';
377 |   wsWorker.port.emit("StartProxier", hubUrl);
378 |   var channel = new PortProxyChannel('', wsWorker);
379 |   channel.wsWorker = wsWorker;
380 |   channel.onclose = function () {
381 |     this.wsWorker.destroy();
382 |     this.wsWorker = null;
383 |   };
384 |   return channel;
385 | }
386 | 
387 | function SocketProxier(hubUrl, blankUrl) {
388 |   this.wsWorker = Page({
389 |     contentScriptFile: [
390 |       data.url("channels.js"),
391 |       data.url("wsecho.js")
392 |     ],
393 |     contentURL: blankUrl
394 |   });
395 |   this.wsWorker.description = 'Socket forwarder';
396 |   this.wsWorker.port.emit("StartProxier", hubUrl);
397 |   this.consumerWorker = null;
398 |   this._proxy = null;
399 | }
400 | 
401 | SocketProxier.prototype = {
402 |   destroy: function () {
403 |     this.wsWorker.destroy();
404 |     this.wsWorker = null;
405 |     this.closeProxy();
406 |   },
407 | 
408 |   bindWorker: function (worker) {
409 |     this.closeProxy();
410 |     this.consumerWorker = worker;
411 |     this._proxy = EchoProxy(this.consumerWorker, this.wsWorker);
412 |   },
413 | 
414 |   closeProxy: function () {
415 |     if (this._proxy) {
416 |       this._proxy.close();
417 |       this._proxy = null;
418 |     }
419 |   },
420 | 
421 |   send: function (data) {
422 |     this._proxy.send(data);
423 |   }
424 | 
425 | };
426 | 
427 | function LoginButton(containerEl, doc, loginUrl) {
428 |   this.doc = doc;
429 |   this.containerEl = containerEl;
430 |   this.loginUrl = loginUrl;
431 | }
432 | 
433 | LoginButton.prototype = {
434 |   getIframe: function () {
435 |     if (! this._iframe) {
436 |       var doc = this.containerEl.ownerDocument;
437 |       var iframe = doc.createElement('iframe');
438 |       iframe.src = this.loginUrl;
439 |       iframe.style.height = '25px';
440 |       iframe.style.width = '95px';
441 |       iframe.style.border = '0';
442 |       iframe.style.overflow = iframe.style.overflowY = 'hidden';
443 |       this.containerEl.appendChild(iframe);
444 |       this._iframe = iframe;
445 |       this.channel = new ChromePostMessageChannel(this._iframe, this.doc);
446 |     }
447 |     return this._iframe;
448 |   },
449 | 
450 |   hide: function () {
451 |     this.containerEl.display = 'none';
452 |   },
453 | 
454 |   show: function () {
455 |     this.containerEl.display = '';
456 |   },
457 | 
458 |   getChannel: function () {
459 |     if (! this.channel) {
460 |       this.getIframe();
461 |     }
462 |     return this.channel;
463 |   }
464 | };
465 | 


--------------------------------------------------------------------------------
/lib/sidebar.js:
--------------------------------------------------------------------------------
  1 | const { Cc, Ci } = require("chrome");
  2 | const { setInterval, clearTimeout } = require("timers");
  3 | const tabs = require("tabs");
  4 | const windows = require("windows");
  5 | 
  6 | // This tries to dynamically recreate the instructions from here
  7 | //   https://developer.mozilla.org/en-US/docs/Creating_a_Firefox_sidebar
  8 | // And expose toggleSidebar as described here:
  9 | //   https://developer.mozilla.org/en-US/docs/Code_snippets/Sidebar
 10 | 
 11 | var Sidebar = function (options) {
 12 |   var url = options.url;
 13 |   if (! url) {
 14 |     throw 'You must give a url option';
 15 |   }
 16 |   var title = options.title || url;
 17 |   var name = options.name || url;
 18 |   name = name.replace(/[^a-zA-Z0-9]/g, '');
 19 |   this.name = name;
 20 |   this.url = url;
 21 |   this.showForTab = options.showForTab;
 22 |   this.onClose = options.onClose;
 23 |   this.onReady = options.onReady;
 24 |   this.contentScriptFile = options.contentScriptFile;
 25 |   // FIXME: not sure if it is okay to keep a strong reference:
 26 |   this.globalWindow = getWindow();
 27 |   var doc = this.globalWindow.document;
 28 |   var container = doc.createElement('broadcasterset');
 29 |   var broadcaster = doc.createElement('broadcaster');
 30 |   container.id = name + '_container';
 31 |   container.appendChild(broadcaster);
 32 |   broadcaster.id = name;
 33 |   broadcaster.setAttribute('sidebarurl', url);
 34 |   broadcaster.setAttribute('sidebartitle', title);
 35 |   broadcaster.setAttribute('type', 'checkbox');
 36 |   broadcaster.setAttribute('group', 'sidebar');
 37 |   doc.getElementById('mainCommandSet').appendChild(container);
 38 |   if (! options.hidden) {
 39 |     this.show();
 40 |   }
 41 |   if (this.showForTab) {
 42 |     this._tabActivate = this._tabActivate.bind(this);
 43 |     tabs.on("activate", this._tabActivate);
 44 |   }
 45 |   if (this.onClose) {
 46 |     this._onClose = this._onClose.bind(this);
 47 |     var el = doc.getElementById('sidebar-header');
 48 |     var child = el.querySelector('.tabs-closebutton');
 49 |     child.addEventListener("click", this._onClose, false);
 50 |   }
 51 | };
 52 | 
 53 | Sidebar.prototype = {
 54 | 
 55 |   show: function show() {
 56 |     this.globalWindow.toggleSidebar(this.name, true);
 57 |     if (this.onReady) {
 58 |       this._pollOnReady(this.onReady);
 59 |     }
 60 |   },
 61 | 
 62 |   hide: function hide() {
 63 |     var w = this.globalWindow;
 64 |     var broadcaster = w.document.getElementById(this.name);
 65 |     if (broadcaster.getAttribute('checked') == 'true') {
 66 |       w.toggleSidebar();
 67 |     }
 68 |     // Otherwise the sidebar isn't currently showing
 69 |   },
 70 | 
 71 |   window: function window() {
 72 |     var doc = this.globalWindow.document;
 73 |     var sidebar = doc.getElementById('sidebar');
 74 |     return sidebar.contentWindow;
 75 |   },
 76 | 
 77 |   isShowing: function isShowing() {
 78 |     var doc = this.globalWindow.document;
 79 |     var el = doc.getElementById(this.name);
 80 |     return el.getAttribute('checked') == 'true';
 81 |   },
 82 | 
 83 |   _pollOnReady: function (callback) {
 84 |     // For some reason nothing else I try works
 85 |     var sidebar = this.globalWindow.document.getElementById('sidebar');
 86 |     var url = this.url;
 87 |     var id = null;
 88 |     function check() {
 89 |       if (sidebar.contentDocument.location.href == url && sidebar.contentDocument.readyState == "complete") {
 90 |         clearTimeout(id);
 91 |         id = null;
 92 |         this._addContentScripts();
 93 |         callback();
 94 |       }
 95 |     }
 96 |     id = setInterval(check.bind(this), 100);
 97 |   },
 98 | 
 99 |   _addContentScripts: function _addContentScripts() {
100 |     if (! this.contentScriptFile) {
101 |       return;
102 |     }
103 |     var cs = this.contentScriptFile;
104 |     if (typeof cs == "string") {
105 |       cs = [cs];
106 |     }
107 |     for (var i=0; i<cs.length; i++) {
108 |       var doc = this.window().document;
109 |       var el = doc.createElement('script');
110 |       el.src = cs[i];
111 |       doc.head.appendChild(el);
112 |     }
113 |   },
114 | 
115 |   _destructor: function _destructor() {
116 |     this.hide();
117 |     var doc = this.globalWindow.document;
118 |     var el = doc.getElementById(this.name + '_container');
119 |     var set = doc.getElementById('mainCommandSet');
120 |     set.removeChild(el);
121 |     if (this.showForTab) {
122 |       tabs.removeListener("activate", this._tabActivate);
123 |     }
124 |     if (this.onClose) {
125 |       var el = doc.getElementById('sidebar-header');
126 |       var child = el.querySelector('.tabs-closebutton');
127 |       child.removeEventListener("click", this._onClose, false);
128 |     }
129 |   },
130 | 
131 |   destroy: function destroy() {
132 |     this._destructor();
133 |   },
134 | 
135 |   _tabActivate: function () {
136 |     // Check if this active tab is in the same window as we are bound to
137 |     if (this.globalWindow != getWindow()) {
138 |       // Tab activity on a window besides the one we are bound to, we ignore it
139 |       return;
140 |     }
141 |     if (this.showForTab(tabs.activeTab)) {
142 |       this.show();
143 |     } else {
144 |       this.hide();
145 |     }
146 |   },
147 | 
148 |   _onClose: function (event) {
149 |     this.onClose(event);
150 |   }
151 | 
152 | };
153 | 
154 | const windowMediator = Cc['@mozilla.org/appshell/window-mediator;1'].
155 |                        getService(Ci.nsIWindowMediator);
156 | 
157 | function getWindow() {
158 |   // Roughly based on panel.js's getWindow
159 |    return windowMediator.getMostRecentWindow("navigator:browser");
160 | }
161 | 
162 | exports.Sidebar = Sidebar;
163 | 


--------------------------------------------------------------------------------
/lib/startup-panel.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Shows a panel (typically describing the addon) the first time an addon is installed.
 3 | */
 4 | 
 5 | const { Panel } = require("panel");
 6 | const ss = require("simple-storage");
 7 | const { setTimeout } = require("timers");
 8 | const { publicConstructor } = require("api-utils");
 9 | const { env } = require('api-utils/environment');
10 | const self = require("self");
11 | 
12 | // Show panel 1 second after startup:
13 | var DEFAULT_TIMEOUT = 1000;
14 | 
15 | function StartupPanel(options) {
16 |   this.name = options.name;
17 |   if (! this.name) {
18 |     throw 'You must give the panel a name';
19 |   }
20 |   options.width = options.width || 400;
21 |   options.height = options.height || 400;
22 |   // FIXME: should append this if necessary:
23 |   options.contentScript = SCRIPT;
24 |   this.options = options;
25 |   var seen = ss.storage[this.name + '-seen'];
26 |   if (env.SHOW_STARTUP_PANEL) {
27 |     // Primarily for development/testing
28 |     seen = false;
29 |   }
30 |   if (self.loadReason == "install" || self.loadReason == "enable") {
31 |     // Re-installed or re-enabled:
32 |     seen = false;
33 |   }
34 |   if (! seen) {
35 |     setTimeout(this.display.bind(this), options.startupTimeout || DEFAULT_TIMEOUT);
36 |   }
37 | };
38 | 
39 | StartupPanel.prototype = {
40 |   display: function () {
41 |     this.panel = Panel(this.options);
42 |     this.panel.on("hide", (function () {
43 |       ss.storage[this.name + '-seen'] = true;
44 |     }).bind(this));
45 |     this.panel.port.on("Close", (function () {
46 |       this.panel.hide();
47 |     }).bind(this));
48 |     this.panel.show();
49 |   }
50 | };
51 | 
52 | var SCRIPT = [
53 | 'window.addEventListener("load", function () {',
54 | '  var el = document.getElementById("close");',
55 | '  if (! el) {',
56 | '    el = document.createElement("A");',
57 | '    el.innerHTML = "&times;";',
58 | '    el.href = "#";',
59 | '    el.setAttribute("style", "position: absolute; font-weight: bold; top: 2px; right: 6px; text-decoration: none; color: #000;");',
60 | '    document.body.appendChild(el);',
61 | '  }',
62 | '  el.addEventListener("click", function () {',
63 | '    self.port.emit("Close");',
64 | '  }, false);',
65 | '}, false);'
66 | ].join("\n");
67 | 
68 | exports.StartupPanel = publicConstructor(StartupPanel);
69 | 


--------------------------------------------------------------------------------
/lib/user.js:
--------------------------------------------------------------------------------
1 | ../data/user.js


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "browsermirror",
 3 |     "license": "MPL 1.1/GPL 2.0/LGPL 2.1",
 4 |     "author": "Ian Bicking <ianb@mozilla.com>",
 5 |     "version": "0.1",
 6 |     "fullName": "Browser Mirror",
 7 |     "id": "jid1-TppibpBYlnPBrQ",
 8 |     "description": "Browser session sharing",
 9 |     "preferences": [{
10 |       "name": "server",
11 |       "title": "Echo/Server URL",
12 |       "description": "This is where to find the server for echoing messages",
13 |       "type": "string",
14 |       "value": "https://browsermirror.ianbicking.org"
15 |     },
16 |     {
17 |       "name": "stickyShareId",
18 |       "title": "Sticky share ID",
19 |       "description": "For testing, you can force your shared session to always be at the same URL.  Enter a value like email@example.com",
20 |       "type": "string",
21 |       "value": ""
22 |     }]
23 | }
24 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
  1 | var WebSocketServer = require('websocket').server;
  2 | var WebSocketRouter = require('websocket').router;
  3 | var http = require('http');
  4 | var https = require('https');
  5 | var static = require('node-static');
  6 | var parseUrl = require('url').parse;
  7 | var fs = require('fs');
  8 | 
  9 | // FIXME: this is a terrible way to override the mimetype:
 10 | var mime = require('./node_modules/node-static/lib/node-static/mime.js');
 11 | mime.contentTypes['xpi'] = 'application/x-xpinstall';
 12 | 
 13 | var dataRoot = new static.Server(__dirname + '/data', {cache: 7200});
 14 | var siteRoot = new static.Server(__dirname + '/site', {cache: 7200});
 15 | 
 16 | var server = http.createServer(function(request, response) {
 17 |   var url = parseUrl(request.url);
 18 |   var filename = null;
 19 |   var app = null;
 20 |   if (url.pathname == '/') {
 21 |     filename = 'homepage.html';
 22 |     app = siteRoot;
 23 |   } else if (url.pathname.indexOf('/data/') == 0) {
 24 |     filename = url.pathname.substr('/data/'.length);
 25 |     app = dataRoot;
 26 |   } else if (url.pathname.indexOf('/static/') == 0) {
 27 |     filename = url.pathname.substr('/static/'.length);
 28 |     app = siteRoot;
 29 |   } else if (url.pathname.search(/^\/[^\/]+\/?$/) == 0) {
 30 |     filename = '/view.html';
 31 |     app = siteRoot;
 32 |   }
 33 |   if (filename) {
 34 |     // FIXME: doesn't handle 404s (stops entire server):
 35 |     var fullPath = app.resolve(filename);
 36 |     fs.exists(fullPath, function (exists) {
 37 |       if (! exists) {
 38 |         write404(response);
 39 |       } else {
 40 |         app.serveFile(filename, 200, {}, request, response);
 41 |       }
 42 |     });
 43 |     return;
 44 |   }
 45 |   console.log((new Date()) + ' Received request for ' + request.url);
 46 |   write404(response);
 47 | });
 48 | 
 49 | function write404(response) {
 50 |   response.writeHead(404);
 51 |   response.end();
 52 | }
 53 | 
 54 | function startServer(port) {
 55 |   server.listen(port, '0.0.0.0', function() {
 56 |     console.log((new Date()) + ' Server is listening on port ' + port);
 57 |   });
 58 | }
 59 | 
 60 | var wsServer = new WebSocketServer({
 61 |     httpServer: server,
 62 |     // 10Mb max size (1Mb is default, maybe unnecessary)
 63 |     maxReceivedMessageSize: 0x1000000,
 64 |     // The browser doesn't seem to break things up into frames (not sure what this means)
 65 |     // and the default of 64Kb was exceeded; raised to 1Mb
 66 |     maxReceivedFrameSize: 0x100000,
 67 |     // Using autoaccept because the origin is somewhat dynamic
 68 |     // (but maybe is not anymore)
 69 |     // FIXME: make this fixed
 70 |     autoAcceptConnections: false
 71 | });
 72 | 
 73 | function originIsAllowed(origin) {
 74 |   // Unfortunately the origin will be whatever page you are sharing, which is
 75 |   // any possible origin.
 76 |   console.log('got origin', origin);
 77 |   return true;
 78 | }
 79 | 
 80 | var allConnections = {};
 81 | var verifiedClientIds = {};
 82 | 
 83 | var ID = 0;
 84 | 
 85 | wsServer.on('request', function(request) {
 86 |   if (!originIsAllowed(request.origin)) {
 87 |     // Make sure we only accept requests from an allowed origin
 88 |     request.reject();
 89 |     console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
 90 |     return;
 91 |   }
 92 | 
 93 |   var id = request.httpRequest.url.replace(/^\/hub\/+/, '').replace(/\/.*/, '');
 94 | 
 95 |   // FIXME: we should use a protocol here instead of null, but I can't get it to work
 96 |   var connection = request.accept(null, request.origin);
 97 |   connection.ID = ID++;
 98 |   if (! allConnections[id]) {
 99 |     allConnections[id] = [];
100 |   }
101 |   allConnections[id].push(connection);
102 |   console.log((new Date()) + ' Connection accepted to ' + JSON.stringify(id) + ' ID:' + connection.ID);
103 |   connection.on('message', function(message) {
104 |     var parsed = JSON.parse(message.utf8Data);
105 |     if (parsed.verifyEmail) {
106 |       // FIXME: move this into a function
107 |       var result = '';
108 |       console.log('Sending verification');
109 |       var body = "assertion=" + encodeURIComponent(parsed.verifyEmail.assertion) +
110 |                  "&audience=" + encodeURIComponent(parsed.verifyEmail.audience);
111 |       var httpReq = https.request({
112 |         hostname: "verifier.login.persona.org",
113 |         path: "/verify",
114 |         method: "POST",
115 |         headers: {
116 |           "Content-Length": body.length,
117 |           "Content-Type": "application/x-www-form-urlencoded"
118 |         }
119 |       }, function (resp) {
120 |         resp.setEncoding("utf8");
121 |         resp.on("data", function (chunk) {
122 |           result += chunk;
123 |         });
124 |         resp.on("end", function () {
125 |           console.log('end on', result);
126 |           try {
127 |             result = JSON.parse(result);
128 |           } catch (e) {
129 |             result = {status: "error", message: "Internal: " + e};
130 |           }
131 |           var verified = {clientVerified: result, clientId: parsed.clientId};
132 |           verified = JSON.stringify(verified);
133 |           if (result.status == "okay") {
134 |             verifiedClientIds[parsed.verifyEmail.clientId] = result;
135 |             for (var i=0; i<allConnections[id].length; i++) {
136 |               var c = allConnections[id][i];
137 |               if (c == connection) {
138 |                 continue;
139 |               }
140 |               c.sendUTF(verified);
141 |             }
142 |             console.log('sending back', JSON.stringify({youAreVerified: result}));
143 |             connection.sendUTF(JSON.stringify({youAreVerified: result}));
144 |           } else {
145 |             connection.sendUTF(JSON.stringify({youAreVerified: result}));
146 |           }
147 |         });
148 |       });
149 |       // FIXME: this should not trust the audience
150 |       httpReq.write(body);
151 |       httpReq.end();
152 |       return;
153 |     }
154 |     if (parsed.clientVerified || parsed.youAreVerified) {
155 |       console.warn("Client attempted to claim it was verified:\n  " + message);
156 |       return;
157 |     }
158 |     console.log('Message on ' + id + ' bytes: '
159 |                 + (message.utf8Data && message.utf8Data.length)
160 |                 + ' conn ID: ' + connection.ID + ' data:' + message.utf8Data.substr(0, 20));
161 |     for (var i=0; i<allConnections[id].length; i++) {
162 |       var c = allConnections[id][i];
163 |       if (c == connection) {
164 |         continue;
165 |       }
166 |       if (message.type === 'utf8') {
167 |         c.sendUTF(message.utf8Data);
168 |       } else if (message.type === 'binary') {
169 |         c.sendBytes(message.binaryData);
170 |       }
171 |     }
172 |   });
173 |   connection.on('close', function(reasonCode, description) {
174 |     var index = allConnections[id].indexOf(connection);
175 |     if (index != -1) {
176 |       allConnections[id].splice(index, 1);
177 |     }
178 |     console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected, ID: ' + connection.ID);
179 |   });
180 | });
181 | 
182 | if (require.main == module) {
183 |   startServer(8080);
184 | }
185 | 
186 | exports.startServer = startServer;
187 | 


--------------------------------------------------------------------------------
/site/blank.html:
--------------------------------------------------------------------------------
1 | <html></html>
2 | 


--------------------------------------------------------------------------------
/site/bootstrap/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/browsermirror/f26a645a48975382ea8bfcda7cf010f920032f05/site/bootstrap/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/site/bootstrap/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/browsermirror/f26a645a48975382ea8bfcda7cf010f920032f05/site/bootstrap/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/site/bootstrap/js/bootstrap.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Bootstrap.js by @fat & @mdo
3 | * plugins: bootstrap-transition.js, bootstrap-modal.js, bootstrap-dropdown.js, bootstrap-scrollspy.js, bootstrap-tab.js, bootstrap-tooltip.js, bootstrap-popover.js, bootstrap-alert.js, bootstrap-button.js, bootstrap-collapse.js, bootstrap-carousel.js, bootstrap-typeahead.js
4 | * Copyright 2012 Twitter, Inc.
5 | * http://www.apache.org/licenses/LICENSE-2.0.txt
6 | */
7 | !function(a){a(function(){a.support.transition=function(){var a=function(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},c;for(c in b)if(a.style[c]!==undefined)return b[c]}();return a&&{end:a}}()})}(window.jQuery),!function(a){function c(){var b=this,c=setTimeout(function(){b.$element.off(a.support.transition.end),d.call(b)},500);this.$element.one(a.support.transition.end,function(){clearTimeout(c),d.call(b)})}function d(a){this.$element.hide().trigger("hidden"),e.call(this)}function e(b){var c=this,d=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var e=a.support.transition&&d;this.$backdrop=a('<div class="modal-backdrop '+d+'" />').appendTo(document.body),this.options.backdrop!="static"&&this.$backdrop.click(a.proxy(this.hide,this)),e&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),e?this.$backdrop.one(a.support.transition.end,b):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,a.proxy(f,this)):f.call(this)):b&&b()}function f(){this.$backdrop.remove(),this.$backdrop=null}function g(){var b=this;this.isShown&&this.options.keyboard?a(document).on("keyup.dismiss.modal",function(a){a.which==27&&b.hide()}):this.isShown||a(document).off("keyup.dismiss.modal")}var b=function(b,c){this.options=c,this.$element=a(b).delegate('[data-dismiss="modal"]',"click.dismiss.modal",a.proxy(this.hide,this))};b.prototype={constructor:b,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var b=this,c=a.Event("show");this.$element.trigger(c);if(this.isShown||c.isDefaultPrevented())return;a("body").addClass("modal-open"),this.isShown=!0,g.call(this),e.call(this,function(){var c=a.support.transition&&b.$element.hasClass("fade");b.$element.parent().length||b.$element.appendTo(document.body),b.$element.show(),c&&b.$element[0].offsetWidth,b.$element.addClass("in"),c?b.$element.one(a.support.transition.end,function(){b.$element.trigger("shown")}):b.$element.trigger("shown")})},hide:function(b){b&&b.preventDefault();var e=this;b=a.Event("hide"),this.$element.trigger(b);if(!this.isShown||b.isDefaultPrevented())return;this.isShown=!1,a("body").removeClass("modal-open"),g.call(this),this.$element.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?c.call(this):d.call(this)}},a.fn.modal=function(c){return this.each(function(){var d=a(this),e=d.data("modal"),f=a.extend({},a.fn.modal.defaults,d.data(),typeof c=="object"&&c);e||d.data("modal",e=new b(this,f)),typeof c=="string"?e[c]():f.show&&e.show()})},a.fn.modal.defaults={backdrop:!0,keyboard:!0,show:!0},a.fn.modal.Constructor=b,a(function(){a("body").on("click.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({},e.data(),c.data());b.preventDefault(),e.modal(f)})})}(window.jQuery),!function(a){function d(){a(b).parent().removeClass("open")}var b='[data-toggle="dropdown"]',c=function(b){var c=a(b).on("click.dropdown.data-api",this.toggle);a("html").on("click.dropdown.data-api",function(){c.parent().removeClass("open")})};c.prototype={constructor:c,toggle:function(b){var c=a(this),e,f,g;if(c.is(".disabled, :disabled"))return;return f=c.attr("data-target"),f||(f=c.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,"")),e=a(f),e.length||(e=c.parent()),g=e.hasClass("open"),d(),g||e.toggleClass("open"),!1}},a.fn.dropdown=function(b){return this.each(function(){var d=a(this),e=d.data("dropdown");e||d.data("dropdown",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.dropdown.Constructor=c,a(function(){a("html").on("click.dropdown.data-api",d),a("body").on("click.dropdown",".dropdown form",function(a){a.stopPropagation()}).on("click.dropdown.data-api",b,c.prototype.toggle)})}(window.jQuery),!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var b=a(this),c=b.data("target")||b.attr("href"),d=/^#\w/.test(c)&&a(c);return d&&c.length&&[[d.position().top,c]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu")&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}},a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a(function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery),!function(a){var b=function(b){this.element=a(b)};b.prototype={constructor:b,show:function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.attr("data-target"),e,f,g;d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,""));if(b.parent("li").hasClass("active"))return;e=c.find(".active a").last()[0],g=a.Event("show",{relatedTarget:e}),b.trigger(g);if(g.isDefaultPrevented())return;f=a(d),this.activate(b.parent("li"),c),this.activate(f,f.parent(),function(){b.trigger({type:"shown",relatedTarget:e})})},activate:function(b,c,d){function g(){e.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),f?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var e=c.find("> .active"),f=d&&a.support.transition&&e.hasClass("fade");f?e.one(a.support.transition.end,g):g(),e.removeClass("in")}},a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("tab");e||d.data("tab",e=new b(this)),typeof c=="string"&&e[c]()})},a.fn.tab.Constructor=b,a(function(){a("body").on("click.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})})}(window.jQuery),!function(a){var b=function(a,b){this.init("tooltip",a,b)};b.prototype={constructor:b,init:function(b,c,d){var e,f;this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.enabled=!0,this.options.trigger!="manual"&&(e=this.options.trigger=="hover"?"mouseenter":"focus",f=this.options.trigger=="hover"?"mouseleave":"blur",this.$element.on(e,this.options.selector,a.proxy(this.enter,this)),this.$element.on(f,this.options.selector,a.proxy(this.leave,this))),this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},getOptions:function(b){return b=a.extend({},a.fn[this.type].defaults,b,this.$element.data()),b.delay&&typeof b.delay=="number"&&(b.delay={show:b.delay,hide:b.delay}),b},enter:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);if(!c.options.delay||!c.options.delay.show)return c.show();clearTimeout(this.timeout),c.hoverState="in",this.timeout=setTimeout(function(){c.hoverState=="in"&&c.show()},c.options.delay.show)},leave:function(b){var c=a(b.currentTarget)[this.type](this._options).data(this.type);this.timeout&&clearTimeout(this.timeout);if(!c.options.delay||!c.options.delay.hide)return c.hide();c.hoverState="out",this.timeout=setTimeout(function(){c.hoverState=="out"&&c.hide()},c.options.delay.hide)},show:function(){var a,b,c,d,e,f,g;if(this.hasContent()&&this.enabled){a=this.tip(),this.setContent(),this.options.animation&&a.addClass("fade"),f=typeof this.options.placement=="function"?this.options.placement.call(this,a[0],this.$element[0]):this.options.placement,b=/in/.test(f),a.remove().css({top:0,left:0,display:"block"}).appendTo(b?this.$element:document.body),c=this.getPosition(b),d=a[0].offsetWidth,e=a[0].offsetHeight;switch(b?f.split(" ")[1]:f){case"bottom":g={top:c.top+c.height,left:c.left+c.width/2-d/2};break;case"top":g={top:c.top-e,left:c.left+c.width/2-d/2};break;case"left":g={top:c.top+c.height/2-e/2,left:c.left-d};break;case"right":g={top:c.top+c.height/2-e/2,left:c.left+c.width}}a.css(g).addClass(f).addClass("in")}},isHTML:function(a){return typeof a!="string"||a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3||/^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(a)},setContent:function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.isHTML(b)?"html":"text"](b),a.removeClass("fade in top bottom left right")},hide:function(){function d(){var b=setTimeout(function(){c.off(a.support.transition.end).remove()},500);c.one(a.support.transition.end,function(){clearTimeout(b),c.remove()})}var b=this,c=this.tip();c.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d():c.remove()},fixTitle:function(){var a=this.$element;(a.attr("title")||typeof a.attr("data-original-title")!="string")&&a.attr("data-original-title",a.attr("title")||"").removeAttr("title")},hasContent:function(){return this.getTitle()},getPosition:function(b){return a.extend({},b?{top:0,left:0}:this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight})},getTitle:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||(typeof c.title=="function"?c.title.call(b[0]):c.title),a},tip:function(){return this.$tip=this.$tip||a(this.options.template)},validate:function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},enable:function(){this.enabled=!0},disable:function(){this.enabled=!1},toggleEnabled:function(){this.enabled=!this.enabled},toggle:function(){this[this.tip().hasClass("in")?"hide":"show"]()}},a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("tooltip"),f=typeof c=="object"&&c;e||d.data("tooltip",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.defaults={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover",title:"",delay:0}}(window.jQuery),!function(a){var b=function(a,b){this.init("popover",a,b)};b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype,{constructor:b,setContent:function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.isHTML(b)?"html":"text"](b),a.find(".popover-content > *")[this.isHTML(c)?"html":"text"](c),a.removeClass("fade top bottom left right in")},hasContent:function(){return this.getTitle()||this.getContent()},getContent:function(){var a,b=this.$element,c=this.options;return a=b.attr("data-content")||(typeof c.content=="function"?c.content.call(b[0]):c.content),a},tip:function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip}}),a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("popover"),f=typeof c=="object"&&c;e||d.data("popover",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.defaults=a.extend({},a.fn.tooltip.defaults,{placement:"right",content:"",template:'<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'})}(window.jQuery),!function(a){var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function f(){e.trigger("closed").remove()}var c=a(this),d=c.attr("data-target"),e;d||(d=c.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),e=a(d),b&&b.preventDefault(),e.length||(e=c.hasClass("alert")?c:c.parent()),e.trigger(b=a.Event("close"));if(b.isDefaultPrevented())return;e.removeClass("in"),a.support.transition&&e.hasClass("fade")?e.on(a.support.transition.end,f):f()},a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("alert");e||d.data("alert",e=new c(this)),typeof b=="string"&&e[b].call(d)})},a.fn.alert.Constructor=c,a(function(){a("body").on("click.alert.data-api",b,c.prototype.close)})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.button.defaults,c)};b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.data(),e=c.is("input")?"val":"html";a+="Text",d.resetText||c.data("resetText",c[e]()),c[e](d[a]||this.options[a]),setTimeout(function(){a=="loadingText"?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.parent('[data-toggle="buttons-radio"]');a&&a.find(".active").removeClass("active"),this.$element.toggleClass("active")},a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("button"),f=typeof c=="object"&&c;e||d.data("button",e=new b(this,f)),c=="toggle"?e.toggle():c&&e.setState(c)})},a.fn.button.defaults={loadingText:"loading..."},a.fn.button.Constructor=b,a(function(){a("body").on("click.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle")})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.collapse.defaults,c),this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.prototype={constructor:b,dimension:function(){var a=this.$element.hasClass("width");return a?"width":"height"},show:function(){var b,c,d,e;if(this.transitioning)return;b=this.dimension(),c=a.camelCase(["scroll",b].join("-")),d=this.$parent&&this.$parent.find("> .accordion-group > .in");if(d&&d.length){e=d.data("collapse");if(e&&e.transitioning)return;d.collapse("hide"),e||d.data("collapse",null)}this.$element[b](0),this.transition("addClass",a.Event("show"),"shown"),this.$element[b](this.$element[0][c])},hide:function(){var b;if(this.transitioning)return;b=this.dimension(),this.reset(this.$element[b]()),this.transition("removeClass",a.Event("hide"),"hidden"),this.$element[b](0)},reset:function(a){var b=this.dimension();return this.$element.removeClass("collapse")[b](a||"auto")[0].offsetWidth,this.$element[a!==null?"addClass":"removeClass"]("collapse"),this},transition:function(b,c,d){var e=this,f=function(){c.type=="show"&&e.reset(),e.transitioning=0,e.$element.trigger(d)};this.$element.trigger(c);if(c.isDefaultPrevented())return;this.transitioning=1,this.$element[b]("in"),a.support.transition&&this.$element.hasClass("collapse")?this.$element.one(a.support.transition.end,f):f()},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}},a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("collapse"),f=typeof c=="object"&&c;e||d.data("collapse",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.collapse.defaults={toggle:!0},a.fn.collapse.Constructor=b,a(function(){a("body").on("click.collapse.data-api","[data-toggle=collapse]",function(b){var c=a(this),d,e=c.attr("data-target")||b.preventDefault()||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""),f=a(e).data("collapse")?"toggle":c.data();a(e).collapse(f)})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=c,this.options.slide&&this.slide(this.options.slide),this.options.pause=="hover"&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.prototype={cycle:function(b){return b||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},to:function(b){var c=this.$element.find(".active"),d=c.parent().children(),e=d.index(c),f=this;if(b>d.length-1||b<0)return;return this.sliding?this.$element.one("slid",function(){f.to(b)}):e==b?this.pause().cycle():this.slide(b>e?"next":"prev",a(d[b]))},pause:function(a){return a||(this.paused=!0),clearInterval(this.interval),this.interval=null,this},next:function(){if(this.sliding)return;return this.slide("next")},prev:function(){if(this.sliding)return;return this.slide("prev")},slide:function(b,c){var d=this.$element.find(".active"),e=c||d[b](),f=this.interval,g=b=="next"?"left":"right",h=b=="next"?"first":"last",i=this,j=a.Event("slide");this.sliding=!0,f&&this.pause(),e=e.length?e:this.$element.find(".item")[h]();if(e.hasClass("active"))return;if(a.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(j);if(j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),this.$element.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)})}else{this.$element.trigger(j);if(j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}},a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("carousel"),f=a.extend({},a.fn.carousel.defaults,typeof c=="object"&&c);e||d.data("carousel",e=new b(this,f)),typeof c=="number"?e.to(c):typeof c=="string"||(c=f.slide)?e[c]():f.interval&&e.cycle()})},a.fn.carousel.defaults={interval:5e3,pause:"hover"},a.fn.carousel.Constructor=b,a(function(){a("body").on("click.carousel.data-api","[data-slide]",function(b){var c=a(this),d,e=a(c.attr("data-target")||(d=c.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,"")),f=!e.data("modal")&&a.extend({},e.data(),c.data());e.carousel(f),b.preventDefault()})})}(window.jQuery),!function(a){var b=function(b,c){this.$element=a(b),this.options=a.extend({},a.fn.typeahead.defaults,c),this.matcher=this.options.matcher||this.matcher,this.sorter=this.options.sorter||this.sorter,this.highlighter=this.options.highlighter||this.highlighter,this.updater=this.options.updater||this.updater,this.$menu=a(this.options.menu).appendTo("body"),this.source=this.options.source,this.shown=!1,this.listen()};b.prototype={constructor:b,select:function(){var a=this.$menu.find(".active").attr("data-value");return this.$element.val(this.updater(a)).change(),this.hide()},updater:function(a){return a},show:function(){var b=a.extend({},this.$element.offset(),{height:this.$element[0].offsetHeight});return this.$menu.css({top:b.top+b.height,left:b.left}),this.$menu.show(),this.shown=!0,this},hide:function(){return this.$menu.hide(),this.shown=!1,this},lookup:function(b){var c=this,d,e;return this.query=this.$element.val(),this.query?(d=a.grep(this.source,function(a){return c.matcher(a)}),d=this.sorter(d),d.length?this.render(d.slice(0,this.options.items)).show():this.shown?this.hide():this):this.shown?this.hide():this},matcher:function(a){return~a.toLowerCase().indexOf(this.query.toLowerCase())},sorter:function(a){var b=[],c=[],d=[],e;while(e=a.shift())e.toLowerCase().indexOf(this.query.toLowerCase())?~e.indexOf(this.query)?c.push(e):d.push(e):b.push(e);return b.concat(c,d)},highlighter:function(a){var b=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return a.replace(new RegExp("("+b+")","ig"),function(a,b){return"<strong>"+b+"</strong>"})},render:function(b){var c=this;return b=a(b).map(function(b,d){return b=a(c.options.item).attr("data-value",d),b.find("a").html(c.highlighter(d)),b[0]}),b.first().addClass("active"),this.$menu.html(b),this},next:function(b){var c=this.$menu.find(".active").removeClass("active"),d=c.next();d.length||(d=a(this.$menu.find("li")[0])),d.addClass("active")},prev:function(a){var b=this.$menu.find(".active").removeClass("active"),c=b.prev();c.length||(c=this.$menu.find("li").last()),c.addClass("active")},listen:function(){this.$element.on("blur",a.proxy(this.blur,this)).on("keypress",a.proxy(this.keypress,this)).on("keyup",a.proxy(this.keyup,this)),(a.browser.webkit||a.browser.msie)&&this.$element.on("keydown",a.proxy(this.keypress,this)),this.$menu.on("click",a.proxy(this.click,this)).on("mouseenter","li",a.proxy(this.mouseenter,this))},keyup:function(a){switch(a.keyCode){case 40:case 38:break;case 9:case 13:if(!this.shown)return;this.select();break;case 27:if(!this.shown)return;this.hide();break;default:this.lookup()}a.stopPropagation(),a.preventDefault()},keypress:function(a){if(!this.shown)return;switch(a.keyCode){case 9:case 13:case 27:a.preventDefault();break;case 38:if(a.type!="keydown")break;a.preventDefault(),this.prev();break;case 40:if(a.type!="keydown")break;a.preventDefault(),this.next()}a.stopPropagation()},blur:function(a){var b=this;setTimeout(function(){b.hide()},150)},click:function(a){a.stopPropagation(),a.preventDefault(),this.select()},mouseenter:function(b){this.$menu.find(".active").removeClass("active"),a(b.currentTarget).addClass("active")}},a.fn.typeahead=function(c){return this.each(function(){var d=a(this),e=d.data("typeahead"),f=typeof c=="object"&&c;e||d.data("typeahead",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.typeahead.defaults={source:[],items:8,menu:'<ul class="typeahead dropdown-menu"></ul>',item:'<li><a href="#"></a></li>'},a.fn.typeahead.Constructor=b,a(function(){a("body").on("focus.typeahead.data-api",'[data-provide="typeahead"]',function(b){var c=a(this);if(c.data("typeahead"))return;b.preventDefault(),c.typeahead(c.data())})})}(window.jQuery)


--------------------------------------------------------------------------------
/site/client.js:
--------------------------------------------------------------------------------
  1 | /* Implements the client that displays all the content.  This happens
  2 | in the view-iframe.html frame. */
  3 | 
  4 | var ELEMENT_NODE = document.ELEMENT_NODE;
  5 | var TEXT_NODE = document.TEXT_NODE;
  6 | 
  7 | function Client(channel, clientId) {
  8 |   this.clientId = clientId;
  9 |   this.channel = channel;
 10 |   this.lastHref = null;
 11 |   this._changeEvent = this._changeEvent.bind(this);
 12 |   this._catchEvent = this._catchEvent.bind(this);
 13 |   this._sendStatusInterval = setInterval(this.sendStatus.bind(this), 1000);
 14 |   window.addEventListener("unload", this.onunload.bind(this), false);
 15 |   this._catchEvents();
 16 | }
 17 | 
 18 | Client.prototype = {
 19 | 
 20 |   send: function (msg) {
 21 |     msg.clientId = this.clientId;
 22 |     this.channel.send(msg);
 23 |   },
 24 | 
 25 |   processCommand: function (command) {
 26 |     var href = command.href || (command.doc && command.doc.href);
 27 |     var docChange = false;
 28 |     if (href && this.lastHref && href != this.lastHref) {
 29 |       this.send({local: {restart: true, queueMessages: [command]}});
 30 |       this.channel.close();
 31 |       this._reloading = true;
 32 |       clearTimeout(this._sendStatusInterval);
 33 |       location.reload();
 34 |       return;
 35 |     }
 36 |     if (command.hello && command.isMaster) {
 37 |       this.updateWaiting('Connected, receiving document...');
 38 |       this.send({helloBack: true, supportsWebRTC: supportsWebRTC()});
 39 |     }
 40 |     if (command.doc) {
 41 |       docChange = true;
 42 |       this.processDoc(command.doc);
 43 |     }
 44 |     if (command.updates) {
 45 |       docChange = true;
 46 |       this.processUpdates(command.updates);
 47 |     }
 48 |     if (command.diffs) {
 49 |       docChange = true;
 50 |       this.removeRange();
 51 |       this.processDiffs(command.diffs);
 52 |       if (this.lastRange && (! command.range)) {
 53 |         this.showRange(this.lastRange);
 54 |       }
 55 |     }
 56 |     if (command.highlight) {
 57 |       var el = this.getElement(command.highlight.target);
 58 |       if (el) {
 59 |         temporaryHighlight(el, command.highlight.offsetTop, command.highlight.offsetLeft,
 60 |                            command.mode || 'remote');
 61 |       }
 62 |     }
 63 |     if (command.range && command.range.start) {
 64 |       this.processRange(command.range);
 65 |     }
 66 |     if (command.range === null) {
 67 |       this.removeRange();
 68 |       this.lastRange = null;
 69 |     }
 70 |     if (command.screen) {
 71 |       // FIXME: implement
 72 |       if (this.updateScreen) {
 73 |         this.updateScreen(command.screen);
 74 |       }
 75 |     }
 76 |     if (docChange) {
 77 |       this.processDocChange();
 78 |     }
 79 |   },
 80 | 
 81 |   processDocChange: function () {
 82 |     var title = document.title;
 83 |     if (title != this._lastTitle && this.ontitlechange) {
 84 |       this._lastTitle = title;
 85 |       this.ontitlechange(title);
 86 |     }
 87 |     var links = document.getElementsByTagName('link');
 88 |     var linkLen = links.length;
 89 |     var linkHref = null;
 90 |     for (var i=0; i<linkLen; i++) {
 91 |       if (links[i].getAttribute("rel").indexOf("icon") != -1) {
 92 |         var linkhref = links[i].href;
 93 |         break;
 94 |       }
 95 |     }
 96 |     if (linkHref != this._lastLinkHref && this.onfaviconchange) {
 97 |       this._lastLinkHref = linkHref;
 98 |       this.onfaviconchange(linkHref);
 99 |     }
100 |   },
101 | 
102 |   updateWaiting: function (message) {
103 |     var el = document.getElementById('jsmirror-waiting');
104 |     if (el) {
105 |       el.innerHTML = '';
106 |       el.appendChild(document.createTextNode(message));
107 |     }
108 |   },
109 | 
110 |   processUpdates: function (updates) {
111 |     for (var id in updates) {
112 |       if (! updates.hasOwnProperty(id)) {
113 |         continue;
114 |       }
115 |       var replaceEl = this.getElement(id);
116 |       if (! replaceEl) {
117 |         log(WARN, 'Got unknown element in update:', id);
118 |         continue;
119 |       }
120 |       this.setElement(replaceEl, updates[id]);
121 |     }
122 |   },
123 | 
124 |   processRange: function (range) {
125 |     range.start = this.getElement(command.range.start);
126 |     range.end = this.getElement(command.range.end);
127 |     this.removeRange();
128 |     if ((! range.start) || (! range.end)) {
129 |       log(WARN, 'Bad range');
130 |       return;
131 |     }
132 |     this.showRange(range);
133 |     this.lastRange = range;
134 |   },
135 | 
136 |   sendStatus: function () {
137 |     var data = {};
138 |     // FIXME: implement getRange
139 |     var range = this.getRange ? this.getRange() : null;
140 |     var rangeJson = JSON.stringify(range);
141 |     if ((range && this.sentRange && this.sentRange != rangeJson) ||
142 |         (range && ! this.sentRange) ||
143 |         ((! range) && this.sentRange)) {
144 |       data.range = range;
145 |       this.sentRange = rangeJson;
146 |     }
147 |     var screen = getScreenRange(document);
148 |     if (screen && screen.start && screen.start.jsmirrorId) {
149 |       // When the screen is rearranging the result might be incomplete
150 |       screen.start = screen.start.jsmirrorId;
151 |       screen.end = screen.end.jsmirrorId;
152 |       var screenJson = JSON.stringify(screen);
153 |       if ((! this.sentScreen) || this.sentScreen != screenJson) {
154 |         data.screen = screen;
155 |         this.sentScreen = screenJson;
156 |       }
157 |     }
158 |     if (data.screen || data.range) {
159 |       this.send(data);
160 |     }
161 |   },
162 | 
163 |   removeRange: function () {
164 |     var els = this.rangeElements;
165 |     if ((! els) || ! els.length) {
166 |       return;
167 |     }
168 |     var flatten = [];
169 |     for (var i=0; i<els.length; i++) {
170 |       var el = els[i];
171 |       if (el.artificialRangeElement) {
172 |         flatten.push(el);
173 |         continue;
174 |       }
175 |       if (el.oldBackgroundColor) {
176 |         el.style.backgroundColor = el.oldBackgroundColor;
177 |         delete el.oldBackgroundColor;
178 |       } else {
179 |         el.style.backgroundColor = null;
180 |       }
181 |     }
182 |     for (var i=0; i<flatten.length; i++) {
183 |       var el = flatten[i];
184 |       while (el.childNodes.length) {
185 |         el.parentNode.insertBefore(el.childNodes[0], el);
186 |       }
187 |       el.parentNode.remoteChild(el);
188 |     }
189 |     this.rangeElements = [];
190 |   },
191 | 
192 |   showRange: function (range) {
193 |     showRange(range, (function (el) {
194 |       if (el.nodeType == ELEMENT_NODE && ! el.jsmirrorHide) {
195 |         el.oldBackgroundColor = el.style.backgroundColor;
196 |         el.style.backgroundColor = "#ff9";
197 |         this.rangeElements.push(el);
198 |       }
199 |     }).bind(this));
200 |   },
201 | 
202 |   processDoc: function (doc) {
203 |     this._elements = {};
204 |     if (doc.href) {
205 |       this.lastHref = doc.href;
206 |     }
207 |     if (doc.htmlAttrs) {
208 |       this.setAttributes(this.getHTMLTag(), doc.htmlAttrs);
209 |     }
210 |     if (doc.head) {
211 |       this.setElement(document.head, doc.head);
212 |     }
213 |     if (doc.href) {
214 |       this.setBase(doc.href);
215 |     }
216 |     if (doc.body) {
217 |       this.setElement(document.body, doc.body);
218 |     }
219 |     if (doc.hash || doc.hash === "") {
220 |       location.hash = doc.hash;
221 |     }
222 |   },
223 | 
224 |   processDiffs: function (commands) {
225 |     for (var i=0; i<commands.length; i++) {
226 |       var command = commands[i];
227 |       var name = command[0];
228 |       var el = this.getElement(command[1]);
229 |       if (! el) {
230 |         log(WARN, 'Got diff command for element that does not exist', command);
231 |         continue;
232 |       }
233 |       if (name === 'attrs') {
234 |         this.setAttributes(el, command[2]);
235 |       }
236 |       if (name === 'deletetext-' || name === 'delete-' || name == 'delete-+') {
237 |         while (el.previousSibling && el.previousSibling.nodeType == TEXT_NODE) {
238 |           el.parentNode.removeChild(el.previousSibling);
239 |         }
240 |       }
241 |       if (name === 'delete+') {
242 |         while (el.nextSibling && el.nextSibling.nodeType == TEXT_NODE) {
243 |           el.parentNode.removeChild(el.nextSibling);
244 |         }
245 |       }
246 |       if (name === 'delete' || name === 'delete-' || name === 'delete+' || name === 'delete-+') {
247 |         el.parentNode.removeChild(el);
248 |       }
249 |       if (name === 'delete_last_text') {
250 |         if (el.childNodes.length) {
251 |           var lastEl = el.childNodes[el.childNodes.length-1];
252 |           if (lastEl.nodeType != TEXT_NODE) {
253 |             log(WARN, "Got command that deletes something that isn't text", command, lastEl);
254 |             continue;
255 |           } else {
256 |             el.removeChild(lastEl);
257 |           }
258 |         } else {
259 |           log(WARN, "Tried to delete_last_text of element with no children", command);
260 |           continue;
261 |         }
262 |       }
263 |       if (name === 'replace_text') {
264 |         if (el.childNodes.length !== 1 || el.childNodes[0].nodeType !== TEXT_NODE) {
265 |           while (el.childNodes) {
266 |             el.removeChild(el.childNodes[0]);
267 |           }
268 |           el.appendChild(document.createTextNode(command[2]));
269 |         } else {
270 |           el.childNodes[0].nodeValue = command[2];
271 |         }
272 |       }
273 |       if (name === 'insert_before') {
274 |         var pushes = command[2];
275 |         for (var j=pushes.length-1; j>=0; j--) {
276 |           var child;
277 |           if (typeof pushes[j] == 'string') {
278 |             child = document.createTextNode(pushes[j]);
279 |           } else {
280 |             child = this.deserializeElement(pushes[j]);
281 |           }
282 |           el.parentNode.insertBefore(child, el);
283 |         }
284 |       }
285 |       if (name === 'append_to') {
286 |         var pushes = command[2];
287 |         for (var j=0; j<pushes.length; j++) {
288 |           var child;
289 |           if (typeof pushes[j] == 'string') {
290 |             child = document.createTextNode(pushes[j]);
291 |           } else {
292 |             child = this.deserializeElement(pushes[j]);
293 |           }
294 |           el.appendChild(child);
295 |         }
296 |       }
297 |     }
298 |   },
299 | 
300 |   getHTMLTag: function () {
301 |     return document.documentElement;
302 |   },
303 | 
304 |   getElement: function (jsmirrorId) {
305 |     var el = this._elements[jsmirrorId] || null;
306 |     if (el) {
307 |       return el;
308 |     }
309 |     // In case _elements is incomplete...
310 |     return this._getElementInside(document.body, jsmirrorId);
311 |   },
312 | 
313 |   _getElementInside: function (el, jsmirrorId) {
314 |     if (el.jsmirrorId == jsmirrorId) {
315 |       return el;
316 |     }
317 |     var l = el.childNodes.length;
318 |     for (var i=0; i<l; i++) {
319 |       var node = el.childNodes[i];
320 |       if (node.nodeType == ELEMENT_NODE) {
321 |         var value = this._getElementInside(node, jsmirrorId);
322 |         if (value) {
323 |           return value;
324 |         }
325 |       }
326 |     }
327 |     return null;
328 |   },
329 | 
330 |   setElement: function (el, serialized) {
331 |     var tagName = serialized[0];
332 |     var jsmirrorId = serialized[1];
333 |     var attrs = serialized[2];
334 |     var children = serialized[3];
335 |     if (el.tagName != tagName) {
336 |       // Just recreate the entire element
337 |       el.parentNode.replaceChild(this.deserializeElement(serialized), el);
338 |       return;
339 |     }
340 |     this.setAttributes(el, attrs);
341 |     el.jsmirrorId = jsmirrorId;
342 |     this._elements[jsmirrorId] = el;
343 |     var offset = 0;
344 |     for (var i=0; i<children.length; i++) {
345 |       var childIndex = i + offset;
346 |       var existing = el.childNodes[childIndex];
347 |       if (! existing) {
348 |         el.appendChild(this.deserializeElement(children[i]));
349 |       } else if (existing.jsmirrorHide) {
350 |         // try this again, but ignoring this element
351 |         offset++;
352 |         i--;
353 |         continue;
354 |       } else if (typeof children[i] == "string") {
355 |         if (existing.nodeType != TEXT_NODE) {
356 |           existing.parentNode.replaceChild(document.createTextNode(children[i]), existing);
357 |         } else {
358 |           existing.nodeValue = children[i];
359 |         }
360 |       } else {
361 |         this.setElement(existing, children[i]);
362 |       }
363 |     }
364 |     while (el.childNodes.length - offset > children.length) {
365 |       var node = el.childNodes[children.length + offset];
366 |       if (node.jsmirrorHide) {
367 |         offset++;
368 |         continue;
369 |       }
370 |       el.removeChild(node);
371 |     }
372 |   },
373 | 
374 |   setAttributes: function (el, attrs) {
375 |     var attrLength = 0;
376 |     for (var i in attrs) {
377 |       if (! attrs.hasOwnProperty(i)) {
378 |         continue;
379 |       }
380 |       attrLength++;
381 |       try {
382 |         el.setAttribute(i, attrs[i]);
383 |       } catch (e) {
384 |         // Sometimes this can cause an error, like:
385 |         //   INVALID_CHARACTER_ERR: DOM Exception 5
386 |         // Usually this is an invalid upstream HTML, but so be it - nothing
387 |         // we can do about it here.
388 |         console.warn("Attribute setting error:", i, attrs[i], e);
389 |       }
390 |       if (i == 'value') {
391 |         el.value = attrs[i];
392 |       }
393 |     }
394 |     if (el.attributes.length > attrLength) {
395 |       // Something needs to be deleted
396 |       var toDelete = [];
397 |       for (i=0; i<el.attributes.length; i++) {
398 |         var name = el.attributes[i].name;
399 |         if (! attrs.hasOwnProperty(name)) {
400 |           toDelete.push(name);
401 |         }
402 |       }
403 |       for (i=0; i<toDelete.length; i++) {
404 |         el.removeAttribute(toDelete[i]);
405 |       }
406 |     }
407 |   },
408 | 
409 |   setBase: function (baseHref) {
410 |     var existing = document.getElementsByTagName('base');
411 |     for (var i=0; i<existing.length; i++) {
412 |       existing[i].parentNode.removeChild(existing[i]);
413 |     }
414 |     var base = document.createElement('base');
415 |     base.href = baseHref;
416 |     document.head.appendChild(base);
417 |   },
418 | 
419 |   _inputTags: {
420 |     INPUT: true,
421 |     TEXTAREA: true,
422 |     SELECT: true,
423 |     OPTION: true
424 |   },
425 | 
426 |   deserializeElement: function (data) {
427 |     if (typeof data == "string") {
428 |       return document.createTextNode(data);
429 |     }
430 |     var tagName = data[0];
431 |     var jsmirrorId = data[1];
432 |     var attrs = data[2];
433 |     var children = data[3];
434 |     var el;
435 |     if (tagName == '<!--COMMENT-->') {
436 |       var text = (children && children[0]) || "";
437 |       el = document.createComment(text);
438 |       el.jsmirrorId = jsmirrorId;
439 |       this._elements[jsmirrorId] = el;
440 |       return el;
441 |     }
442 |     el = document.createElement(tagName);
443 |     for (var i in attrs) {
444 |       if (attrs.hasOwnProperty(i)) {
445 |         try {
446 |           el.setAttribute(i, attrs[i]);
447 |         } catch (e) {
448 |           // Sometimes this can cause an error, like:
449 |           //   INVALID_CHARACTER_ERR: DOM Exception 5
450 |           // Usually this is an invalid upstream HTML, but so be it - nothing
451 |           // we can do about it here.
452 |           console.warn("Attribute setting error:", i, attrs[i], e);
453 |         }
454 |       }
455 |     }
456 |     for (var i=0; i<children.length; i++) {
457 |       var c = children[i];
458 |       if (typeof c == "string") {
459 |         el.appendChild(document.createTextNode(c));
460 |       } else {
461 |         el.appendChild(this.deserializeElement(c));
462 |       }
463 |     }
464 |     el.jsmirrorId = jsmirrorId;
465 |     this._elements[jsmirrorId] = el;
466 |     if (this._inputTags[tagName]) {
467 |       var eventType;
468 |       if (tagName == 'TEXTAREA' || (tagName == 'INPUT' && tagName.type && tagName.type.toLowerCase() == 'text')) {
469 |         eventType = 'keyup';
470 |       } else {
471 |         eventType = 'change';
472 |       }
473 |       el.addEventListener(eventType, this._changeEvent, false);
474 |     }
475 |     return el;
476 |   },
477 | 
478 |   serializeEvent: function (event) {
479 |     var result = {};
480 |     for (var i in event) {
481 |       var value = event[i];
482 |       if ((i.toUpperCase() == i && typeof value == 'number') ||
483 |           typeof value == 'function' ||
484 |           value === window) {
485 |         // Skip constants like CLICK, etc
486 |         continue;
487 |       }
488 |       if (value && typeof value == 'object') {
489 |         // Try to change some things to jsmirrorId's
490 |         try {
491 |           var jsmirrorId = value.jsmirrorId;
492 |           if (jsmirrorId) {
493 |             value = {jsmirrorId: jsmirrorId};
494 |           } else {
495 |             continue;
496 |           }
497 |         } catch (e) {
498 |           log(WARN, "could not get jsmirrorId", value, i, e);
499 |           continue;
500 |         }
501 |       }
502 |       result[i] = value;
503 |     }
504 |     // Some attribtues don't show up in iteration:
505 |     result.cancelable = event.cancelable;
506 |     result.canBubble = event.canBubble;
507 |     // Hack to figure out what "module" or class of events this belongs to
508 |     // (probably not portable)
509 |     var evName = event+"";
510 |     evName = evName.substr(evName.indexOf(' ')+1, evName.length-evName.indexOf(' ')-2);
511 |     result.module = evName;
512 |     return result;
513 |   },
514 | 
515 |   // Not sure, include? mousedown, mouseup, keydown, keyup?
516 |   _eventsToCatch: ['click', 'dblclick', 'keypress', 'submit'],
517 | 
518 |   _catchEvents: function () {
519 |     for (var i=0; i<this._eventsToCatch.length; i++) {
520 |       var name = this._eventsToCatch[i];
521 |       document.addEventListener(name, this._catchEvent, true);
522 |     }
523 |   },
524 | 
525 |   _catchEvent: function (event) {
526 |     if (this.inHighlighting && event.type == 'click') {
527 |       // Don't get in the way of the highligher
528 |       return false;
529 |     }
530 |     var keys = {keydown: true, keyup: true, keypress: true};
531 |     if (keys[event.type]) {
532 |       for (var i=0; i<this.IGNORE_KEYPRESSES.length; i++) {
533 |         var k = this.IGNORE_KEYPRESSES[i];
534 |         if (((!k.ctrlKey) || event.ctrlKey) &&
535 |             ((!k.shiftKey) || event.shiftKey) &&
536 |             ((!k.charCode) || k.charCode == event.charCode) &&
537 |             ((!k.keyCode) || k.keyCode == event.keyCode)) {
538 |           // There's a match
539 |           return false;
540 |         }
541 |       }
542 |     }
543 |     var serialized = this.serializeEvent(event);
544 |     console.log('sending event', serialized);
545 |     this.send({event: serialized});
546 |     var tagName = event.target.tagName;
547 |     if ((event.type == 'click' || event.type == 'keypress') &&
548 |         (tagName == 'INPUT' || tagName == 'TEXTAREA' || tagName == 'SELECT')) {
549 |       // Let the focus happen
550 |       // Also get rid of placeholder text if there is any
551 |       var placeholder = event.target.getAttribute('placeholder');
552 |       console.log('focus on el', event.target, placeholder, event.target.value);
553 |       if (placeholder && placeholder === event.target.value) {
554 |         event.target.value = '';
555 |       }
556 |       return false;
557 |     }
558 |     // Maybe should check event.cancelable; stopPropagation doesn't
559 |     // mean anything if that's not true.
560 |     event.preventDefault();
561 |     event.stopPropagation();
562 |     return true;
563 |   },
564 | 
565 |   IGNORE_KEYPRESSES: [
566 |     {ctrlKey: true, charCode: 116}, // Ctrl+T
567 |     {ctrlKey: true, charCode: 114}, // Ctrl+R
568 |     {ctrlKey: true, charCode: 119}, // Ctrl+W
569 |     {ctrlKey: true, charCode: 110}, // Ctrl+N
570 |     {ctrlKey: true, keyCode: 9}, // Ctrl+Tab
571 |     {ctrlKey: true, keyCode: 33}, // Ctrl+PgUp
572 |     {ctrlKey: true, keyCode: 34}, // Ctrl+PgDown
573 |     {ctrlKey: true, shiftKey: true, charCode: 75}, // Ctrl+Shift+K
574 |     {keyCode: 33}, // PgUp
575 |     {keyCode: 34} // pgDown
576 |   ],
577 | 
578 |   _changeEvent: function (event) {
579 |     this.send({
580 |       change: {
581 |         target: event.target.jsmirrorId,
582 |         value: event.target.value
583 |       }
584 |     });
585 |   },
586 | 
587 |   onunload: function (event) {
588 |     if (this._reloading) {
589 |       // When we are expecting to unload, it's fine and we needn't tell the parent
590 |       return;
591 |     }
592 |     this.send({local: {unload: true}});
593 |     this.channel.close();
594 |   }
595 | 
596 | };
597 | 


--------------------------------------------------------------------------------
/site/homepage.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |     margin-bottom: 1em;
 3 | }
 4 | 
 5 | h1, h2, h3 {
 6 |     border-bottom: 2px solid #000;
 7 |     margin-bottom: 0.8em;
 8 | }
 9 | 
10 | ul, ol {
11 |     margin: 1em 0 1em 2em;
12 | }
13 | 
14 | li {
15 |     margin-bottom: 1em;
16 | }
17 | 
18 | .monospace {
19 |     font-family: monospace;
20 | }
21 | 


--------------------------------------------------------------------------------
/site/homepage.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |  <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Browser Mirror</title>
  6 |   <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
  7 |   <link href="/static/homepage.css" rel="stylesheet">
  8 |   <style>
  9 |     section {
 10 |       padding-top: 60px;
 11 |     }
 12 |   </style>
 13 |  </head>
 14 |  <body>
 15 | 
 16 | <div class="navbar navbar-fixed-top">
 17 |  <div class="navbar-inner">
 18 |   <div class="container">
 19 |     <a href="/" class="brand">Browser Mirror</a>
 20 |     <ul class="nav">
 21 |      <li><a href="https://github.com/mozilla/browsermirror">Github</a></li>
 22 |      <li><a href="https://github.com/mozilla/browsermirror/issues">issues</a></li>
 23 |      <li class="dropdown" id="toc-menu">
 24 |       <a class="dropdown-toggle" data-toggle="dropdown" href="#toc-menu">Table Of Contents
 25 |        <b class="caret"></b></a>
 26 |       <ul class="dropdown-menu">
 27 |        <li><a href="#intro">About Browser Mirror</a></li>
 28 |        <li><a href="#screencast">Screencast / Video</a></li>
 29 |        <li><a href="#tech">How Does It Work?</a></li>
 30 |        <li><a href="#development">Development / The Code</a></li>
 31 |       </ul>
 32 |      </li>
 33 |      <li><a href="/static/browsermirror.xpi">Install the Add-on!</a></li>
 34 |     </ul>
 35 |   </div> <!-- .container -->
 36 |  </div> <!-- .navbar-inner -->
 37 | </div> <!-- .navbar -->
 38 | 
 39 | <div class="container">
 40 | 
 41 | <section id="intro">
 42 | 
 43 | <h1>Browser Mirror</h1>
 44 | 
 45 | <p>Browser Mirror is a way of sharing your browser session with anyone
 46 | else.  You share your session and you'll get a link which you can give
 47 | to another person &mdash; they'll see what you see, and (with limits)
 48 | they can interact with the page at the same time as you.</p>
 49 | 
 50 | <h1>Getting Started</h2>
 51 | 
 52 | <p> Install the Firefox addon (no restart required!): </p>
 53 | 
 54 | <p style="padding: 0 2em 0 2em">
 55 |   <a class="btn btn-primary" href="/static/browsermirror.xpi">Install The Addon</a>
 56 | </p>
 57 | 
 58 | <p> After installation you should see a link in the bottom right of
 59 | your browser, like this: <img src="/static/share-button-screenshot.png"> </p>
 60 | 
 61 | <p> If you don't see that you might need to display the <strong>Add-on
 62 | bar</strong>, you can do this with <strong>View &gt; Toolbars &gt;
 63 | Add-on bar</strong>
 64 | (<a href="http://support.mozilla.org/en-US/kb/add-on-bar-quick-access-to-add-ons">read
 65 | more here</a>).</p>
 66 | 
 67 | <p> Once you've installed the addon, go to a page,
 68 | click <span style="text-decoration: underline; color:
 69 | #00f">share</span>, and a sidebar will open up &mdash; as long as the
 70 | sidebar is open you are sharing your session (though maybe no one else
 71 | is looking!)  To invite someone to actually look at what you are
 72 | doing, click <strong>share</strong> to get a link: </p>
 73 | 
 74 | <p> <img src="/static/share-link-screenshot.png"> </p>
 75 | 
 76 | <p> Click it: </p>
 77 | 
 78 | <p> <img src="/static/share-link-2-screenshot.png"> </p>
 79 | 
 80 | <p> Give that link to a friend, and they will see what's in your
 81 | tab. (Each time you click <span style="text-decoration: underline;
 82 | color: #00f">share</span> it will give you a new link.) </p>
 83 | 
 84 | </section>
 85 | 
 86 | <section id="video">
 87 | 
 88 | <h2>Screencast / video intro</h2>
 89 | 
 90 | <div><iframe width="420" height="315" src="http://www.youtube.com/embed/Wk3HB2no8Lg" frameborder="0" allowfullscreen></iframe>
 91 | </div>
 92 | 
 93 | </section>
 94 | 
 95 | <section id="tech">
 96 | 
 97 | <h2>How Does It Work?</h2>
 98 | 
 99 | <p> Browser Mirror is different than a typical screen-sharing
100 | applications.  Instead of sharing the <em>image</em> that you see on
101 | the screen, it shares the <em>page</em> that you are looking at.  It's
102 | also not the same as sharing the URL &mdash; the other person
103 | sees <em>what</em> you are looking at, they aren't just following
104 | along with the same URL.  So you can look at a private page on an
105 | intranet, or something that is bound to a session, like airplane
106 | ticket purchases.  As you continue to surf, the other person will
107 | follow along.  If you are using a dynamic application, the other
108 | person will see the results as you interact with the application. </p>
109 | 
110 | <p> In most cases you can both interact with forms, though in some
111 | fancier applications your friend may not be able to use the full
112 | functionality of some parts of the page. </p>
113 | 
114 | <p> In technical terms, what Browser Mirror does is send the DOM to
115 | the other person.  That is more or less the same as sending the HTML
116 | of the page &mdash; but without any of the special information the
117 | server uses to identify you, like cookies or Javascript state.  Only
118 | the <em>visible</em> parts of the page are sent.  This is somewhat
119 | like a screen sharing program, which sends pixels instead of DOM
120 | elements.  Currently the elements are captured at regular intervals,
121 | and diffs are sent to cut down on traffic. </p>
122 | 
123 | </section>
124 | 
125 | <section id="development">
126 | 
127 | <h2>The Code</h2>
128 | 
129 | <p> The code is hosted on <a
130 | href="https://github.com/mozilla/browsermirror">github</a>.</p>
131 | 
132 | <p> The code contains a Firefox Add-on, a simple Node.js server that
133 | handles communication between the two browsers, and a web site for the
134 | client to view. </p>
135 | 
136 | </section>
137 | 
138 |  </body>
139 | 
140 | </html>
141 | 


--------------------------------------------------------------------------------
/site/share-button-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/browsermirror/f26a645a48975382ea8bfcda7cf010f920032f05/site/share-button-screenshot.png


--------------------------------------------------------------------------------
/site/share-html-inner.js:
--------------------------------------------------------------------------------
 1 | var channel = new PostMessageIncomingChannel();
 2 | channel.onmessage = function (data) {
 3 |   if (data.hello) {
 4 |     var el = document.getElementById('browsermirror-waiting');
 5 |     if (el) {
 6 |       el.innerHTML = 'Connected, waiting for document...';
 7 |     }
 8 |   }
 9 |   if (data.local && data.local.setClientId) {
10 |     client.clientId = data.local.setClientId;
11 |   }
12 |   client.processCommand(data);
13 | };
14 | 
15 | var clientId = null;
16 | // FIXME: this is kind of a hacky way of getting the clientId on load:
17 | if (localStorage.clientId) {
18 |   clientId = localStorage.getItem("clientId");
19 | }
20 | 
21 | var client = new Client(channel, clientId);
22 | 
23 | client.ontitlechange = function (title) {
24 |   channel.send({local: {title: title}});
25 | };
26 | 
27 | client.onfaviconchange = function (href) {
28 |   channel.send({local: {favicon: {href: href}}});
29 | };
30 | 


--------------------------------------------------------------------------------
/site/share-html.js:
--------------------------------------------------------------------------------
  1 | var connection = null;
  2 | 
  3 | var clientId;
  4 | // FIXME: this isn't random enough
  5 | if (localStorage.clientId) {
  6 |   clientId = localStorage.getItem("clientId");
  7 | } else {
  8 |   clientId = parseInt(Math.random() * 100000, 10) + '';
  9 |   localStorage.setItem("clientId", clientId);
 10 | }
 11 | 
 12 | var hub = location.pathname.replace(/\/*$/, '');
 13 | var address = location.protocol + "//" + location.host + "/hub" + hub;
 14 | var channel = new WebSocketChannel(address);
 15 | var iframeChannel = new PostMessageChannel(null);
 16 | iframeChannel.send({local: {clientId: clientId}});
 17 | iframeChannel.onmessage = function (data) {
 18 |   if (data.local) {
 19 |     processLocalMessage(data.local);
 20 |     return;
 21 |   }
 22 |   channel.send(data);
 23 | };
 24 | 
 25 | function processLocalMessage(message) {
 26 |   if (message.chatMessage) {
 27 |     displayMessage(message.chatMessage, message.local);
 28 |   } else if (message.arrowUpdate) {
 29 |     // FIXME: do this
 30 |   } else if (message.restart) {
 31 |     iframeChannel.bindWindow(null);
 32 |     if (message.queueMessages) {
 33 |       // Because we just unbound the window, this .send() will queue:
 34 |       for (var i=0; i<message.queueMessages.length; i++) {
 35 |         iframeChannel.send(message.queueMessages[i]);
 36 |       }
 37 |     }
 38 |     // By rebinding we'll cause the handshake to happen again, which will happen
 39 |     // when
 40 |     iframeChannel.bindWindow(iframe);
 41 |   } else if (message.unload) {
 42 |     // We'll rebind the window to try to talk to the window whenever it might
 43 |     // come back
 44 |     console.log('Got unload');
 45 |     iframeChannel.bindWindow(null);
 46 |     iframeChannel.bindWindow(iframe);
 47 |   } else if (message.title) {
 48 |     document.title = "Mirror: " + message.title;
 49 |   } else if (message.favicon) {
 50 |     var link = document.getElementById("favicon");
 51 |     link.href = message.favicon.href;
 52 |   } else {
 53 |     console.warn("Unexpected local message:", message);
 54 |   }
 55 | }
 56 | 
 57 | channel.send({hello: true, clientId: clientId, isMaster: false, supportsWebRTC: supportsWebRTC()});
 58 | channel.onmessage = function (data) {
 59 |   if (data.chatMessage) {
 60 |     displayMessage(data.chatMessage, false);
 61 |     return;
 62 |   }
 63 |   if (data.youAreVerified) {
 64 |     if (data.youAreVerified.status == "okay") {
 65 |       onlogin(data.youAreVerified);
 66 |     }
 67 |   }
 68 |   if (data.clientId && users) {
 69 |     users.get(data.clientId).processCommand(data);
 70 |   }
 71 |   if (data.rtcOffer) {
 72 |     console.log('Got remote offer');
 73 |     enableAudio(data.rtcOffer);
 74 |     document.getElementById('audio-chat').innerHTML = 'incoming chat';
 75 |     return;
 76 |   }
 77 |   if (data.rtcAnswer) {
 78 |     console.log('Got remote answer');
 79 |     respondToAnswer(function (error) {
 80 |       if (error) {
 81 |         console.error("Error setting up answer:", error);
 82 |         return;
 83 |       }
 84 |       document.getElementById('audio-chat').innerHTML = 'chatting!';
 85 |     }, pc, data.rtcAnswer);
 86 |     return;
 87 |   }
 88 |   if (data.hello) {
 89 |     channel.send({helloBack: true, isMaster: false, supportsWebRTC: supportsWebRTC()});
 90 |   }
 91 |   if (data.supportsWebRTC && supportsWebRTC()) {
 92 |     var el = document.getElementById('audio-chat-container');
 93 |     el.style.display = '';
 94 |     var button = document.getElementById('audio-chat');
 95 |     button.addEventListener('click', function () {
 96 |       document.getElementById('audio-chat').innerHTML = 'chat request sent';
 97 |       enableAudio();
 98 |     }, false);
 99 |   }
100 |   if (data.doc && data.doc.href) {
101 |     setUrl(data.doc.href);
102 |   }
103 |   iframeChannel.send(data);
104 | };
105 | 
106 | var chatDiv;
107 | var chatInput;
108 | var urlEl;
109 | var iframe;
110 | 
111 | var users;
112 | 
113 | var LOGIN_BUTTON = '<img src="https://developer.mozilla.org/files/3967/plain_sign_in_black.png">';
114 | 
115 | window.addEventListener('load', function () {
116 |   iframe = document.getElementById('iframe-window');
117 |   iframeChannel.bindWindow(iframe);
118 |   chatDiv = document.getElementById('jsmirror-chat');
119 |   chatInput = document.getElementById('jsmirror-input');
120 |   urlEl = document.getElementById('jsmirror-url');
121 |   chatInput.addEventListener('keypress', function (event) {
122 |     if (event.keyCode == 13) { // Enter
123 |       var message = chatInput.value;
124 |       displayMessage(message, true);
125 |       channel.send({chatMessage: message});
126 |       chatInput.value = '';
127 |     }
128 |   }, false);
129 |   var loginEl = document.getElementById('login');
130 |   if (currentUser) {
131 |     // FIXME: set title
132 |     loginEl.innerHTML = '';
133 |     loginEl.appendChild(document.createTextNode(currentUser.email));
134 |   } else {
135 |     loginEl.innerHTML = LOGIN_BUTTON;
136 |   }
137 |   loginEl.addEventListener("click", function (event) {
138 |     event.preventDefault();
139 |     event.stopPropagation();
140 |     if (currentUser) {
141 |       onlogout();
142 |     } else {
143 |       navigator.id.request();
144 |     }
145 |   }, false);
146 |   users = new Users(document.getElementById('user-list'));
147 |   setInterval(users.checkAll.bind(users), 3000);
148 | }, false);
149 | 
150 | function displayMessage(message, here) {
151 |   var el = document.createElement('div');
152 |   el.className = 'chat-message';
153 |   if (here) {
154 |     el.className += ' chat-local';
155 |   } else {
156 |     el.className += ' chat-remote';
157 |   }
158 |   el.appendChild(document.createTextNode(message));
159 |   chatDiv.appendChild(el);
160 | }
161 | 
162 | function setUrl(url) {
163 |   if (urlEl) {
164 |     urlEl.href = url;
165 |     urlEl.innerHTML = '';
166 |     urlEl.appendChild(document.createTextNode(url));
167 |   } else {
168 |     setTimeout(function () {
169 |       setUrl(url);
170 |     }, 100);
171 |   }
172 | }
173 | 
174 | var pc;
175 | 
176 | function enableAudio(offer) {
177 |   setupAudio(function (error, result) {
178 |     if (error) {
179 |       console.error('Got error enabling audio:', error);
180 |       return;
181 |     }
182 |     pc = result.pc;
183 |     console.log('setup', result);
184 |     var msg;
185 |     if (result.offer) {
186 |       msg = {rtcOffer: result.offer};
187 |     } else {
188 |       msg = {rtcAnswer: result.answer};
189 |     }
190 |     console.log('sending', JSON.stringify(msg));
191 |     channel.send(msg);
192 |   }, 'audio-container', offer);
193 | }
194 | 
195 | window.addEventListener("unload", function () {
196 |   channel.send({clientId: clientId, bye: true});
197 | }, false);
198 | 
199 | var currentUser;
200 | /* FIXME: I don't think this works with server-side verification
201 | 
202 | currentUser = localStorage.getItem("currentUser") || null;
203 | if (currentUser) {
204 |   currentUser = JSON.parse(currentUser);
205 | }
206 | */
207 | 
208 | function onlogin(status) {
209 |   currentUser = status;
210 |   localStorage.setItem("currentUser", JSON.stringify(currentUser));
211 |   var el = document.getElementById('login');
212 |   if (el) {
213 |     el.innerHTML = '';
214 |     el.appendChild(document.createTextNode(status.email));
215 |     channel.send({email: status.email});
216 |   }
217 | }
218 | 
219 | function onlogout(status) {
220 |   currentUser = null;
221 |   localStorage.setItem("currentUser", null);
222 |   var el = document.getElementById('login');
223 |   if (el) {
224 |     el.innerHTML = LOGIN_BUTTON;
225 |     channel.send({email: null});
226 |   }
227 | }
228 | 
229 | if (navigator.id && navigator.id.watch) {
230 |   navigator.id.watch({
231 |     loggedInUser: currentUser ? currentUser.email : null,
232 |     onlogin: function (assertion) {
233 |       channel.send({
234 |         verifyEmail: {
235 |           assertion: assertion,
236 |           audience: location.protocol + "//" + location.host
237 |         }
238 |       });
239 |     },
240 |     onlogout: function () {
241 |       onlogout();
242 |     }
243 |   });
244 | 
245 |   if (currentUser) {
246 |     onlogin(currentUser);
247 |   }
248 | 
249 | } else {
250 |   // Probably this is because browserid/persona is not available
251 |   window.addEventListener("load", function () {
252 |     var loginEl = document.getElementById('login');
253 |     loginEl.style.display = 'none';
254 |   }, false);
255 | }
256 | 


--------------------------------------------------------------------------------
/site/share-link-2-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/browsermirror/f26a645a48975382ea8bfcda7cf010f920032f05/site/share-link-2-screenshot.png


--------------------------------------------------------------------------------
/site/share-link-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mozilla/browsermirror/f26a645a48975382ea8bfcda7cf010f920032f05/site/share-link-screenshot.png


--------------------------------------------------------------------------------
/site/view-inner.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Connecting...</title>
 6 |   <script src="/data/logging.js"></script>
 7 |   <script src="/data/channels.js"></script>
 8 |   <script src="/data/rtc.js"></script>
 9 |   <script src="/data/domutils.js"></script>
10 |   <script src="/static/client.js"></script>
11 |   <script src="/static/share-html-inner.js"></script>
12 | </head>
13 | <body>
14 | 
15 | <h1 id="browsermirror-waiting">Waiting for connection...</h1>
16 | 
17 | </body></html>
18 | 


--------------------------------------------------------------------------------
/site/view.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <!-- This page is the outer wrapper for the web-based (non-addon) view -->
  5 |   <meta charset="UTF-8">
  6 |   <title>Connecting...</title>
  7 |   <link id="favicon" rel="shortcut icon" href="favicon.ico">
  8 |   <script src="https://login.persona.org/include.js"></script>
  9 |   <script src="/data/logging.js"></script>
 10 |   <script src="/data/channels.js"></script>
 11 |   <script src="/data/rtc.js"></script>
 12 |   <script src="/data/user.js"></script>
 13 |   <script src="/static/share-html.js"></script>
 14 |   <style>
 15 |     body {
 16 |       margin: 0;
 17 |       font-family: sans-serif;
 18 |       height: 100%;
 19 |     }
 20 |     #page {
 21 |       position: fixed;
 22 |       width: 100%;
 23 |       height: 100%;
 24 |       padding: 0;
 25 |     }
 26 |     #iframe-window {
 27 |       height: 100%;
 28 |       width: 100%;
 29 |     }
 30 |     table {
 31 |       height: 100%;
 32 |       border-collapse: collapse;
 33 |       margin: 0;
 34 |       padding: 0;
 35 |     }
 36 |     table td {
 37 |       padding: 0;
 38 |       margin: 0;
 39 |       vertical-align: top;
 40 |     }
 41 |     #iframe-window {
 42 |       border: 0;
 43 |     }
 44 |     #interface {
 45 |       /* Should match the color in chat.html */
 46 |       background-color: #ddd;
 47 |       padding: 0.3em;
 48 |       border-right: 1px solid #000;
 49 |     }
 50 |     #jsmirror-url-container {
 51 |       white-space: nowrap;
 52 |       text-overflow: ellipsis;
 53 |       overflow: hidden;
 54 |       width: 11em;
 55 |       margin-bottom: 0.5em;
 56 |     }
 57 |     .chat-message {
 58 |       border-bottom: 1px solid #fff;
 59 |     }
 60 |     .chat-remote {
 61 |       background-color: #fff;
 62 |     }
 63 |   </style>
 64 | </head>
 65 | <body>
 66 | 
 67 | <div id="page">
 68 | 
 69 | <table style="height: 100%; width: 100%">
 70 |   <tr>
 71 |     <td id="interface" style="height: 100%; width: 12em">
 72 | 
 73 |       <div>
 74 |         Watching:
 75 |       <div id="jsmirror-url-container">
 76 |       <a href="#" target="_blank" id="jsmirror-url">waiting...</a>
 77 |       </div>
 78 |       </div>
 79 | 
 80 |       <div style="display: none">
 81 |         <!-- FIXME: disabled until I can get logins working on both sides -->
 82 |         <div><a href="#" id="login">-</a></div>
 83 |         <div id="user-list"></div>
 84 |       </div>
 85 | 
 86 |       <div id="audio-chat-container" style="display: none">
 87 |         <button id="audio-chat">talk</button>
 88 |       </div>
 89 |       <div style="max-width: 11em" id="audio-container"></div>
 90 | 
 91 |       Chat:<br>
 92 |       <div id="jsmirror-chat"></div>
 93 |       <input type="text" id="jsmirror-input" style="border: 1px solid #000; width: 100%">
 94 |     </td>
 95 |     <td id="iframe-container"><iframe id="iframe-window" src="/static/view-inner.html"></iframe></td>
 96 |   </tr>
 97 | </table>
 98 | 
 99 | </div>
100 | 
101 | </body></html>
102 | 


--------------------------------------------------------------------------------
/test/test_diff.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <title>diffDocuments Test</title>
 4 | <script src="../../doctestjs/doctest.js"></script>
 5 | <script src="../lib/mirror.js"></script>
 6 | <link rel="stylesheet" type="text/css" href="../../doctestjs/doctest.css" />
 7 | <style type="text/css">
 8 | body {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | 
14 | <body class="autodoctest">
15 | 
16 | <h1>diffDocuments Text</h1>
17 | 
18 | <div>
19 | This is the scratch area:
20 | 
21 |   <div id="scratch" style="border 2px solid #000">
22 |   </div>
23 | </div>
24 | 
25 | <div class="test">
26 | 
27 | <pre class="doctest">
28 | $ function MockMaster() {
29 | >   this.elements = {};
30 | > }
31 | $ MockMaster.prototype = Master.prototype;
32 | $ master = new MockMaster();
33 | $ scratch = document.getElementById('scratch');
34 | $ var lastDoc = master.serializeElement(scratch);
35 | $ function diff() {
36 | >   var commands = [];
37 | >   var result = master.diffDocuments(lastDoc, scratch, commands, true);
38 | >   if (result === null) {
39 | >     writeln('diff failed');
40 | >   } else if (! commands.length) {
41 | >     writeln('no diff');
42 | >   } else {
43 | >     for (var i=0; i&lt;commands.length; i++) {
44 | >       var command = commands[i];
45 | >       writeln.apply(window, command);
46 | >     }
47 | >   }
48 | >   lastDoc = master.serializeElement(scratch);
49 | > }
50 | $ scratch.appendChild(el=document.createElement('div'));
51 | $ el.className = 'foo bar';
52 | $ el.innerHTML = 'foo';
53 | $ diff();
54 | append_to el1000 [["DIV", "el1001", {class: "foo bar"}, ["foo"]]]
55 | $ el.setAttribute('foo', 'bar');
56 | $ diff();
57 | attrs el1001 {class: "foo bar", foo: "bar"}
58 | $ scratch.appendChild(document.createTextNode('testy'));
59 | $ diff();
60 | append_to el1000 ["testy"]
61 | $ scratch.removeChild(scratch.childNodes[scratch.childNodes.length-1]);
62 | $ diff();
63 | delete_last_text el1000
64 | $ scratch.removeChild(scratch.childNodes[0]);
65 | $ diff();
66 | deletetext- el1001
67 | $ scratch.appendChild(document.createTextNode('foo'));
68 | $ scratch.appendChild(el2=document.createElement('span'));
69 | $ el2.innerHTML = 'spaninner';
70 | $ diff();
71 | append_to el1000 ["foo", ["SPAN", "el1002", {}, ["spaninner"]]]
72 | $ // Remove the foo text
73 | > scratch.removeChild(scratch.childNodes[scratch.childNodes.length-2]);
74 | $ diff();
75 | deletetext- el1002
76 | $ scratch.removeChild(el2);
77 | $ scratch.appendChild(el2=document.createElement('span'));
78 | $ el2.innerHTML = 'spaninner';
79 | $ diff();
80 | delete el1002
81 | append_to el1000 [["SPAN", "el1003", {}, ["spaninner"]]]
82 | </pre>
83 | </div>
84 | 
85 | </body> </html>
86 | 


--------------------------------------------------------------------------------
/test/test_jsmirror.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | <title>jsmirror Test</title>
 4 | <script src="../doctestjs/doctest.js"></script>
 5 | <script src="diff_match_patch/javascript/diff_match_patch_uncompressed.js"></script>
 6 | <script src="../lib/mirror.js"></script>
 7 | <!-- This stylesheet is optional, but does improve the output: -->
 8 | <link rel="stylesheet" type="text/css" href="../doctestjs/doctest.css" />
 9 | <style type="text/css">
10 | body {
11 |   font-family: sans-serif;
12 | }
13 | </style>
14 | </head>
15 | 
16 | <body class="autodoctest">
17 | <!-- the autotest class tells doctest to run the tests and fill
18 | in extra elements automatically -->
19 | <h1>jsmirror</h1>
20 | 
21 | <div class="test">
22 | Test serialization of this element:
23 | 
24 |   <div id="test1">
25 |     <!-- some content: -->
26 |     <textarea name="foo">test</textarea>
27 |     <span style="color: red  ">you &amp; me</span>
28 |   </div>
29 | <pre class="doctest">
30 | $ el = document.getElementById('test1');
31 | $ writeln(serializeElement(el));
32 | [
33 |   "DIV",
34 |   {id: "test1"},
35 |   [
36 |     "\n    ",
37 |     ["&lt;!--COMMENT-->", {}, [" some content: "]],
38 |     "\n    ",
39 |     ["TEXTAREA", {name: "foo"}, ["test"]],
40 |     "\n    ",
41 |     ["SPAN", {style: "color: red  "}, ["you & me"]],
42 |     "\n  "
43 |   ]
44 | ]
45 | $ newEl = deserializeElement(serializeElement(el));
46 | $ x = document.createElement('div');
47 | $ x.appendChild(newEl);
48 | $ writeln(x.innerHTML);
49 | &lt;div id="test1">
50 |     &lt;!-- some content: -->
51 |     &lt;textarea name="foo">test&lt;/textarea>
52 |     &lt;span style="color: red  ">you &amp;amp; me&lt;/span>
53 |   &lt;/div>
54 | </pre>
55 | </div>
56 | 
57 | </body> </html>
58 | 


--------------------------------------------------------------------------------
/todo.txt:
--------------------------------------------------------------------------------
 1 | * Inject the mirroring into iframes, not just top frame
 2 | 
 3 | * On github.com, when it has a popup with a shadowed out background,
 4 |   it doesn't show the dialog properly or kill the shadow.
 5 | 
 6 | * Facebook is acting weird, and Google search results are weird.
 7 | 
 8 | * I think this (and maybe a weird Facebook thing) is because you can
 9 |   change the innerHeight etc. of an element without changing
10 |   el.style.height -- and so it's not visible to us that you've
11 |   overridden something on the element.  But... the activation of the
12 |   overlay works, just not the disabling.
13 | 
14 | * Remove deleted attributes on mirror.
15 | 
16 | * When a change has been made to the page that removes CSS, it is
17 |   necessary to do something special; perhaps to specifically remove
18 |   the CSS, or to reload the page entirely.
19 | 
20 | * Remove Socket.IO, replace with direct Web Sockets, and a simple XHR
21 |   fallback.
22 | 
23 | * Move the box into a top bar.
24 | 
25 | * Handle cases when the master computer isn't around.
26 | 
27 | * Introduce new listeners/mirrors with some chatish message.  Also say
28 |   goodbye.
29 | 
30 | * Make the addon work.
31 | 
32 | * BrowserID-based sharing and authentication.
33 | 
34 | * Track mouse position.
35 | 
36 | * Record the sessions for replay, with some online management panel
37 |   for that.  Should initiate the recording from the master.
38 | 
39 | * Mobile browser support.
40 | 
41 | * Tests (with jstestnet)
42 | 
43 | * Stop polling the page when there haven't been changes for a while
44 |   (use an event listener to see changes).
45 | 
46 | * Check page visibility to avoid updates and traffic when no one is
47 |   paying attention.
48 | 
49 | * Headless master?  Using DOM.js, phantomjs, etc?
50 | 
51 | * Multi-tab support.
52 | 
53 | * Extract pieces
54 |   - DOM freeze
55 |   - DOM diff
56 |   - Selection
57 |   - Networking
58 | 
59 | Check out:
60 |   https://chrome.google.com/webstore/detail/aeafbnpnnbfjkngleojanpckkjhkdkdj
61 | 


--------------------------------------------------------------------------------