Labs/Jetpack/Reboot/JEP/Shell

JEP XXX - Shell JEP

• Champion: Testy McTest - mctest@mozilla.com
• Status: [Accepted, Under Review, Info Needed, Declined] / [In-Production, Pre-Production, Not-Started, Later Release]
• Bug Ticket: someTicket#
• Type: API
• Difficulty: 4

Proposal

What does this JEP do in 1 sentence, additionally Who, What, When, Where, and Why is this JEP important.

Key Issues

What are the key issues to be considered within the context of this proposal?

Dependencies & Requirements

• A list of all known dependencies and requirements for this JEP

Capabilities Required (if applicable)

• Describe the capabilities that must be in-place for this JEP to function

API Methods (if applicable)

//THIS IS EXAMPLE CONTENT!!!

Page Mods Initialization

var myMods = new pageMod({
  'matches': ['*.google.com', 'jetpack.mozillalabs.com'],
  'includes': {
      'script': ['http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js'],
      'styles': ['http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css']
  },
  'styles': {
      'body': {
          'background': '#ffffff',
          'font-family': 'Trebuchet MS'
      }
  },
  'script': function(){
      $('container').addEvents({
          'click:relay(ul li)': function(){ this.setStyles('background','#000') },
          'mousenter:relay(ul li)': function(){ this.tween('background','#000') },
          'mouseleave:relay(ul li)': function(){ this.tween('background','#fff') }
      });
  }
});

Page Mods Method: add

Arguments:

1. type - (string) The type of modifier being added. Can be 'matches', 'includes', 'styles', or 'script'. If the only argument passed in is an object, Page Mods assumes multiple modifiers will be passed in.
2. data -
   • matches: (array) an array of web site resource strings
   • includes: (object) 'script' or 'style' keyed nodes whose values are arrays of asset resource strings
   • styles: (object) an object whose keys are CSS selectors and whose values are objects composed of CSS property keys and values
   • script: (function) a function that will be injected into the page and called. By default, the function is bound with the target document's window object

Returns:

The Page Mods instance

Notes:

Modifications passed to the Page Mods instance with this method will be added, and persist, on open and future documents matching all of the URL(s) currently on the 'matches' white-list.

Examples:

myMods.add('matches', ['*.digg.com']);

myMods.add('includes', { 
  'script': ['http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js'],
  'styles': ['http://yui.yahooapis.com/3.0.0/build/cssbase/base-min.css']
});

myMods.add('styles', {
  'body': {
      'background': '#ffffff',
      'font-family': 'Trebuchet MS'
  },
  'span.details': {
      'font-size': '7px'
  }
});

// Creating a function reference

var pageLog = function(){
  console.log('I just logged a message with Page Mods!');
}

// Using a function reference enables removal of the script later, see
// the remove method below for more info.

myMods.add('script', pageLog);

Use Cases

1. A list of add-ons and applications that would utilize this JEP

Common Actions

• Common actions within add-ons or applications that would be reliant on such functionality?