Confirmed users
9,511
edits
Labs/Jetpack/Reboot/JEP/108: Difference between revisions
no edit summary
Dandonkulous (talk | contribs) No edit summary |
No edit summary |
||
| (10 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
== JEP 108 - | == JEP 108 - Page Worker == | ||
* Champion: Daniel Buchner - daniel@mozilla.com | * Champion: Daniel Buchner - daniel@mozilla.com | ||
* Status: Under Review | * Status: Under Review | ||
* Bug | * Bug: [https://bugzilla.mozilla.org/show_bug.cgi?id=546740 546740] | ||
* Type: API | * Type: API | ||
=== Proposal === | === Proposal === | ||
Page Worker is like a more open sandbox for doing most anything in a traditional web page with a DOM context, but with a key difference: the page is augmented with escalated, waterfall chrome privileges. It is essentially along the same line of a Web Worker, just more open and accessible. | |||
=== Use-Cases === | === Use-Cases === | ||
1. Google Maps | 1. Google Maps API Data | ||
If you wanted to utilize the data available via Google Maps API, you would need to instantiate the API's script within the context of a DOM. This is due to Google Maps reliance on the elements and script it pulls in to make data fetching possible. I might want to have a Jetpack that searches the page for addresses and business titles allowing the user to mouseover those items and view geolocalized details about such places in a tooltip. | If you wanted to utilize the data available via Google Maps API, you would need to instantiate the API's script within the context of a DOM. This is due to Google Maps reliance on the elements and script it pulls in to make data fetching possible. I might want to have a Jetpack that searches the page for addresses and business titles allowing the user to mouseover those items and view geolocalized details about such places in a tooltip. | ||
2. | 2. Native Type Proxy & DOM-Reliant Script Execution Environment | ||
It is almost a certainty that developers will want to use their js library of choice to interact with web content. To enable this more easily, they could use this JEP's DOM as a Native Type proxy and as the primary location to instantiate their DOM dependent code. | |||
=== Dependencies & Requirements === | === Dependencies & Requirements === | ||
* We must be able to give the code in the top window of this page chrome privileges that are strictly one-way/descending in nature. | * We must be able to give the code in the top window of this page chrome privileges that are strictly one-way/descending in nature. | ||
* Dynamically generated code sent to the | * Dynamically generated code sent to the Page Worker should be injected and executed in the Page Worker's window context. | ||
| Line 27: | Line 27: | ||
== API Methods == | == API Methods == | ||
==== | ==== Page Worker Global: <i>$page</i> ==== | ||
==== | ==== Page Worker Method: <i>run</i> ==== | ||
<b>Description:</b> | |||
Allows you to run code in the Page Worker's window context. | |||
<b>Arguments:</b> | <b>Arguments:</b> | ||
#<b>options</b> - (<i>object</i>) | #<b><i>options</i></b> - (<i>object</i>) | ||
#* bind: (<i>mixed</i>) a variable that will be bound as the 'this' keyword in the function | #* bind: (<i>mixed</i>) a variable that will be bound as the 'this' keyword in the function | ||
#* arguments: (<i>array | #* arguments: (<i>array</i>) an array of mixed variables passed as the function arguments | ||
#* timeout: (<i>number</i>) a number that is used to set the timeout duration | #* timeout: (<i>number</i>) a number that is used to set the timeout duration | ||
#* interval: (<i>number</i>) a number that is used to set the interval duration | #* interval: (<i>number</i>) a number that is used to set the interval duration | ||
#<b>action</b> - (<i>function</i>) a function to be executed within the DOM of the | #<b><i>action</i></b> - (<i>function</i>) a function to be executed within the DOM of the Page Worker - by default, the Page Worker's window object is the bound 'this' within the function | ||
<b>Returns:</b> | <b>Returns:</b> | ||
<b>user defined return value</b> - The function's return value as specified by the user | <b><i>user defined return value</i></b> - The function's return value as specified by the user | ||
or | or | ||
| Line 48: | Line 51: | ||
<i>If timeout or interval options are used:</i> | <i>If timeout or interval options are used:</i> | ||
<b>array</b> - an array whose first item is the function's user defined return value, and second is a variable the user can save to clear the timing event | <b><i>array</i></b> - an array whose first item is the function's user defined return value, and second is a variable the user can save to clear the timing event | ||
<b>Notes:</b> | <b>Notes:</b> | ||
| Line 56: | Line 59: | ||
<pre class="brush:js;"> | <pre class="brush:js;"> | ||
$ | $page.run({ interval: 10000 }, function(){ | ||
return window.location; | return window.location; | ||
}); | }); | ||
</pre> | </pre> | ||
==== | ==== Page Worker Method: <i>empty</i> ==== | ||
<b>Description:</b> | |||
Empties the Page Worker's of all elements (this includes the body, which is then reinserted fresh). | |||
<b>Arguments:</b> | <b>Arguments:</b> | ||
<i>This method takes no arguments</i> | |||
<b>Returns:</b> | <b>Returns:</b> | ||
The | The Page Worker Global object: <i>$page</i> | ||
<b>Examples:</b> | <b>Examples:</b> | ||
<pre class="brush:js;"> | <pre class="brush:js;"> | ||
$ | $page.empty(); | ||
</pre> | </pre> | ||
==== Page Worker Method: <i>reset</i> ==== | |||
<b>Description:</b> | |||
Resets the Page Worker to a blank HTML page with no elements and a clean global window object. | |||
<b>Arguments:</b> | <b>Arguments:</b> | ||
<i>This method takes no arguments</i> | |||
<b>Returns:</b> | <b>Returns:</b> | ||
The | The Page Worker Global object: <i>$page</i> | ||
<b>Examples:</b> | <b>Examples:</b> | ||
<pre class="brush:js;"> | <pre class="brush:js;"> | ||
$ | $page.reset(); | ||
</pre> | </pre> | ||