722319 - Make a XUL widget for the Source Editor

Status: RESOLVED WONTFIX

(DevTools :: Source Editor, enhancement, P4)

Description

[Mihai Sucan [:msucan]]

Once the Source Editor component is mature enough we could make a new XUL widget that could wrap the Source Editor API. It would make the use of the Source Editor far easier across Firefox:

<xul:sourceEditor type="text/css" tabsize="4" contextmenu="foopopup_id">
body { background: red }
</xul:sourceEditor>

The element attributes would be shortcuts for the Source Editor configuration options. The DOM object of the element would provide an |editor| property referencing the SourceEditor instance object.

Comments, ideas and suggestions are very much welcome!

Comment 1

[Paul Rouget [:paul]]

Would be great!

(I would prefer <xul:codeeditor> instead of <xul:sourceEditor>)

Comment 2

[Rob Campbell [:rc] (:robcee)]

yeah, this would be huge being able to drop these widgets into... everything! +1!

(In reply to Paul Rouget [:paul] from comment #1)
> Would be great!
> 
> (I would prefer <xul:codeeditor> instead of <xul:sourceEditor>)

Why? I'm not a fan of the camelcase for the widget name, but otherwise it matches the directory name our code lives in.

Comment 3

[Cedric Vivier [:cedricv]]

(In reply to Mihai Sucan [:msucan] from comment #0)
> <xul:sourceEditor type="text/css" tabsize="4" contextmenu="foopopup_id">
> body { background: red }
> </xul:sourceEditor>
> 
> The element attributes would be shortcuts for the Source Editor
> configuration options. The DOM object of the element would provide an
> |editor| property referencing the SourceEditor instance object.

Awesome!

Would we still need to listen events via sourceEditorElement.editor.addEventListener("") or the SourceEditor would dispatch (non-bubbling) DOM events from the element?

I'm not sure if that would be a win in any way (so feel free to ditch that idea as insane!) except from a consistency and ease of use/documentation with various well known patterns.

Comment 4

[Mihai Sucan [:msucan]]

(In reply to Cedric Vivier [:cedricv] from comment #3)
> (In reply to Mihai Sucan [:msucan] from comment #0)
> > <xul:sourceEditor type="text/css" tabsize="4" contextmenu="foopopup_id">
> > body { background: red }
> > </xul:sourceEditor>
> > 
> > The element attributes would be shortcuts for the Source Editor
> > configuration options. The DOM object of the element would provide an
> > |editor| property referencing the SourceEditor instance object.
> 
> Awesome!
> 
> Would we still need to listen events via
> sourceEditorElement.editor.addEventListener("") or the SourceEditor would
> dispatch (non-bubbling) DOM events from the element?
> 
> I'm not sure if that would be a win in any way (so feel free to ditch that
> idea as insane!) except from a consistency and ease of use/documentation
> with various well known patterns.

That's a good question. At least for the purpose of this bug, the event listening mechanism won't change, so you'll have to do element.editor.addEventListener().

In a separate bug we might consider that possibility, but I am not sure if it makes sense. If you look at a <textarea> it also has the associated nsIEditor object in the .editor property. You have different event mechanisms in there for various purposes. They wouldn't make sense to be bubbling and generally behave like the usual DOM events. I'd say it's the same case with the Source Editor: these are "internal" editor events, not DOM events.

Comment 5

[Paul Rouget [:paul]]

(In reply to Rob Campbell [:rc] (robcee) from comment #2)
> yeah, this would be huge being able to drop these widgets into...
> everything! +1!
> 
> (In reply to Paul Rouget [:paul] from comment #1)
> > Would be great!
> > 
> > (I would prefer <xul:codeeditor> instead of <xul:sourceEditor>)
> 
> Why? I'm not a fan of the camelcase for the widget name, but otherwise it
> matches the directory name our code lives in.

(I don't think it should matter)

You don't always edit a 'source', but you always write some 'code'.

'Source' is the 'source of something'. Think about the scratchpad.
You're not editing to source of anything. You are just writing some
code. If you are editing the value of a CSS property, you're not editing
the source code, but just some code.

'Code' is more generic.

But I don't mind if we call that <sourceeditor> :)

Comment 6

[Rob Campbell [:rc] (:robcee)]

Moving to Source Editor component.

Filter on CHELICERAE.

Comment 7

[Mihai Sucan [:msucan]]

This is not something we would want to maintain and use in our codebase. Using the source editor as a XUL widget would make debugging the editor harder as I understand from more experienced developers who worked with XUL more than I did. Also XBL is under-defined and filled with unexpected behavior, making things buggier.