MozillaZine

Restoring 3.x urlbar feed button in 4.0.

Discuss application theming and theme development.
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 25th, 2010, 12:26 am

OK folks, this one is a little complicated, so bear with me. In 4.0 the old urlbar feed button has been removed and replaced with a toolbar button of the same name. This creates a few problems for themers. For one, your old instructions for the urlbar feed button will now apply to the new toolbar button. This is going to look weird and will probably break your themes.


Backwards-compatible Feed Button for ALL themes

First-off, if you are updating from 3.0 or 3.5 or simply didn't work on Feed button compatibility for 3.6, please see this reference, as we are going to append it:

viewtopic.php?f=18&t=1663795

We need to keep the "#urlbar[chromedir="ltr"] #feed-button, #urlbar[chromedir="rtl"] #feed-button" stuff and add identifiers that separate urlbar feed button from the toolbar feed button... you will need to do this for your themes even if you choose not to restore the urlbar feed button:

Code: Select all
    /* Feed icon */
   #urlbar #feed-button,
   #urlbar #feed-button > .button-box,
   #urlbar #feed-button:hover:active > .button-box {
      padding: 0px;
      margin: 0px;
      border: 0px;
      background-color: transparent;
    }

   #urlbar #feed-button > hbox > .button-menu-dropmarker,
   #urlbar #feed-button > hbox > .button-text {
      display: none;
    }

    #urlbar[chromedir="ltr"] #feed-button,
    #urlbar[chromedir="rtl"] #feed-button {
      -moz-binding: url("chrome://global/content/bindings/button.xml#menu");
    }

    #urlbar #feed-button {
      -moz-appearance: none;
      padding: 0 2px !important;
      background-image: none;
      min-width: 0px;
      list-style-image: url("chrome://browser/skin/feeds/feed-icons-16.png");
      -moz-image-region: rect(0px 16px 16px 0px);
    }

    #urlbar #feed-button:hover {
      -moz-image-region: rect(0px 32px 16px 16px);
    }

    #urlbar #feed-button[open="true"],
    #urlbar #feed-button:hover:active {
      -moz-image-region: rect(0px 48px 16px 32px);
    }

    #urlbar[chromedir="ltr"] #feed-button:not([feeds]),
    #urlbar[chromedir="rtl"] #feed-button:not([feeds]) {
      visibility: collapse;
    }


For the 4.0 toolbar button you can add the graphic to your Toolbar.png file and use something like this:

Code: Select all
#feed-button[removable="true"] {
  -moz-image-region: rect(0px 347px 22px 327px);
}
#feed-button[removable="true"]:not([disabled="true"]):hover {
  -moz-image-region: rect(25px 347px 47px 327px);
}
#feed-button[removable="true"][disabled="true"] {
  -moz-image-region: rect(50px 347px 72px 327px);
}
#feed-button[removable="true"]:not([disabled="true"]):hover:active {
  -moz-image-region: rect(75px 347px 97px 327px);
}


Only the new toolbar button should have the Removable attribute.

Restore the missing ulrbar button using a binding

First off, we need to create two new buttons. These buttons will observe the Bookmarks "Subscribe to This Page" entries... there are two different ones for single and multiple feed sites. Add the following to your globalBindings.xml:

Code: Select all
  <binding id="restore-feed-button">
    <content>
      <xul:toolbarbutton
       id="urlbar-single-feed-button"
       style="-moz-user-focus: none;"
       insertBefore="star-button"
       label=""
       class="toolbarbutton-1 chromeclass-toolbar-additional"
       onclick="return FeedHandler.onFeedButtonClick(event);" >
       <xul:observes element="singleFeedMenuitemState" attribute="feed"/>
       <xul:observes element="singleFeedMenuitemState" attribute="disabled"/>
       <xul:observes element="subscribeToPageMenuitem" attribute="hidden"/>
       </xul:toolbarbutton>
       
       <xul:toolbarbutton
       id="urlbar-multiple-feed-button"
       style="-moz-user-focus: none;"
       insertBefore="star-button"
       label=""
       class="toolbarbutton-1 chromeclass-toolbar-additional"
       observes="multipleFeedsMenuitemState" >
         <xul:observes element="subscribeToPageMenupopup" attribute="hidden"/>
         <xul:menupopup id="subscribeToPageSubmenuMenupopup"
         position="after_end"
         onpopupshowing="return FeedHandler.buildFeedList(event.target);"
         oncommand="return FeedHandler.subscribeToFeed(null, event);"
         onclick="checkForMiddleClick(this, event);"/>
       </xul:toolbarbutton>
      <children/>
    </content>
  </binding>


Now we add our new buttons to the modified CSS for feed buttons:

Code: Select all
    /* Feed icon */
   
    /* restore feed button for 4.0 */
   #tab-view-deck #urlbar-icons {
-moz-binding: url("chrome://global/skin/globalBindings.xml#restore-feed-button");}

   #urlbar-multiple-feed-button,
   #urlbar-multiple-feed-button > .button-box,
   #urlbar-single-feed-button,
   #urlbar-single-feed-button > .button-box,
   #urlbar #feed-button,
   #urlbar #feed-button > .button-box,
   #urlbar #feed-button:hover:active > .button-box {
      padding: 0px;
      margin: 0px;
      border: 0px;
      background-color: transparent;
    }
   
   #urlbar-multiple-feed-button .button-menu-dropmarker,
   #urlbar-multiple-feed-button .button-text,
   #urlbar-single-feed-button .button-text,
   #urlbar #feed-button > hbox > .button-menu-dropmarker,
   #urlbar #feed-button > hbox > .button-text {
      display: none;
    }
   
    #urlbar-multiple-feed-button,
    #urlbar[chromedir="ltr"] #feed-button,
    #urlbar[chromedir="rtl"] #feed-button {
      -moz-binding: url("chrome://global/content/bindings/button.xml#menu");
    }
   
    #urlbar-multiple-feed-button, 
    #urlbar-single-feed-button,
    #urlbar #feed-button {
      -moz-appearance: none;
      padding: 0 2px !important;
      background-image: none;
      min-width: 0px;
      list-style-image: url("chrome://browser/skin/feeds/feed-icons-16.png");
      -moz-image-region: rect(0px 16px 16px 0px);
    }
   
    #urlbar-multiple-feed-button:hover,
    #urlbar-single-feed-button:hover,
    #urlbar #feed-button:hover {
      -moz-image-region: rect(0px 32px 16px 16px);
    }
   
    #urlbar-multiple-feed-button[open="true"],
    #urlbar-single-feed-button[open="true"],
    #urlbar #feed-button[open="true"],
    #urlbar #feed-button:hover:active {
      -moz-image-region: rect(0px 48px 16px 32px);
    }

    #urlbar-multiple-feed-button,
    #urlbar-single-feed-button,
    #urlbar[chromedir="ltr"] #feed-button:not([feeds]),
    #urlbar[chromedir="rtl"] #feed-button:not([feeds]) {
      visibility: collapse;}
 
    #urlbar-multiple-feed-button:not([hidden]),
    #urlbar-single-feed-button:not([hidden]):not([disabled]) {
      visibility: visible !important;}
    }


I think that's it. Let me know if anything is screwy.
Last edited by patrickjdempsey on October 27th, 2010, 12:26 am, edited 3 times in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted October 25th, 2010, 8:07 pm

Good job, Patrick. :) I actually made a non-public-release extension to restore the button, but this binding looks like a good alternative that won't require checking to see if any of the code changes inside browser/content/browser.js.

This along with Sparky's Status-4-Evar extension is restoring the Firefox UI we all know and love. Next on my list is restoring the back/forward button dropmarker. A binding is all that should be needed for that one.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 25th, 2010, 9:54 pm

Already got you covered CatThief:

viewtopic.php?f=18&t=2019371

;) And you're welcome!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted October 26th, 2010, 5:07 pm

patrickjdempsey wrote:Already got you covered CatThief:

viewtopic.php?f=18&t=2019371

;) And you're welcome!

Brilliant! :D
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted October 26th, 2010, 6:53 pm

Oh another thing, I know the names urlbar-single-feed-button and urlbar-multiple-feed-button are longish but I think they are aptly descriptive. If everyone who uses this patch agrees to use these names that would be awesome. I'm already planning to add a rule in Combine Buttons that if the Feed-button toolbarbutton is on any toolbar then these new feed buttons will be hidden automatically.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted November 2nd, 2010, 11:49 pm

OK folks, I'm about to drop some science here relating to the tooltiptext. I finally figured out how to link bindings to the label strings. We need to migrate our bindings out of globalBindings.xml to browser.xml.... just for the sake of simplicity. Then add the locale DTD in there.... and the tooltiptext string for the Bookmarks menu Subscribe entry. This is what my browser.xml looks like now:

Code: Select all
<?xml version="1.0"?>

<!DOCTYPE window [
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd" >
%browserDTD;
]>

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

  <!-- :::/ widgets \ ::::::::::::::::::::::::::::::::::::::::::::::::::::: -->

  <binding id="autocomplete-security-wrapper" extends="xul:hbox">
    <content>
      <xul:hbox id="autocomplete-security-wrapper" flex="1">
        <children/>
      </xul:hbox>
    </content>
  </binding>
 
  <binding id="restore-feed-button">
    <content>
      <xul:toolbarbutton
       id="urlbar-single-feed-button"
       style="-moz-user-focus: none;"
       insertBefore="star-button"
       class="toolbarbutton-1 chromeclass-toolbar-additional"
       tooltiptext="&subscribeToPageMenuitem.label;"
       onclick="return FeedHandler.onFeedButtonClick(event);" >
        <xul:observes element="singleFeedMenuitemState" attribute="feed"/>
        <xul:observes element="singleFeedMenuitemState" attribute="disabled"/>
        <xul:observes element="subscribeToPageMenuitem" attribute="hidden"/>
       </xul:toolbarbutton>
       
       <xul:toolbarbutton
       id="urlbar-multiple-feed-button"
       style="-moz-user-focus: none;"
       insertBefore="star-button"
       class="toolbarbutton-1 chromeclass-toolbar-additional"
       tooltiptext="&subscribeToPageMenuitem.label;"
       observes="multipleFeedsMenuitemState" >
        <xul:observes element="subscribeToPageMenupopup" attribute="hidden"/>
         <xul:menupopup id="subscribeToPageSubmenuMenupopup"
         position="after_end"
         onpopupshowing="return FeedHandler.buildFeedList(event.target);"
         oncommand="return FeedHandler.subscribeToFeed(null, event);"
         onclick="checkForMiddleClick(this, event);"/>
       </xul:toolbarbutton>
     <children/>
    </content>
  </binding>
 
 
  <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>
 
</bindings>


Make sure to go back and change the location of the binding in your css if you do it this way.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 6th, 2011, 9:30 am

Thanks for this fix!

My biggest question here is why would I put the bindings in browser.xml as opposed to globalBindings.xml? What are the implications and ramifications? I'm thinking from the perspective of a FF4 only theme with no backward compatibility.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted April 6th, 2011, 11:47 am

The only reason I switch it over is so I would have to less modifications to load this:

Code: Select all
<!DOCTYPE window [
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd" >
%browserDTD;
]>


which allows me to do this:

Code: Select all
       tooltiptext="&subscribeToPageMenuitem.label;"


Which I didn't realize how to associate a string with a DTD file until then. It's probably possible to load the browser.dtd into the global binding, but it seemed more appropriate to do it here.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 3 guests