XUL: checkbox crop - how to use it? (can't get it to work)

Talk about add-ons and extension development.
Post Reply
User avatar
Vano
Posts: 403
Joined: December 26th, 2007, 8:21 pm

XUL: checkbox crop - how to use it? (can't get it to work)

Post by Vano »

Hello.

Unless I'm missing something, I can't get label of a checkbox element to crop, so it would fit in it's parent's box boundaries and show ellipses at the crop place.

Code: Select all

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
  <vbox style="width: 15em;">
    <hbox>
      <checkbox crop="center" style="max-width: 15em;" label="1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
    </hbox>
  </vbox>
</dialog>
Any ideas?

Thank you.
lithopsian
Posts: 3664
Joined: September 15th, 2010, 9:03 am

Re: XUL: checkbox crop - how to use it? (can't get it to wor

Post by lithopsian »

Try using a separate label with the crop and maxwidth attributes. The label in a checkbox element isn't really a label and doesn't respond properly to crop and maxwidth attributes on the checkbox, whatever the documentation might say.
User avatar
Vano
Posts: 403
Joined: December 26th, 2007, 8:21 pm

Re: XUL: checkbox crop - how to use it? (can't get it to wor

Post by Vano »

I've tried that, the crop works, however it destroys the checkbox itself, as in it's no longer uses xbl structure:

Code: Select all

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
  <vbox style="width: 15em;">
    <hbox>
      <checkbox/>
      <checkbox>
        <label style="max-width: 15em;" crop="center" value="1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
      </checkbox>
    </hbox>
  </vbox>
</dialog>
Image
User avatar
Vano
Posts: 403
Joined: December 26th, 2007, 8:21 pm

Re: XUL: checkbox crop - how to use it? (can't get it to wor

Post by Vano »

I've checked all FF versions since 4.0 and all have this problem.
The problem is that crop only applies to value attribute of a label, not text child node. checkbox.xml however adds text node to the label
So the fix is to change in checkbox.xml:

Code: Select all

        <xul:label class="checkbox-label" xbl:inherits="xbl:text=label,accesskey,crop" flex="1"/>
with:

Code: Select all

        <xul:label class="checkbox-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>
Since this would require recompiling the browser (or recreating omni.ja) for extension developers we can use a custom "fixed" checkbox-fixed.xml:

Code: Select all

<?xml version="1.0"?>

<bindings id="checkboxBindings"
	 xmlns="http://www.mozilla.org/xbl"
	 xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	 xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="checkbox-fixed" role="xul:checkbox"
    extends="chrome://global/content/bindings/checkbox.xml#checkbox-baseline">
    <resources>
      <stylesheet src="chrome://global/skin/checkbox.css"/>
    </resources>
    <content>
      <xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
      <xul:hbox class="checkbox-label-box" flex="1">
        <xul:image class="checkbox-icon" xbl:inherits="src"/>
        <xul:label class="checkbox-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>
      </xul:hbox>
    </content>
  </binding>
</bindings>
In .css stylesheet use:

Code: Select all

checkbox
{
  -moz-binding: url('chrome://__replace__with__your__chrome__uri__/checkbox-fixed.xml#checkbox-fixed');
}

My original example with the xbl fix:

Code: Select all

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet type="text/css" href="data:text/css,
checkbox
{
  -moz-binding: url('chrome://__replace__with__your__chrome__uri__/checkbox-fixed.xml#checkbox-fixed');
}
" ?>

<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
  <vbox style="width: 15em;">
    <hbox>
      <checkbox crop="center" style="max-width: 15em;" label="1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
    </hbox>
  </vbox>
</dialog>
lithopsian
Posts: 3664
Joined: September 15th, 2010, 9:03 am

Re: XUL: checkbox crop - how to use it? (can't get it to wor

Post by lithopsian »

Don't put the label inside the checkbox, just next to it. Probably you'll want them both aligned inside an hbox but depending on your layout it may not be necessary. Focussing and accesskeys can be made to access the checkbox itself using the control attribute.

The checkbox behaviour may simply be a bug. The crop attribute is propagated onto the anonymous label element, so obviously it was intended to work, but for other reasons it won't crop. Maybe it worked once but hasn't for a very long time. Perhaps if you raise a bug report, the binding will be updated. They might consider it too dangerous though, or just not care. You could extend the binding yourself (no compilation necessary), just for your own checkboxes, but it is simpler and safer just to use a separate label.
Post Reply