MozillaWiki

Labs/Jetpack/Reboot/JEP/102: Difference between revisions

Page Discussion

Labs/Jetpack/Reboot/JEP/102 (view source)

Revision as of 01:30, 26 May 2010

820 bytes removed ,  26 May 2010
→‎JEP 102 - Single UI Element
No edit summary
Line 4: Line 4:
** Other Peeps: Alex Faaborg, Daniel Buchner, Jennifer Boriss, Dietrich Ayala
** Other Peeps: Alex Faaborg, Daniel Buchner, Jennifer Boriss, Dietrich Ayala
* Status: Under Review
* Status: Under Review
* Bug Ticket: {{bug|543585}}
* Bug Tickets:
** {{bug|543585}} - Phase 1: Core API in place, simple status-bar-like UI
** {{bug|FILEME}} - Phase 2: Work with Firefox UX to complete the UI
* Type: API
* Type: API


=== Proposal ===
=== Proposal ===
Line 13: Line 14:
<pre class="brush:js">
<pre class="brush:js">
/**
/**
Creates a new simple feature, whose properties are that it has a small 32x32
Creates a new simple feature, whose properties are that it has a small 16x16
pixel display, as well as a larger display that defaults to 350px by 450px.
pixel display, as well as a larger display that defaults to 350px by 450px.
@constructor
@constructor
@param options {object}
@param options {object}
   @prop content {uri|html|xml|window}
   @prop content {uri|html}
         This is the small view of the feature.
         This is the small view of the feature.
         uri: A link to the URL of either an icon or a webpage
         uri: A link to the URL of either an icon or a webpage.
         html: A HTML string that will be rendered
         html: An HTML string that will be rendered.
        xml: E4X version of the above
   @prop [panel] {uri|html|panel}
        window: a reference to a DOM window object
         See above descriptions for URI and HTML content.
   @prop [panel] {uri|html|xml|window|panel}
         panel: A reference to a panel object ([[Labs/Jetpack/Reboot/JEP/103|JEP 103]]
         See above descriptions.
         panel: A reference to a panel object
         If a panel is specified then the default action is that a  
         If a panel is specified then the default action is that a  
         click on the content area opens the panel. If you wish  
         click on the content area opens the panel. If you wish  
Line 32: Line 31:
         calls event.preventDefault().
         calls event.preventDefault().
   @prop [on*] {function}
   @prop [on*] {function}
         You can optionally place event handlers in the constructor.
         Event handlers. Potential to be all standard events. But for now: load, click, mouseover, mouseout, DOMContentReady.
**/
**/
widget = require("widget").Widget(options);
widget = require("widget").Widget(options);
// Using the convention that constructors can optionally
</pre>
// take new or not.


/**
=== Sizing ===
Event handlers
@method
@param callback {function}
Potential to be all standard events. But for now: load, click, mouseover, mouseout
**/
widget.on*( callback ) //f.e., widget.onClick()


/**
The bar should have two sizes: one where the height of the widgets are 24px and one where they are 16px. The size is set by the user/Firefox, and cannot be changed via this API. For now, the widgets are always rendered as if at a height of 24px and then scaled to 16px height.
Remove event handlers. Without any arguments, all bound events are removed.
If the function that was passed to bind is provided, only that specific event handler is removed.
@method
@param [callback] {function}
**/
widget.on*.unbind( [callback] )


/**
=== Customization ===
Enumerates all event handlers of the type specified, returning
a list of event handlers.
@method
**/
for( var eventHandler in widget.on* ){ console.log( eventHandler ); }
 
/**
Removes the widget from the interface.
@method
**/
widget.destroy()
 
 
/**
@prop [content] {canvas|window}
      If there was a image passed into the constructor this will be a canvas
      you can draw on. It updates the displayed icon in real time. If there
      was a page, then this is a window element.
@prop [panel] {panel}
      A reference to the panel object.
**/
feature.property
</pre>
 
=== Sizing ===


The bar can have two sizes: one where the height of the widgets are 24px and one where they are 16px. The size is set by the user/Firefox, and cannot be changed via this API. For now, the widgets are always rendered as if at a height of 24px and then scaled to 16px height.
* Customization of the visible widgets should be handled in the same manner that Firefox toolbar customizations are made.


=== Notes ===
=== Not-implemented Yet ===


* Do we want a <code>widget.listEventsHandlers()</code>?
* Adding event handlers on the widget object
* Removing event handlers
* Enumerating event handlers
* Panel support
* Setting image/content/panel on the widget object


=== Open Issues ===
=== Open Issues ===


* What are the conditions that we should impose on add-ons being included in this UI element.
* What are the conditions that we should impose on add-ons being included in this UI element.
* Need to figure out ContentFrames.
* How is overflow handled?
* How is overflow handled?
* Can users pin a widget?
* Can users pin a widget?
Line 100: Line 64:


* [[Labs/Jetpack/Reboot/JEP/103|JEP 103 - Panel]]
* [[Labs/Jetpack/Reboot/JEP/103|JEP 103 - Panel]]
* ContentFrame
* [[Labs/Jetpack/Reboot/JEP/115|JEP 115 - ContentFrame]]
* Update-allowable implementation of "icon" - may share similar implementation of content area with Panel and other JEPs
* URL constructor - {{bug|564624}}
* Icons sizes should be in the following size formats: Large: 24px, Small: 16px
* Image constructor


=== Use Cases ===
=== Use Cases ===
Line 123: Line 87:


widget = require("basic-widget").Widget({
widget = require("basic-widget").Widget({
   content: "snowglobe.png",
   image: "snowglobe.png",
   onClick: function(){
   onClick: function(){
     tabs = require("tabs");
     tabs = require("tabs");
Line 137: Line 101:
<pre class="brush:js">
<pre class="brush:js">
widget = require("basic-widget").Widget({
widget = require("basic-widget").Widget({
   content: "http://reddit.com/favicon",
   image: "http://reddit.com/favicon",
   panel: "http://m.reddit.com"
   panel: "http://m.reddit.com"
})
})
Line 146: Line 110:
<pre class="brush:js">
<pre class="brush:js">
widget = require("basic-widget").Widget({
widget = require("basic-widget").Widget({
   content: "http://wikipedia.com/favicon",
   image: "http://wikipedia.com/favicon",
   panel: "Loading..."
   panel: "Loading..."
})
})
Dietrich
Confirmed users, Bureaucrats and Sysops emeriti
2,088

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/225758"