Missing unified back/forward button with custom theme Topic is solved

[xtal256]

Hi,

After upgrading to v27, my custom theme no longer shows the back and forward buttons. They were previously shown to the far left of the main toolbar (#nav-bar), with reload and stop next to them. Now only reload and stop are visible.

The elements are still there, as seen in DOM Inspector. The #unified-back-forward-button element is there under #nav-bar, and under it are the two toolbarbutton elements.
However, they do not have an xul:image or xul:label element like the other toolbar buttons. I believe this is why they are not visible, as without an image with a fixed size of 24x24 pixels, the entire button has 0x0 size.

Apart from the missing elements, everything else about the buttons is the same as the default theme. What could be causing this missing element?

[Lootyhoof]

Can't confirm here using a custom theme (specifically Moonfox3 - http://addons.palemoon.org/themes/moonfox3 ). The icons show and have the correct attributes.





What CSS are you using for this?

[xtal256]

What CSS are you using for this?

Code: Select all

/* restore the 3.x dropmarker in Firefox >= 4.0 */
#tab-view-deck #unified-back-forward-button {
    -moz-binding: url("chrome://global/skin/globalBindings.xml#restore-back-forward-dropmarker");
}

Removing that made them show again. However, there is no longer a drop-down button to show back/forward history.

I think that CSS and/or the XML was part of an add-on I once installed to, as the name suggests, restore the back/forward drop-down. I don't see any such thing in the Add-on Manager, so it was possibly a customisation I made directly to the code.

[Lootyhoof]

You should be able to restore the dropmarker using XBL bindings within the theme itself. This is the binding used in Moonfox3 (and others) to add the dropmarker (add to a .xml file; I chose the already-existing globalBindings.xml personally):

Code: Select all

<binding id="restore-back-forward-dropmarker">
  <content>
     <children/>
      <xul:box id="dropmarker-observer1">
      <xul:observes element="back-button" attribute="disabled"/>
        <xul:box id="dropmarker-observer2">
        <xul:observes element="forward-button" attribute="disabled"/>
          <xul:toolbarbutton
          id="back-forward-dropmarker"
          type="menu">
            <xul:menupopup
            onpopupshowing="return FillHistoryMenu(event.target);"
            oncommand="gotoHistoryIndex(event); event.stopPropagation();"
            onclick="checkForMiddleClick(this, event);"
            position="after_start"/>
          </xul:toolbarbutton>
        </xul:box>
      </xul:box> 
    </content>
</binding>

In browser.css you should be able to apply the binding, making sure to remove any native dropmarkers which may appear:

Code: Select all

#tab-view-deck #unified-back-forward-button {
  -moz-binding: url(chrome://global/skin/globalBindings.xml#restore-back-forward-dropmarker);
}

#tab-view-deck #unified-back-forward-button dropmarker {
  display: none !important;
}

Then, you can style it:

Code: Select all

toolbar[mode="icons"] #back-forward-dropmarker {
  -moz-appearance: none;
  padding: 0;
  -moz-padding-end: 2px;
  border: none;
}
 
toolbar[mode="icons"] #back-forward-dropmarker > image {
  display: -moz-box;
  margin: 0;
}
 
toolbar[mode="icons"] #back-forward-dropmarker > dropmarker {
  display: none;
}
 
toolbar[iconsize="large"][mode="icons"] #back-forward-dropmarker {
  -moz-image-region: rect(0px 0px 0px 0px); /* Use the relevant region in your image files */
}

toolbar[iconsize="small"][mode="icons"] #back-forward-dropmarker {
  -moz-image-region: rect(0px 0px 0px 0px); /* More placeholder values */
}

It sounds like you had the first step already. Do you know if the rest were the same (or similar)?

[xtal256]

Thanks, I'll try that.
I think perhaps that XBL binding was done to the base code, as I cannot find it in my extension code. Or perhaps I accidentally overwrote it when bringing some of the new Pale Moon theme changes into my own theme.

Edit: Yep, that worked! The drop-down arrow is missing, but I'm sure that's just a simple CSS change.