[Theme] Firefox 2, the theme, reloaded

Announce and Discuss the Latest Theme and Extension Releases.
User avatar
rctgamer3
Posts: 24
Joined: November 6th, 2011, 10:24 am
Location: The Netherlands

Re: [Theme] Firefox 2, the theme, reloaded

Post by rctgamer3 »

Hi all (thanks anonymous user for reminding me about this thread!);

The Back/Forward dropdown button not displaying correctly is a known issue. Developer Aris used styles from the All Tabs button, which has a different look in Firefox 2 /with the theme. I tried fixing it, but I didn't have enough time to fix it. I had to make the choice to release the 1.0.7 (Australis update) first, before attempting to fix any incompatibilities with other add-ons.

About the buttons, i'm developing an add-on which lets you customize the theme a bit. I managed to re-implement the old Back/Forward home buttons, with and without dropmarkers. Don't expect the customizer add-on within the next couple of weeks, since I suck at JavaScript.(Suggestions/Help welcome!)
Edit: Well, the buttons are completely functional, it's just that I have no idea how to add them to the toolbar properly to comply with add-on guidelines etc. Here's a sneak preview though (and yes, I know the Developer button doesn't have an icon..yet) :wink:
Image
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

Hey RCT!

Is your preview screenshot running without CTR installed? It would be cool to be able to use your theme without the need for the CTR add-on.

A nice irony, Firefox 2 for Australis. :)

Ben.
XUL is dead. Long live the Google Chrome Clones.
User avatar
rctgamer3
Posts: 24
Joined: November 6th, 2011, 10:24 am
Location: The Netherlands

Re: [Theme] Firefox 2, the theme, reloaded

Post by rctgamer3 »

Benjamin Markson wrote:Hey RCT!

Is your preview screenshot running without CTR installed? It would be cool to be able to use your theme without the need for the CTR add-on.

A nice irony, Firefox 2 for Australis. :)

Ben.

You're right, I don't have CTR installed. I built my own implementation from the original buttons :)
marty60
Posts: 475
Joined: March 21st, 2012, 7:09 am

Re: [Theme] Firefox 2, the theme, reloaded

Post by marty60 »

@rctgamer3, thanks for update. Will the buttons like the dropdown marker be fixed with CTR installed in the theme itself or will we have to wait for the addon you're working on?
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

With CTR version 1.1.9 and onwards all of the toolbar button id's change from ctr_ to ctraddon_ - I think this breaks your links to Toolbar.png such that none of your theme's icons show up.

Also, if you choose to fix this, the #ctr[addon]_history-button, and #ctr[addon]_bookmarks-button have never shown your theme's icons (I'm having to use Stylish to get the 'correct' icons from Toolbar.png).

Cheers,
Ben.
XUL is dead. Long live the Google Chrome Clones.
marty60
Posts: 475
Joined: March 21st, 2012, 7:09 am

Re: [Theme] Firefox 2, the theme, reloaded

Post by marty60 »

Benjamin Markson wrote:Also, if you choose to fix this, the #ctr[addon]_history-button, and #ctr[addon]_bookmarks-button have never shown your theme's icons (I'm having to use Stylish to get the 'correct' icons from Toolbar.png).

Cheers,
Ben.


Another option is to create your own buttons with the Custom Buttons addon. I did that with the back/forward buttons and dropdown. This also allows me to use customized icons, in this case green which I prefer for those buttons and now the released theme is perfect with v31. There's some problems though in about:customizing in the nightlies but other than that the theme is good on those too.
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

This is the Stylish CSS I'm using to 'repair' the theme with the advent of FF30 and CTR 1.2.0...

Code: Select all

    /* CTR compatibility */
    #nav-bar #urlbar-go-button
    {
        margin-left: 1px!important; /* 22px */
        margin-right: -24px!important; /* -40px */
    }

    #tab-view-deck :-moz-any(#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_history-button,#ctraddon_bookmarks-button,#home-button) > .toolbarbutton-icon
    {
        list-style-image: url("chrome://browser/skin/Toolbar.png") !important;opacity:1!important;
        padding:0px!important;
        max-height:18px!important;
        max-width:18px!important;
    }

    #ctraddon_reload-button {-moz-image-region: rect(0px 96px 24px 72px) !important}
    #ctraddon_reload-button[disabled="true"] {-moz-image-region: rect(48px 96px 72px 72px) !important}
    #ctraddon_reload-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 96px 120px 72px) !important}
    #ctraddon_reload-button:not([disabled="true"]):hover .toolbarbutton-icon {-moz-image-region: rect(24px 96px 48px 72px) !important}
    #ctraddon_reload-button[disabled="true"] .toolbarbutton-icon {-moz-image-region: rect(48px 96px 72px 72px) !important}
    #ctraddon_stop-button {-moz-image-region: rect(0px 72px 24px 48px)}
    #ctraddon_stop-button:not([disabled="true"]):hover {-moz-image-region: rect(24px 72px 48px 48px)}
    #ctraddon_stop-button[disabled="true"] {  -moz-image-region: rect(48px 72px 72px 48px)}
    #ctraddon_stop-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 72px 120px 48px)}
    #ctraddon_back-button {-moz-image-region: rect(0px 24px 24px 0px)}
    #ctraddon_back-button:not([disabled="true"]):hover, #ctraddon_back-button[buttonover="true"] {-moz-image-region: rect(24px 24px 48px 0px)}
    #ctraddon_back-button[disabled="true"] {-moz-image-region: rect(48px 24px 72px 0px)}
    #ctraddon_back-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 24px 120px 0px)}
    #ctraddon_forward-button {-moz-image-region: rect(0px 48px 24px 24px)}
    #ctraddon_forward-button:not([disabled="true"]):hover, #ctraddon_forward-button[buttonover="true"] {-moz-image-region: rect(24px 48px 48px 24px)}
    #ctraddon_forward-button[disabled="true"] {-moz-image-region: rect(48px 48px 72px 24px)}
    #ctraddon_forward-button:not([disabled="true"]):hover:active {-moz-image-region: rect(96px 48px 120px 24px)}
    #ctraddon_history-button .toolbarbutton-icon {-moz-image-region: rect(0px, 168px, 24px, 144px) !important;}
    #ctraddon_bookmarks-button .toolbarbutton-icon {-moz-image-region: rect(0px, 192px, 24px, 168px) !important;}

Mainly, this is lifted from: chrome://browser/skin/browser.css but with some changes.
    · The most important change is for #ctr to become #ctraddon.
    · The '#nav-bar #urlbar-go-button' rule fixes the breakage of the urlbar go button when using CTR's: Hide urlbars stop and reload buttons, option.
    · I've used '#tab-view-deck' instead of '#nav-bar' as this allows the icons to work properly across all of the toolbars.
    · The 'max-height:18px' and 'max-width:18px' give you [me :)] small icons on the toolbars.
    · I've also added entries for '#ctraddon_history-button' and '#ctraddon_bookmarks-button' so that those icons get rendered properly.
Ben.
XUL is dead. Long live the Google Chrome Clones.
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

I don't know how many people are still fighting to keep their UI straight using this theme but I've noticed recently (with ff31?) that the Close Button on the various sidebars (History and Bookmarks) have disappeared.

Here are some further Stylish adjustments to bring them back. This code is pretty much lifted from the Close Button on the Findbar but altered to apply to the .close-icon.tabbable elements.

Code: Select all

     .close-icon.tabbable
    {
        border: 1px solid transparent !important;
        padding: 3px 2px 2px 2px !important;
         list-style-image: url("chrome://global/skin/icons/close.png") !important;
        -moz-appearance: none !important;
        -moz-image-region: rect(0px, 16px, 16px, 0px) !important;
    }
       .close-icon.tabbable > .toolbarbutton-icon
    {
      -moz-margin-end: 0 !important;
      -moz-padding-end: 2px !important;
      -moz-padding-start: 2px !important;
    }
    .close-icon.tabbable:hover
    {
      -moz-image-region: rect(0, 32px, 16px, 16px) !important;
    }
    .close-icon.tabbable:hover:active
    {
      -moz-image-region: rect(0, 48px, 16px, 32px) !important;
    }

Ben.
XUL is dead. Long live the Google Chrome Clones.
User avatar
rctgamer3
Posts: 24
Joined: November 6th, 2011, 10:24 am
Location: The Netherlands

Re: [Theme] Firefox 2, the theme, reloaded

Post by rctgamer3 »

Benjamin Markson wrote:I don't know how many people are still fighting to keep their UI straight using this theme but I've noticed recently (with ff31?) that the Close Button on the various sidebars (History and Bookmarks) have disappeared.

I already fixed that bug several days before you posted your post here. Seems they changed the close button selector and didn't notice it.
Version 1.0.8 was just released today which fixes this and other issues. The most important urlbar stretching issue has also been fixed :)
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

Hey, it's really good to see an update. :)

The sidebar close buttons are, indeed, now fixed, although, I see you weren't tempted to change the references for the out-dated: #ctr to: #ctr_addon - currently, to keep the UI straight, I'm still having to use all the tweaks I posted on June 11th above.

How's it going with being able to freely move the back, forwards, stop, and reload buttons? These are my main reason for using CTR.

Ben.
XUL is dead. Long live the Google Chrome Clones.
User avatar
rctgamer3
Posts: 24
Joined: November 6th, 2011, 10:24 am
Location: The Netherlands

Re: [Theme] Firefox 2, the theme, reloaded

Post by rctgamer3 »

Benjamin Markson wrote:Hey, it's really good to see an update. :)

The sidebar close buttons are, indeed, now fixed, although, I see you weren't tempted to change the references for the out-dated: #ctr to: #ctr_addon - currently, to keep the UI straight, I'm still having to use all the tweaks I posted on June 11th above.

How's it going with being able to freely move the back, forwards, stop, and reload buttons? These are my main reason for using CTR.

Ben.

I haven't had CTR installed in ages. I'll add a quick fix for it in the next version. Bit of a delay on the buttons, since i've had some technical problems with my computer ](*,)
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Theme] Firefox 2, the theme, reloaded

Post by Aris »

All CTR prefixed ids got changed in CTR v1.1.8 from "#ctr_"/".ctr_" to "#ctraddon_"/".ctraddon_". Mozillas add-on reviewer/editor team requested this.
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

Another little Stylish fix, this one is for the new Forget (aka Panic) button that has arrived with ff33.1

Code: Select all

    #panic-button .toolbarbutton-icon
    {
       list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAACXBIWXMAAAsSAAALEgHS3X78AAAACXRFWHRDb21tZW50AACJKo0GAAACXUlEQVR4nIVT30uTYRR+rwZe7Pv2Oefc16ZSFpH246LA7sr/qq6yCzMi3cUGI8oMKqIwUEsNWTYoxCjnajpRUyi6kH6Rm5S1cXqeo++oq4SH837nfc7xPM95Z0TEzMa9n2bED+0stDeJGffdI4Ax/NLM/ZjbudIellp5SxjNlUjQzLY1CfEk0SiGXXLxUOmx7w5obQk0/m2cOSUvEl613uztiYMyz6bDLa7YHuiXNmOom9oXmuZ/WD8Uk3eIxEJro4z6bsBMxr3SIkoVB6IaN/svaiygixmIBAdf4VDsOS3vL5yT/LEO+f35kzA3EffEXMbc/ZFgIBN1ardjIbkDDMdcQT6DvFEdBHXQFWhasn6oLg7CgTjY1sg9jRwYg2dHSaBYJrZzWTWgPDmuBBpCHw0ntSq+3Lym8TtIjFRo8ntO/Y3adkUjllQ2lEJJlEaJlErJzMGCJNeT5lqsvRa3YDlXpz4AKWq/Cw/oBT2BBw3qg9WLnQQe+W5qLuHVFiF7tS1c3wvPzPEOnAy4DWO7NeoTD+k8CJS/BmycPCw/Xr9UW9b2chbkkIualDZ46IcG51vDsgzVFitH90sl91QbrB7vkE0Ir8KE9Z7uOoc1rMVT8nbe8MH9B0t4kLTXfheACdSaGy1OaQ6u8bUS37CkD73n698WHy/16p39Zs31qFPkGrpwqM4kwpokCme75SvI1UpZwTNz9n4G47OGtfozw5oCVyPO9BB298D3ZAp7fQbSc5AJnpnjHTngZlnDFfOt/4O+SLATMZlsdpbTUedXqtmp4FxkDnddfbucOv4AMDHpApKyIw0AAAAASUVORK5CYII=") !important;
    }

I know it looks horrible but unless someone can find an icon as a useful candidate in the theme itself then I think, in the meantime, we're kind of stuck with the base64 stuff.

Oh, and congratulations: October Contributor of the Month: rctgamer3 =D>

Ben.
XUL is dead. Long live the Google Chrome Clones.
marty60
Posts: 475
Joined: March 21st, 2012, 7:09 am

Re: [Theme] Firefox 2, the theme, reloaded

Post by marty60 »

Using this theme with 43.0 I'm seeing a thin white line on the very top of the screen with every web page. Even when scrolling the white line stays on in place. It isn't there with other themes, only this one so I've tried everything I can think of in userChrome to no effect to get rid of it. Rctgamer3 if you're still checking in would you have some quick code change I can make inside the theme itself or maybe to userChrome?

Update: I found where a change was needed in the theme. In toolbar.css located in the global folder from the third line "border-top: 2px solid;" was changed to "border-top: 0px solid;".
User avatar
Benjamin Markson
Posts: 397
Joined: November 19th, 2011, 3:57 am
Location: en-GB

Re: [Theme] Firefox 2, the theme, reloaded

Post by Benjamin Markson »

I'm not as far ahead as Marty but with FF41 the identity popup is very broken (the thing you get when you click on the padlock icons to the left of the address bar.

Superficially, I think #identity-popup-icon has become .identity-popup-expander, and #identity-popup-container has become #identity-popup-security-content, but masses more stuff has changed.

The icon is just the tip of the iceberg. Notice that all text is messed up too. The underlying structures have under gone some significant changes.

I 'sort of' managed to fix the icon - enough to know that I'm in the right ballpark - but this has gone way beyond my patience/DOM inspector skills/CSS skills.

Code: Select all

    /* Popup Icons */
    .identity-popup-expander
    {
      height: 64px !important;
      width: 64px !important;
      padding: 0 !important;
      list-style-image: url("chrome://browser/skin/identity.png") !important;
      -moz-image-region: rect(0px, 64px, 64px, 0px) !important;
    }

    #identity-popup.verifiedDomain > #identity-popup-security-content > .identity-popup-expander
    {
      -moz-image-region: rect(64px, 64px, 128px, 0px) !important;
    }

    #identity-popup.verifiedIdentity > #identity-popup-security-content > .identity-popup-expander
    {
      -moz-image-region: rect(128px, 64px, 192px, 0px) !important;
    }

The #identity-popup.verifiedDomain and #identity-popup.verifiedIdentity parts don't seem to work - I have no idea why! :-k

Ben.
XUL is dead. Long live the Google Chrome Clones.
Post Reply