Teacher's Pet
Teacher's Pet is a Mozilla Firefox extension that shares a web browser tab with one or more remote tabs. This permits, as an example, an instructor to share a tab with a classroom of student computers. Whenever the instructor's page location changes on a shared tab, the remote tabs on the students' computers automatically change to match the instructor's shared tab. When the instructor moves the mouse around on the shared tab, the students see an image-based pointer on their tabs.
The content below is a copy of the write-up that was turned in with the project. More information and a public release will follow in the near future.
Introduction
Teacher's Pet was originally written as a project by Steven Lawrance and George Leontiev for the Software Architectures for User Interfaces (SAUI) class taught by Assistant Professor Jason Hong.
This project had a significant learning curve as one team member had not written a Mozilla Firefox extension previously, and the other team member had not delved into Firefox extensions for a while. Time constraints also shaped the scope and implementation of this extension. As per our requirements, we needed to implement at least three medium-sized features, consisting of about 200 lines of code each, that are useful and innovative. Faced with these constraints, we decided to maximize our learning and our extension's usefulness by creating our own special-purpose extension with at least three significant features. That led us to creating our own extension from scratch: Teacher's Pet. This extension relies heavily on networking to pass messages between servers and clients. It took us a bit longer to implement than we had expected, though much of that was attributed to the learning curve and tracking down a crash bug in Firefox.
The experiments that we created to learn more about the Firefox extension domain gradually morphed into the implementation. While this is not the greatest software engineering practice, it fit in with our short-term lightweight project process, which was primarily an iterative design-code-test-repeat cycle. Architecture
Our implementation is structured into three modules: main, client, and server.
Main Module
The main module acts as the model of our system in a model-view-controller system view. It stores the extension's state and uses the server and client modules to communicate with peers. The view is contained in the main.xul file, which Firefox renders as a user interface. Internally, Firefox acts as the controller to move state changes to main.js, though the updateWidgetStates function in TeachersPetTab pushes state from main.js to the view. Within our extension's chrome/content folder, main.js contains the "load" and "unload" handlers for the extension, which get called when a Firefox window gets created or closed, respectively. When a new Firefox window is created, our extension registers itself as a listener for tab selection and removal events. With these window and tab events, our extension can associate a TeachersPetTab object instance with every tab in every window and methodically close those instances when tabs and/or windows are closed. Firefox events such as tab selections, window closures, mouse movements, and tab document location changes get sent to top-level JavaScript functions that look up the proper TeachersPetTab using the extension-global teachersPetTabs array. After looking up the proper TeachersPetTab, an event gets dispatched to the appropriate method on that object instance.
Within the TeachersPetTab, one server and one client are lazily created upon request. These are closed when the TeachersPetTab is closed.
Server Module
The server module, located in server.js, uses asynchronous Java TCP sockets to communicate with clients without blocking Firefox. This permits our extension to communicate with large numbers of clients without slowing down the server too much, maximizing the browsing experience for both the server user and the client users. Functions are provided to start and stop a server as well as to send a message to all clients and send a message to a specific client. Clients are represented both internally and externally by the ConnectionRecord class in network.js, which is shared with the client module. Several events exist in the server. These include line receipts from clients, client connections, and client disconnections as well as notification of when a sent line of text is either partially sent to the clients or completely sent to all clients, which can help with progress notification. Progress notification is presently not visualized in this extension, though the underlying framework exists.
Client Module
The client module, located in client.js, uses asynchronous Java TCP sockets to communicate with a server without blocking Firefox. This lets a client receive lines of text from its connected server as well as send text lines to its server. Several events exist in the client. These include line receipts from the server, connections, disconnections, and connection failures as well as a notification when a sent line has been completely sent to the server.
Utility
Teacher's Pet allows any group of people to navigate collectively through a series of web pages. Students can comfortably watch a presentation on their own computer as well as interact with the web sites and see where an instructor is pointing to on the screen. Such functionality can be useful in a classroom setting, especially for training that involves web sites or web-based applications. This also enables remote classroom scenarios.
Limitations
At this time, navigations within frames are not propagated to clients. Non-frame navigation is supported, including navigation to a frame set page. On a frame-based page and on some web sites, the mouse cursor might not work. Although the extension attempts to disable all links, this action is not always successful on all links. If a connection to a server fails, the exception thrown is an InvocationTargetException instead of the correct IOException. In very rare cases, Firefox might crash when using our extension. Besides these issues, the core functionality and our set of features work very well and can be used today for non-frame web site classroom training.
The Future
The networking code itself took some time to develop–much more time then we were expecting. This barebones system, however, has numerous applications on its own. It enables Firefox to become a lightweight server, which can be molded based on the user's needs. With this framework and our existing useful functionality, extensions on our extension are possible. Some examples include web-based personal file sharing, instant messaging, and remote administration.
Usage
To run Teacher's Pet, install the included teacherspet.xpi file inside of Mozilla Firefox. Ensure that you have the latest Java JRE 1.5 environment installed, which this extension uses.
After installing it, you can share a tab by clicking on the apple icon on the bottom-right part of the window or through the "Share Tab" menu item in the Teacher's Pet submenu within the Tools menu. As an alternative, you can also add a Teacher's Pet icon to your browser's tool bar by customizing it and using drag-and-drop to place that tool bar icon. Pressing the tool bar button without pressing the drop-down arrow will activate the "Connect to Shared Tab" menu item automatically. We had decided to apply principles of Fitts' Law to our user interface design by keeping the "Connect to Shared Tab" closer to the mouse than "Share Tab" because most users will use the "Connect to Shared Tab" command. When sharing a tab, ensure that your firewall is letting either its dynamically-assigned port through or any Firefox shared TCP ports through. On another computer or even in a different window or tab on the same computer, connect to a shared tab using one of the "Connect to Shared Tab" options. A prompt will ask you to enter in the host and port as host:port. If it's not formatted properly, the extension will notice and ask the user to modify their input to conform to the requirements. Once connected, the current tab will display the location that the server's shared tab is showing. When the server's user moves the mouse around, a red arrow will move around the client's tab and point, pointing at the same document coordinates.
To disconnect, a client can select the "Disconnect from Shared Tab" command. A server can use the "Stop Sharing Tab" command to stop sharing. Note that if the server stops sharing, then the currently connected clients will get a notification that the server disconnected them. The status bar on the bottom right of the window informs the server user of how many clients are connected.
It's possible for a tab to be both a client and a server. In this configuration, events from the root server propagate down the tree of servers and clients with each client+server combination propagating events to their clients.
We put a lot of work into this assignment, and we plan to possibly make it open-source so that it can be extended by others and put to use by those who can benefit from its current features.