如何将xul元素倾斜到可变大小的居中元素的右侧？

Question

^{<edit>I decided to clean this question up a little bit, for easier reading.</edit>}

I have a centered <menulist> , of variable width ( maxwidth="200" ), next to which I want to lean a couple of <toolbarbuttons> in an <hbox> . These elements are part of a xul <page> element.

The following image shows what my current result is and what my actual goal is:

^{The vertical red line is merely drawn to indicate the center of the window.}

The current result was achieved with the following css and xul:

css:

page {
  -moz-appearance: none;
  background-color: #fff;
  text-align: center;
}

toolbarbutton {
  list-style-image: url( 'chrome://codifiertest/skin/icons.png' );
}
toolbarbutton .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

toolbarbutton.add {
  -moz-image-region: rect( 0px, 16px, 16px, 0px );
}

toolbarbutton.edit {
  -moz-image-region: rect( 0px, 32px, 16px, 16px );
}

toolbarbutton.delete {
  -moz-image-region: rect( 0px, 48px, 16px, 32px );
}

toolbarbutton.config {
  -moz-image-region: rect( 0px, 64px, 16px, 48px );
}

xul:

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="chrome://codifiertest/skin/index.css"?>

<!DOCTYPE page>

<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml">

  <div xmlns="http://www.w3.org/1999/xhtml">

    <h1>Title</h1>

    <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          pack="start"
          align="center">

      <stack maxwidth="200">
        <hbox pack="center" align="center">
          <menulist maxwidth="200">
            <menupopup>
              <menuitem label="Item" value=""/>
            </menupopup>
          </menulist>
        </hbox>
        <hbox left="200">
          <toolbarbutton class="add"/>
          <toolbarbutton class="edit"/>
          <toolbarbutton class="delete"/>
        </hbox>
      </stack>

    </vbox>

  </div>

</page>

icons.png:

---

^{You can also download this as an installable bootstrapped test example:}

^{http://extensions.codifier.nl/test/downloads/test@extensions.codifier.nl.xpi}

^{Be aware that the example xpi install will immediately open a new tab with the example xul file after install. And as a disclaimer : the file is downloadable from an insecure location (my own domain), so be sure you validate what you downloaded before you install (ie save the xpi to disk first, before installing).}

---

So, the goal is to always have the <menulist> horizontally centered to the page and the <hbox> with <toolbarbutton> s lean to right side of the <menulist> , no matter its width.

Is this doable with xul and perhaps some additional css?

I've actually gotten it to work by mixing in more (x)html:

css:

#container {
  position: relative;
}

#container > span {
  position: absolute;
  left: 100%;
}

altered xul/(x)html:

<html:div id="container"> <!-- no more xul:stack -->
  <hbox pack="center" align="center">
    <menulist maxwidth="200">
      <menupopup>
        <menuitem label="Item" value=""/>
      </menupopup>
    </menulist>
  </hbox>
  <html:span> <!-- additional span -->
    <hbox>
      <toolbarbutton class="add"/>
      <toolbarbutton class="edit"/>
      <toolbarbutton class="delete"/>
    </hbox>
  </html:span>
</html:div>

... but I'd really rather want to see a pure xul solution though, if anyone knows one.

Thank you, in advance, for looking into this.

Answer 1

I think this should be the solution:

page.xul

<?xml-stylesheet type="text/css" href="page.css"?>
<!DOCTYPE page>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
      xmlns:html="http://www.w3.org/1999/xhtml">
    <vbox>
        <hbox>
            <hbox>
                <menulist>
                    <menupopup>
                        <menuitem label="Item" value=""/>
                    </menupopup>
                </menulist>
            </hbox>
            <hbox>
                <button class="add"/>
                <button class="edit"/>
                <button class="delete"/>
            </hbox>
        </hbox>
        <hbox>
            <hbox>
                <menulist>
                    <menupopup>
                        <menuitem label="Item" value=""/>
                    </menupopup>
                </menulist>
            </hbox>
            <hbox>
                <button class="add"/>
                <button class="edit"/>
                <button class="delete"/>
            </hbox>
        </hbox>
    </vbox>
</page>

page.css:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
page {
    -moz-appearance: none;
    background-color: #fff;
    text-align: center;
    background-image: url( 'dot.png' );
    background-position: top center;
    background-repeat: repeat-y;
}
page > vbox {
    -moz-box-flex: 1;
}
page > vbox {
    padding-left: 90px;
    -moz-box-align: center;
    -moz-box-pack: start;
}
.buttonsgroup {
    -moz-appearance: toolbox;
}
button {
    -moz-appearance: toolbarbutton;
    list-style-image: url( 'icons.png' );
    min-width: 27px !important; 
    width: 27px;
    height: 16px;
    margin: 0px 0px 0px 0px;
}
button.add {
  -moz-image-region: rect( 0px, 16px, 16px, 0px );
}
button.edit {
  -moz-image-region: rect( 0px, 32px, 16px, 16px );
}
button.delete {
  -moz-image-region: rect( 0px, 48px, 16px, 32px );
}
button.config {
  -moz-image-region: rect( 0px, 64px, 16px, 48px );
}

Here is how it looks (on FF 36, Kubuntu 15.04):

Hope that helps.

Answer 2

There should be an answer that states the actual solution to the problem rather than it only being in the comments. This answer is based on information from Ondřej Doněk's .xpi which was placed as downloadable in a comment to the answer that user provided .

The easy solution:
All you have to do to make the original code work is change:

<hbox left="200">

to

<hbox right="-66">

MDN says that for elements immediately within XUL <stack> elements, the attribute right :

specifies the pixel position of the right edge of the element relative to the right edge of the stack.

Based on the fact that using a negative number such as right="-66" works, we can deduce that what it is actually telling the stack to do is: enlarge such that the right edge of the <stack> is 66 pixels to the right of where it was and place the element with its right edge at the right edge of the stack.

If Ondřej Doněk's answer is updated to include information about using a negative number for the right attribute, then this community wiki answer can be deleted.

Answer 3

Your CSS looks good. You can solve this with pure attributes of XUL. You can use: pack, orient, align, flex ...

Try play with the xul-periodic-table example:

https://github.com/alijc/xul-periodic-table/blob/master/layout.xul