"XBL + dynamic DOM changes" problem

Pendyshchuk Maxym

unread,

Jan 5, 2010, 9:43:03 AM1/5/10

to

hello!

I have the following problem: I've bound XBL "rule" via css, but when
I change the content of DOM element (whom XBL was bound) nothing is
changed on screen.... Take a look at the simplified example:

html file:

<html>
<style>
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
-moz-binding: url(ellipsis.xml#ellipsis);
white-space: nowrap;
width: 40px;
height: 20px;
border: 1px solid red;
}
</style>

<body>
<div id="long-text" class="ellipsis">longgggggggggggggg</div>
<input type="button" onclick="change();" value="change text in div"></
button>
</body>
</html>

XBL:
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:description crop="end"
xbl:inherits="value=xbl:text"><children/></xul:description>
</content>
</binding>
</bindings>

open html file and press a button "change text in div". At the
beginning you see "lon...", after pressing I expect to see "short",
but I don't see any changes. fun that innerHTML is really changed, so
it works but looks like XBL is not fired or... how to deal with that,
what I've missed???

thank you!

Boris Zbarsky

unread,

Jan 5, 2010, 10:00:27 AM1/5/10

to

On 1/5/10 9:43 AM, Pendyshchuk Maxym wrote:
> open html file and press a button "change text in div". At the
> beginning you see "lon...", after pressing I expect to see "short",
> but I don't see any changes. fun that innerHTML is really changed, so
> it works but looks like XBL is not fired or... how to deal with that,
> what I've missed???

Nothing that I see. I don't see any provisions in the xbl code for
updating things when xbl:text is used on the RHS of an xbl:inherits and
the text is changed.

-Boris

Pendyshchuk Maxym

unread,

Jan 5, 2010, 3:32:27 PM1/5/10

to

Boris, thanks for replying!

As I understand, the thing I wanna implement is impossible?
Another way, if I change text, can I fire any event, or set anything
via JavaScript to let XBL change text too?

What I need is just to emulate "text-overflow" css property in
FireFox. At the beginning the approach using binding looked great, but
now I see this pitfall with dynamic changes...

Maxym

Pendyshchuk Maxym

unread,

Jan 5, 2010, 4:02:25 PM1/5/10

to

I've found the solution!!! :)) at least the following XBL file helps:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://

www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>

<xul:label crop="end" style="width: 100%;"><children /></
xul:label>
</content>
<implementation>
<method name="setTextContentToValue">
<body><![CDATA[
var eDescription = document. getAnonymousNodes(this)[0];
if (eDescription) eDescription. value = this.textContent;
// ]]></body>
</method>
<constructor>setTextContentToValue();</constructor>
</implementation>
<handlers id="none">
<handler event="DOMSubtreeModified">setTextContentToValue();</
handler>
</handlers>
</binding>
</bindings>

the source of solution (in Russian, but anyway xbl/html code is
enought to experiment):
http://www.leechy.ru/howto/text-overflow/

regards,
Maxym

On 5 Січ, 17:00, Boris Zbarsky <bzbar...@mit.edu> wrote:

Boris Zbarsky

unread,

Jan 5, 2010, 4:38:25 PM1/5/10

to

On 1/5/10 3:32 PM, Pendyshchuk Maxym wrote:
> As I understand, the thing I wanna implement is impossible?

Using xbl:inherits and without fixing the underlying XBL bug, yes.

-Boris

Pendyshchuk Maxym

unread,

Jan 5, 2010, 4:46:11 PM1/5/10

to

I see... and one "minor" question.. is here any way how to allow text
selection? I tried the following:

....
<xul:label anonid="label" ...
....

and in related css I defined:

[anonid="label"] {
-moz-user-select: text;
}

but it does not work. Is the idea of processed text selecting utopia?

thank you,
Maxym