Open
Bug 267656
Opened 21 years ago
Updated 3 years ago
Add style hints to synthetic document used by nsMediaDocument & nsImageDocument
Categories
(Core :: Layout: Images, Video, and HTML Frames, defect)
Tracking
()
NEW
People
(Reporter: adamlock, Unassigned)
Details
Attachments
(1 file)
|
1.96 KB,
patch
|
Details | Diff | Splinter Review |
Documents of type image/png, image/gif etc. are handled by the nsImageDocument
class.
The nsImageDocument class (& baseclass nsMediaDocument) should insert some Moz
specific attributes into the 'synthetic' document that they use to house image
content to act as CSS hints.
At present the synthetic document is created like this:
<html>
<body>
<img src="foo">
</body>
</html>
There is no way to distinguish the Moz generated doc above in CSS from ordinary
content. I'm proposing it should be like this:
<html>
<body _moz_media="true">
<div _moz_media_content="true">
<img src="foo" _moz_img="true">
</div>
</body>
</html>
I can submit a patch to do this.
With the extra div and hint attributes, we can create style rules that affect
how the content is rendered in interesting ways.
For example, I could edit html.css or userContent.css and add rules to
horizontally & vertically center the image (rather than displaying it in the top
left corner).
body[_moz_media=true] {
display: table;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div[_moz_media_content=true] {
display: table-cell;
width: 100%;
text-align: center;
vertical-align: middle;
}
img[_moz_img=true] {
vertical-align:middle;
}
I've used arbitrary attributes beginning with _moz in the examples. There is
precedent for this, e.g.
http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/html.css#89
I would use namespaces, if one already existed for Moz specific attributes but I
didn't see anything applicable.
|
||
Comment 1•21 years ago
|
||
Just make up a new one.
I don't follow. Basically I want to be able to define a style that *only* gets
applied when Moz displays an URL such as:
https://bugzilla.mozilla.org/mozilla-banner.gif
I want to center image URLs rather than show them in the top left. How do I do
that without modifying the existing HTML that nsImageDocument creates? I'm
talking client side here - I *can't* inspect the mime type or anything like that.
I can't center an image unless the IMG tag (& parents) have some unique
attribute, id or class that allows me to create a rule that only applies to
them. Otherwise that same rule will interfere with every other HTML page in the
process.
The patch is a simplified version of what I described earlier. In the end, I
only needed one extra attribute on the BODY tag (_moz_media). The patch also
inserts a DIV element between the IMG element and the BODY in nsImageElement.
With this change it's possible to center image documents with some
userContent.css like this:
body[_moz_media=true] {
display: table;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body[_moz_media=true] > div {
display: table-cell;
width: 100%;
text-align: center;
vertical-align: middle;
}
body[_moz_media=true] > div > img {
vertical-align:middle;
}
|
|
||
Comment 4•21 years ago
|
||
I meant, make up a new namespace, instead of using attributes.
I don't mind creating a name space if you think I should. Something like
"http://www.mozilla.org/gecko/internal" for example?
It looks fairly straightforward to go into nsNameSpaceManager.cpp/h and create a
new Moz internal namespace.
I just don't want to open a whole can of worms with this thing, e.g. concerning
the existing -moz- CSS rules and elsewhere. I'd be happy to change my patch to
create and use a new namespace but it would be up to others to update their code
to use it too.
|
||
Comment 6•21 years ago
|
||
Ian, this is a tag-soup document, not an XML one. So new namespace isn't so
easy to do...
Does the document even need to be HTML at all, except for the img / object /
etc. element?
|
|
||
Comment 8•21 years ago
|
||
What dbaron said.
Well it does HTML at the moment. My intent is not to gut the existing
functionality but add a simple hint to enable altering how the image is
displayed using some CSS.
We also have other bugs that require that we switch to something other than HTML.
Assignee: jdunn → nobody
|
||
Updated•7 years ago
|
Product: Core → Core Graveyard
|
|
||
Updated•7 years ago
|
Product: Core Graveyard → Core
|
|
||
Updated•3 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•