Document code injection

[Zbigniew Braniecki]

Hi all,

I'm working on my first jetpacks over last weeks and what strikes me
is how often I'd like to inject code into the website. I'd like to
blur the line between injecting into browser UI and into page.

Much more common is for me to think about jetpack that plays with the
website content, rather than adding unrelated UI item.

This, in result, pushes me into thinking on what's important. I
gathered a short list of items to ignite the discussion.
- easy DOM node creation.
- easy context switch
- easy CSS injection
- easy way to figure out if I injected my block/css already or not
- ability to remove/reinject the blocks

Let me explain:

wrt DOM creation. I know we can use jQuery's default $("<node/
>",context), yet I think that it's not very elegant. This solution
works when you just want to insert a single node, while it becomes
hardly readable when what you insert is a nested structure. I'd like
to offer API similar to jQuery domec extension which allows for
greater readability of nested dom creations. Example:

$.create('div', {'id': 'jetpack_block', 'font-size':'14px',
'margin':'4px'}, Array(
$.create('h1', {'color':'red'}, 'Hello world'),
$.create('p', {'text-decoration': 'underline', 'This is
my hello world block')
));

wrt. context swiching. Whatever we do here, it would be best to be
able to switch context at will outside of DOM node creation function,
in order to allow for nested/chained block creations without PITA.

Something like:
jetpack.context=jetpack.tabs.focused // or jetpack.contexts.activeTab
(... insert block, manipulate text, read values)
jetpack.context=jetpack.contexts.browser
(... insert block, manipulate UI)

wrt. CSS injection. As far as I know jetpack does not offer (or I
failed to find) a way to inject CSS. jQuery is not very helpful here,
and the generic way would be to do sth like:

var css = '#dialog { \
background-color: red \
}'
$('<style/>',doc).attr('type','text/css')
.html(css)
.appendTo(doc.querySelector("head"));

which means you have to inject a long CSS string into your jetpack
file and add \ at the end of each line.

One solution would be to match this issue with ability to have multi-
file jetpacks and keep CSS in separate file. Same with JS. Another
would be to inject CSS from external file into JS. I prefer the
former, but I'm not sure what are the plans here.

wrt. last two. Once I injected html/css/js into an open document, I
should be able to easily list them, access them and remove. It would
be awesome to have Jetpack silently keep a list of handlers to DOM
Nodes with API like:

jetpack.tabs.focused.injects.html
jetpack.tabs.focused.injects.css
jetpack.tabs.focused.injects.js
jetpack.contexts.browser.injects.html|css|js

with ability to list, iterate, remove and removeAll.

This is vitally important to simplify multiple-injection mistakes and
ability to clean after myself.

That's all for now. If I'm thinking in the wrong direction, or if its
the topic already covered by others, I'd love to see the right place
to discuss this.

Thanks,
Zbigniew Braniecki
--

Mozilla (http://www.mozilla.org)

[Andrew Sutherland]

On Mon, Nov 30, 2009 at 3:46 AM, Zbigniew Braniecki
<zbigniew....@gmail.com> wrote:
> which means you have to inject a long CSS string into your jetpack
> file and add \ at the end of each line.

You can abuse E4X to provide for multi-line strings.

let a = <>foo
bar
baz</>

a.split("\n").length => 3

Andrew

[Backpack]

I've learnt to love jQuery and E4X:

style={
'color':'red',
'text-decoration':'underline'
}

html=<>
<div id='block' style='here...'>
<h1 color='red'>Hello World<h1>
<p>This is my hello world block</p>
</div>
</>.toXMLString();

$(html,context).css(style);





On Nov 30, 7:46 am, Zbigniew Braniecki <zbigniew.branie...@gmail.com>
wrote: