How do I access the correct XUL scale changed value



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.


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://ift.tt/ZJ3Hg8">
<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).

No comments:

Post a Comment