The User UX is implemented in the '''swarm''' Firefox extension. All of the paths are variations that lead to the

The User UX is implemented in the '''swarm''' Firefox extension. All of the paths are variations that lead to the

-

[https://getfirbug.com/swarms/index.html swarm-list page]. The swarm extension listens for clicks on the links in this page and any pages loaded from it. When it detects a swarm definition page, the install buttons are activated and invoke swarm install.

+

[https://getfirebug.com/swarms/index.html swarm-list page]. The swarm extension listens for clicks on the links in this page and any pages loaded from it. When it detects a swarm definition page, the install buttons are activated and invoke swarm install.

The '''swarm''' extension can be loaded independent of Firebug and thus bootstrap the install of Firebug along with all the other extensions. The Swarm-based Firefox extension implementation simply invokes itself after install; the Firebug update-info page, Firefox menu item, and Firebug button versions open the swarm-list page under supervision of the extension.

The '''swarm''' extension can be loaded independent of Firebug and thus bootstrap the install of Firebug along with all the other extensions. The Swarm-based Firefox extension implementation simply invokes itself after install; the Firebug update-info page, Firefox menu item, and Firebug button versions open the swarm-list page under supervision of the extension.

Line 45:

Line 45:

=== Testers ===

=== Testers ===

-

Testers install Swarm extension, Firebug, and FBTest (how?). In the FBTest window they select the testShell (where? currently extensions/swarm/branches/swarm1.5/swarms/testShell.html). In the testShell they use url text input to set up the test:

+

Testers install Swarm extension, Firebug, and [[FBTest]]. In the FBTest window they select the testShell (currently at <code>extensions/swarm/branches/swarm1.5/swarms/testShell.html</code>). In the testShell they use url text input to set up the test:

The results of these picks are stored as defaults for the next run (TODO, or we just install Firebug in the FBTest XUL window and edit the HTML then write out the HTML)

The results of these picks are stored as defaults for the next run (TODO, or we just install Firebug in the FBTest XUL window and edit the HTML then write out the HTML)

Line 98:

Line 98:

The workflows are defined in <code>swarmWorkflows.html</code> as lists of HTML buttons with magical class names.

The workflows are defined in <code>swarmWorkflows.html</code> as lists of HTML buttons with magical class names.

+

+

[[Category:Extensions]]

Latest revision as of 00:33, 22 November 2013

A Swarm is a multiple-extension installation tested in a browser. The swarm comes with both the list of extensions and the test results.

This page describes on-going development effort for a new feature in Firebug. Nothing described on this page is deployed yet. Your comments welcome. Eventually this page will be split into user documentation and implementation documentation.

User picks Firefox > Tools > Swarms. A new Web page opens listing available Swarms. User selects a swarm by clicking on a link, resulting in a new Web page listing the extensions of that Swarm and the testing results. The User may select paid extensions and donate-please extensions. User clicks 'install', optionally pays, and all extensions are downloaded, verified, and installed. (For FF 3.6 reload is needed next).

This use case is expected to be uncommon, but we need it for bootstrap.

The User UX is implemented in the swarm Firefox extension. All of the paths are variations that lead to the
swarm-list page. The swarm extension listens for clicks on the links in this page and any pages loaded from it. When it detects a swarm definition page, the install buttons are activated and invoke swarm install.

The swarm extension can be loaded independent of Firebug and thus bootstrap the install of Firebug along with all the other extensions. The Swarm-based Firefox extension implementation simply invokes itself after install; the Firebug update-info page, Firefox menu item, and Firebug button versions open the swarm-list page under supervision of the extension.

The swarm extension is generic and ideally will not depend on Firebug. Its just a multi-extension installer using an HTML page for its specification.

You can try the current version by linking fbug\extensions\swarm\branches\swarm1.5\ into your profile/extensions. (In SVN Chromebug you can use Extension panel button Add Link for this).

Testers install Swarm extension, Firebug, and FBTest. In the FBTest window they select the testShell (currently at extensions/swarm/branches/swarm1.5/swarms/testShell.html). In the testShell they use url text input to set up the test:

The testing features layer on the swarm extension and FBTest. The testShell is just a web page running in the FBTest window and instrumented by the swarm-install functions. The shell, swarm definition, and output template all rely on specific HTML class or id values which need to be documented (TODO).

You can try this out by linking the swarm extension as described above and the fbtest extension, then opening FBTest on a file URL pointing to fbug/extensions/swarm/branches/swarm1.5/swarms/testShell.html.

This page informs users about the individual extensions in the swarm. The user needs to get an overview from the page and have the option to dig deeper for more information. Generally the page should resemble a list of cool features implemented by individual contributors; the fact that these features are implemented by extensions is a not-very-important detail for average users.

This is the page seen by users when the select a swarm to install. The page has two iframe elements, one Swarm Definition and one Test Results, populated by data: URLs created during the testing. The Swarm Definition is just the Swarm Declaration, modified by the swarm test and exported as data-url encoded HTML. The modifications include (TODO). The Test results are plain text.

At least until we have some experience, the style information should be self-contained in the Swarm Declaration page. The style of both pages here can be modified, but the UI must allow the user to see the test results easily.

Developers creating Firebug extensions will operate like testers but they will typically use the 'pre-test' workflow rather than 'certified testing'. Often the extensions listed in the swarm definition will be file links rather than downloads. It won't make sense to export the test result in this case. The setup will work with Chromebug running.

The swarm-test code is essentially a new implementation of outer wrapper of FBTest.

The chrome around FBTest is now minimal. Inside is a browser element called "taskBrowser". It gets loaded with a 'shell', which is a Web page containing a 'workflow' header and iframe elements. The workflow header lists workflows, each workflow has a list of buttons. Each button works on one or more iframe element. The buttons and iframe elements are connected with magical class names.

When the tester selects a workflow, the corresponding list of buttons is activated and they selectively hide/show iframe elements according to the UI needs. When the test clicks on steps in the workflow, the operation uses the iframe info, for example, reading the test case list and writing results into the result frame. When a step completes the next step is activated.

Each workflow has "auto-run" button (TODO) to run all successful steps in succession; the selected workflow is pre-selected based on the previous selection (TODO); command line option allows autorun of a workflow (TODO).

The workflow steps (buttons) are defined by extending Swarm.WorkflowStep and implementing the methods in that object. The methods are documented in workflow.js. Examples include installer.js, tester.js, and exporter.js.

The workflows are defined in swarmWorkflows.html as lists of HTML buttons with magical class names.