xml - 如何访问正确的 XUL 缩放更改值

Question

我正在构建一个“经典的”Firefox XUL 覆盖扩展。在此扩展中，我想包含一个 XUL scale element .

我正在尝试读取 scale 的更新值元素，如果用户改变了 slider 的位置。但是，我无法获取更新后的值——该值一直停留在起始位置。

^{<编辑>
不过需要注意的一件重要事情是您需要 Classic Theme Restorer add-on , 并激活 View > Toolbars > Add-on Bar (对于 Firefox 29+)，让我的测试用例显示在状态栏元素中，因为该插件的插件栏恢复了状态栏。}

slider/chrome/content/slider.xul的内容是:

<?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>

slider/chrome/content/slider.js的内容是:

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 );

看来 scale元素表现相当不稳定，因为我也尝试添加一个 XUL textbox element到 xul 覆盖，像这样:

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

在本例中为 textbox适当更新，我可以用它作为代理来读出 scale通过将相关的 javascript 更改为以下值:

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

但是，当我添加 min , max (可能还有其他)属性到 scale元素textbox element 也不会再更新，一直停留在min值(value)，突然之间。

我还尝试了几种从 onchange 访问数据的变体传递给事件处理程序的事件，例如:

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

在检查事件的各种属性时，我还注意到 _userChanged属性(property)入住false ，当我期望这是 true , 自 scale不是以编程方式更改的，而是由用户更改的。

这些错误是在 scale 中吗？元素？还是我在这里遗漏了一些重要信息，无法读出正确的值？

---

^{我正在使用 -no-remote -P development 在 Firefox 实例中测试扩展带有 extension proxy file 的参数，在 Mac OS X 10.6.8 和 Xubuntu 14.04 上(尽管我怀疑这是否相关)。}

---

<编辑>
阅读 Noitidart's answer 后，我做了更多测试, 并发现覆盖 scale状态栏元素中的元素似乎是我出现问题的原因。如果我覆盖我的 scale，现在所有工作都按预期进行并观察 textbox Classic Theme Restorer 附加组件的附加工具栏或附加工具栏中直接添加元素，如下所示:

<?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>

Answer 1

好的，我能够将日志记录修复到控制台。它正确地获得了值(value)。我不得不使用 .getAttribute('value') 而不是 .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') );
  }
}

但现在奇怪的是，即使值正在更新，slider-complex 文本框也不会更新。

我不知道伙计，我在 mdn 上查找了 observes 属性，但找不到任何关于它的信息。

<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"/>

observes="slider-complex" 对我来说是个新事物。从来不知道这个，你能给我解释一下吗，你在哪里找到的？我更新了 mdn，也许我可以帮助你更多。

但奇怪的是，slider-simple 在使用 .value 的控制台日志记录中工作正常，并且文本框也会适当更新。真奇怪。但是 slider-simple 控制台日志记录也适用于 .getAttribute('value') 所以我们只需要弄清楚复杂的问题。如果我从 complex-slider 中删除 min 和 max 属性，它工作正常但我无法解释这一点，一些奇怪的事情正在发生。

MDN slider 页面为值属性说明了这一点: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.

它有一个值 PROPERTY，用于在文本框中显示该值。