Restoring the back-forward-dropmarker in 4.0.

[patrickjdempsey]

This is quite a bit simpler than restoring the feed button. This will restore the dropmarker and it's basic functions.

Just drop this into your globalBindings.xml:

Code: Select all

  <binding id="restore-back-forward-dropmarker">
    <content>
      <children/>
      <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>
    </content>
  </binding>

And call it from browser.css:

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

It will lack the tooltip saying "Recent Pages" and will not go into a disabled state when both the Back and Forward buttons are disabled, but other than that it's identical functionality.

Edit:

* If you want a slightly more complicated binding that allows the dropmarker to go into disabled mode:
viewtopic.php?p=10061537#p10061537

** If you are seeing double dropmarkers instead of one:
viewtopic.php?p=10063619#p10063619

[stratareloaded]

That's awesome! Thank you!

[patrickjdempsey]

You are welcome!

[CatThief]

Brilliant!

[LoudNoise]

I cannot to it tonight but if you folks want to make a Meta "Restoring..." thread with links to this stuff I will be more then happy to make it a locked sticky if that would help. You would just need to ask one of us to open it if something needed to be added.

[CatThief]

will not go into a disabled state when both the Back and Forward buttons are disabled

Patrick, I didn't play around with it yet but wouldn't including something like this inside the binding work to display the disabled state?

Code: Select all

<xul:observes element="Browser:Back" attribute="disabled"/>
<xul:observes element="Browser:Forward" attribute="disabled"/>

[patrickjdempsey]

@LoudNoise, I think we probably are going to need a meta thread dealing with all the little bits and pieces of Firefox 4.0 theming, not just restoring stuff. I was gonna wait till b7 lands, but we can go ahead and start one now. Frank Lion had started one before his hiatus but that was when it was still called 3.7.

@CatThief, I think the theme I've been testing in doesn't have a clear enough distinction between disabled and active states so I'll try later and see if we can get something better there. If you confirm that that bit of code works before I get a chance to play with it, just let me know and I'll add it in.

[CatThief]

Well it sorta works. Is there a way to define the two observers as one unit so that an action takes place when both conditions are true, not just one or the other?

What I mean would be similar to this in xul:

Code: Select all

document.getElementById('Browser:Back').hasAttribute('disabled') &&
document.getElementById('Browser:Forward').hasAttribute('disabled')

Note the "&&"

[patrickjdempsey]

This is where my understanding of bindings and observers really breaks down. I think having two observers monitoring "disabled" means that whenever *either* one is disabled then the dropmarker will be as well. How about this? Instead of *really* making the dropmarker disabled we just make it *appear* disabled?

The following is from the 3.6 default theme with modifications:

Code: Select all

/* fake disabled dropmarker for Firefox 4.0 */
toolbar[iconsize="large"][mode="icons"] #back-button[disabled="true"] 
+ #forward-button[disabled="true"] + #back-forward-dropmarker,
/* real disabled dropmarker for Firefox 3.x */
toolbar[iconsize="large"][mode="icons"] #back-forward-dropmarker[disabled="true"] {
  -moz-image-region: rect(71px 438px 99px 422px); }

[CatThief]

How about this? Instead of *really* making the dropmarker disabled we just make it *appear* disabled?

The following is from the 3.6 default theme with modifications:

Code: Select all

/* fake disabled dropmarker for Firefox 4.0 */
toolbar[iconsize="large"][mode="icons"] #back-button[disabled="true"] 
+ #forward-button[disabled="true"] + #back-forward-dropmarker,
/* real disabled dropmarker for Firefox 3.x */
toolbar[iconsize="large"][mode="icons"] #back-forward-dropmarker[disabled="true"] {
  -moz-image-region: rect(71px 438px 99px 422px); }

Using the "+" selector should work, but yet I can't seem to get the image to change. I even tried changing things around like this:

Code: Select all

#tab-view-deck #unified-back-forward-button > #back-button[disabled="true"] + #forward-button[disabled="true"] + #back-forward-dropmarker > .toolbarbutton-menu-dropmarker {
  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.png") !important;
}

[patrickjdempsey]

What happens if you use the tilde instead of the plus? That's a little less picky and should get the job done. Also, this style should work for both 3.6 and 4.0 without the need of keeping the old dropmarker[disabled] stuff, since it basically does the same thing.

Code: Select all

#back-button[disabled="true"] ~ #forward-button[disabled="true"] ~ #back-forward-dropmarker { background-color: red !important;}

[couldabeen]

OK, my 4.x profile doesn't have the extensions string that the globalBindings.xml, and browser.css files are included in. Do I copy it from one of the 3.x versions, or put those scripts bits somewhere else?

This is the search results string for the globalBindings.xml file >>>{D46E8522-6E86-44b1-A622-58C0668AD78E}\chrome\global
browser.css is in the same string with a 'browser' ending after the /chrome.

[CatThief]

What happens if you use the tilde instead of the plus?

Still no change. If you got this working on your end there must be something in my theme code somewhere else that is taking control. I'll have to poke around. Darn, this might take a while.

[patrickjdempsey]

couldabeen, this is specifically for theme authors building full themes. I'm not sure if there is a way to apply bindings locally through userChrome.css as I've never tried.

Well, unfortunately the Addons Manager appears to be completely broken on the latest nightly (with a CLEAN profile). I cannot install themes or extensions locally or from AMO.

[patrickjdempsey]

Hmmm... my Addons Manager is working now. I don't know what's going on with that thing but it's been very tempermental lately, sometimes it works flawlessly, sometimes it doesn't work at all, sometimes I have to restart every time I use it. Moan.

Anyway, I guess anonymous content won't respond to sibling selectors the way explicit content does. Weird stuff. I even tried creating two hidden boxes in the binding and had them observing the disabled state of the Back and Forward respectively, but I couldn't get the back-forward-dropmarker to respond to sibling selectors. So I think it's safe to say that I don't think we are going to be able to have a disabled state for this button at all. But really, the disabled state only applies to it's appearance, functionally it is disabled when there is no history to view.

Edit: AHA! It's not very pretty but since we can't use sibling selectors we need to use parent > child selectors:

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>

Code: Select all

toolbar[iconsize="large"][mode="icons"] #dropmarker-observer1[disabled="true"] 
#dropmarker-observer2[disabled="true"] #back-forward-dropmarker {
 background-color: red !important;}

Crazy stuff. Like I said, it's not pretty and it breaks the old formatting, but since the bound element can't respond to sibling selectors anyway, it doesn't matter.