如何访问正确的XUL标度更改值

Question

I'm building a 'classic' Firefox XUL overlay extension. In this extension I want to include a XUL scale element .

I'm trying to read out the updated value of the scale element, if the user changed the position of the slider. However, I can't get the updated value — the value keeps staying at the starting position.

^{<edit>
One important thing to note though is that you need the Classic Theme Restorer add-on , and activate View > Toolbars > Add-on Bar (for Firefox 29+), to get my test case to show up in the status bar element, because that add-on's Add-on Bar restores the status bar.
</edit>}

The contents of slider/chrome/content/slider.xul are:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="slider.css"?>
<overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="slider.js"/>
  <statusbar id="status-bar">
    <scale id="slider" width="200" movetoclick="true" increment="10"/>
  </statusbar>
</overlay>

The contents of slider/chrome/content/slider.js are:

var Logger = {
  log: Application.console.log
}

var Slider = {
  onChange: function( event ) {
    // keeps giving me 0, in stead of the updated value
    Logger.log( document.getElementById( 'slider' ).value );
  }
}

var onWindowLoad = function( event ) {
  window.removeEventListener( 'load', onWindowLoad, false );

  var slider = document.getElementById( 'slider' );
  slider.addEventListener( 'change', Slider.onChange, false );
}

window.addEventListener( 'load', onWindowLoad, false );

It appears that the scale element behaves rather erratic, because I've also tried adding a XUL textbox element to the xul overlay, like so:

...
<scale id="slider" width="200" movetoclick="true" increment="10"/>
<textbox id="slider-value" readonly="true" observes="slider"/>
...

In this case the textbox updates appropriately and I can use it as a proxy to read out the scale value by changing the relevant javascript, to:

// changed 'slider' to 'slider-value'
Logger.log( document.getElementById( 'slider-value' ).value );

However, when I add min , max (and possibly other) attributes to the scale element the textbox element won't update anymore either and keeps staying at the min value, all of a sudden.

I've also tried a couple of variations of accessing data from the onchange event that gets passed to the event-handler, like:

Logger.log( event.value );
Logger.log( event.target.value );
Logger.log( event.target._sliderElement.value );
Logger.log( event.currentTarget.value );
... etc.

And on inspecting various properties of the event, I also noticed that the _userChanged property stays false , when I expect this to be true , since the scale was not altered programmatically, but by the user.

Are these bugs in the scale element? Or am I missing some vital information here, to read out the correct values?

---

^{I'm testing the extension in an instance of Firefox with -no-remote -P development arguments with an extension proxy file , on Mac OS X 10.6.8 and Xubuntu 14.04 (although I doubt that this is relevant).}

---

<edit>
I did some more testing, after reading Noitidart's answer , and found out that overlaying the scale element in the status bar element appears to be the cause of my problems. All works as intended now, if I overlay my scale and observing textbox elements directly in either the Add-on Toolbar or the Additional Toolbar of the Classic Theme Restorer add-on, like so:

 <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="chrome://global/skin/"?> <?xml-stylesheet type="text/css" href="slider.css"?> <overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="slider.js"/> <toolbar id="ctraddon_addon-bar"> <!-- or: id="ctraddon_extra-bar" --> <scale id="slider-simple" class="slider" movetoclick="true" increment="10"/> <textbox id="slider-simple-textbox" class="textbox" readonly="true" observes="slider-simple"/> <scale id="slider-complex" class="slider" movetoclick="true" increment="10" min="20" max="80"/> <textbox id="slider-complex-textbox" class="textbox" readonly="true" observes="slider-complex"/> </toolbar> </overlay> 

</edit>

Answer 1

Ok I was able to fix the logging to the console. It properly gets the value. I had to use .getAttribute('value') instead of .value .

var Slider = {
  onChange: function( event ) {
    // read the slider value
    Logger.log( event.target.id + '.value = ' + event.target.getAttribute('value') );

    // try to read the associated textbox value (as a proxy to the slider value)
    var textBox = document.getElementById( event.target.id + '-textbox' );
    Logger.log( textBox.id + '.value = ' + textBox.getAttribute('value') );
  }
}

But now the weird thing is, the slider-complex textbox doesnt update even though the value is updating.

I don't know man I looked up on mdn the observes attribute and can't find any information on it.

<scale id="slider-simple" class="slider" movetoclick="true" increment="10"/>
<textbox id="slider-simple-textbox" class="textbox" readonly="true" observes="slider-simple"/>

<scale id="slider-complex" class="slider" movetoclick="true" increment="10" min="20" max="80"/>
<textbox id="slider-complex-textbox" class="textbox" readonly="true" observes="slider-complex"/>

that observes="slider-complex" is a new one on me. never knew about that, can you explain it to me, where did you find this? ill update mdn and maybe i can help you more.

Weird thing is though, that slider-simple works fine in console logging with .value and also the textbox updates appropriately. real weird. but slider-simple console logging also works with .getAttribute('value') so we just need to figure out whtats up with complex one. if i remove the min and max attributes from complex-slider it works fine but i cant explain this, something weird is going on.

The MDN slider page says this for the value ATTRIBUTE: https://developer.mozilla.org/en-US/docs/XUL/Attribute/value

For those elements, setAttribute("value", myValue) and getAttribute("value") do not access or affect the contents displayed to the user.

it has a value PROPERTY which is used for displaying the value, in the text box.