16255 - allow class assignment to elements : CSS in Composer step 4

Status: NEW

(SeaMonkey :: Composer, enhancement)

Description

[webmas7]

The editor needs to be able to let a person select a "box" or some content and
apply a class to it, by right clicking on it and selecting from the menu.

Also, if you could somehow make it easy to add in <div> and <span> exactly
where you want them, that would be cool too.

Thanks. Keep up the good work!

--Eric

Comment 1

[Matthew Tuck [:CodeMachine]]

Yeah, and ID support too of course.

Whether boxes should be split into spans implicitly or explicitly is an
important question.  If implicitly, you could apply a class to a selection.  If
not, you'd need some concept of box selection, which the editor doesn't
currently have (I think).  Perhaps it should just take the smallest box that
surrounds the selection.

Comment 2

[buster]

This isn't in our feature list for the first release, but it's a great
suggestion.  Ben Goodger <[e-mail]> is working on some style editing
UI.  I don't know how far he's gotten yet.  Adding Ben to the cc list, and
Charley.

Comment 3

[Matthew Tuck [:CodeMachine]]

It might be worthwhile pointing out that spans and divs are hard to support
fully in this sort of editor, since they are invisible.  Easy editing mode might
however use some sort of marker for start and end of divs and spans (generated
content?).

A page DOM editor (bug #14527) and page source editor (bug #14526) would handle
these more easily, and they could be added as mode tabs to the existing tabbed
layout at the bottom.

Comment 4

[Charles Manske]

We aren't going to have source and node editing done for 5.0 unless someone
outside NS does it. Given that, the best solution I can think of is to make
<span> and <div> tags visible with an image icon, just as we do for named
anchors. Thus the user can click on the image and edit it's properties via
Ben's "Advance Edit" dialog. To make this complete, it would be simple to add
an "Insert Span/Div" item to the insert menu. It would behave just like the
Insert Link action when there is a selection, which is to insert the span or
div tag as a parent (or "around") of the selection. When that insert item
is triggered, we would simply bring up the existing Advanced Edit dialog
so user could add any HTML, CSS, and JS attributes to the <span> or <div> tag.

Comment 5

[Matthew Tuck [:CodeMachine]]

Sounds good.

Comment 6

[Matthew Tuck [:CodeMachine]]

*** Bug 15000 has been marked as a duplicate of this bug. ***

Comment 7

[buster]

Perfect candiate task for somebody who wants to contribute.  Marking HELP
WANTED.

Comment 8

[Matthew Tuck [:CodeMachine]]

Help wanted bugs should be reopened and assigned to [e-mail], else
some queries might miss them.

Comment 9

[rubydoo123]

actually, this needs to be reopened and left in the future bucket

Comment 10

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Reassignment.

Comment 11

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

This is a RFE for the 4th step in the CSSization of Composer [1].
Its purpose is the addition of a UI mechanism allowing user to view/assign/remove
class to the selected element(s). I think it is quite easy to do.

I also think that it makes more sense to add 4th step before the 3rd (manipulation
of embedded stylesheets) from a user's point of view.

[1] http://www.mozilla.org/editor/adding-css-to-editor.html

Accepting Bug :-) (does not mean I'm going to work on it right now tho)

Comment 12

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

*** Bug 104772 has been marked as a duplicate of this bug. ***

Comment 13

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Attachment: snapshot of first implementation (not a fake, of course), and that's a very simple patch

Comment 14

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Attachment: work-in-progress code #1

Comment 15

[Christopher Aillon (sabbatical, not receiving bugmail)]

*** Bug 119108 has been marked as a duplicate of this bug. ***

Comment 16

[Charles Manske]

Comment on attachment 56707 [details] [diff] [review]
work-in-progress code #1

r=cmanske on all editor code

Comment 17

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Attachment: work-in-progress code #2

Final patch should be available for review tomorrow.
Still cleanup to do on the one I am attaching here.

Comment 18

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Attachment: patch v1.0

patch ready for reviews...

Comment 19

[Kathleen :Brade]

there should be a try/catch or if so no error is thrown here if menuItem isn't
allocated:
+              menuItem = document.createElement("menuitem");
+              menuItem.setAttribute("type",  "checkbox");

Charley should review the menu enable/disable stuff; I think there is a function
to use.

Comment 20

[Charles Manske]

Comment on attachment 69645 [details] [diff] [review]
patch v1.0

Kathy is right, you should use	SetElementEnabled(element, doEnable) when you
have the element. That and other useful helpers are in editorUtilities.js
The rest of the UI stuff looks good, though I wish you'd not put "{" at end of
a line. We prefer 
if (foo)
{
}
style.

Comment 21

[rubydoo123]

removing myself from the cc list

Comment 22

[Daniel Glazman (:glazou) (not active in Mozilla any more)]

Comment on attachment 69645 [details] [diff] [review]
patch v1.0

back in my top priority list. working on it.

Comment 23

[Serge Gautherie (:sgautherie)]

Daniel,
Are you still working on this ?