Stylish 0.5a2

edited March 2007 in Stylish
Stylish 0.5a2

Nearly feature complete. Over and above Stylish 0.5a:

-Thunderbird, Flock, and SeaMonkey support
-the xdata: protocol - just like the data: protocol but fragments work in XBL

Integration with other extensions:
-Rainbow Picker (color picker)
-DOM Inspector (right click a node, copy selector)
-Split Browser (drag a style into Split Browser to edit)


  • Explaining the xdata thing a bit more... You can't use data URIs with XBL because the fragment becomes part of the document, making it invalid. The xdata URI acts exactly like data, but will strip the # and everything after from the document. You pretty much have to use base64 because CSS doesn't like spaces or quotes inside URIs.

    The most obvious use of XBL in user styles to me is ad blocking. You can write a binding that would make an element remove itself from the document, and you'll probably save some bandwidth that way over just display: none.
    #ad { -moz-binding: url("xdata:text/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxiaW5kaW5ncyB4bWxucz0iaHR0cDovL3d3dy5tb3ppbGxhLm9yZy94YmwiPgogIDxiaW5kaW5nIGlkPSJibG9jayI+CgkJPGltcGxlbWVudGF0aW9uPgoJICAgIDxjb25zdHJ1Y3Rvcj4KCQkJCXZhciBhZCA9IHRoaXM7CgkJCQl2YXIgcGFyZW50ID0gYWQucGFyZW50Tm9kZTsKCQkJCXNldFRpbWVvdXQoZnVuY3Rpb24oKSB7IHBhcmVudC5yZW1vdmVDaGlsZChhZCkgfSwgMCk7CgkJCTwvY29uc3RydWN0b3I+CgkJPC9pbXBsZW1lbnRhdGlvbj4KICA8L2JpbmRpbmc+CjwvYmluZGluZ3M+Cg==#block") !important; }
  • Wow, this is gonna be a great version! Still checkin' it out right now.

    BTW, Here's some links to the extensions to save people some time:
  • edited March 2007
    Hi Jason,
    Here's the sequence of Events,
    1. Left CLICK Stylish (StatusBar)
    2. Right Click Style to Edit
    3. In Stylish CLICK 'It's All Text'
    4. Opens Editor - Make changes Save
    5. Stylish Goes Yellow for Another Save
    6. CLICK Save Button
    7. Stylish (Write Window) closes <<<<<<<<<<<<<<<<< Problem!!!!!</font>

    I still have the Style I am working on in the Editor and would prefer that Stylish remain open otherwise 1 thru 4 all over again!!!
    The result is just another CLICK? when the Editor is open already...
    So the desire to make the 'UI' better actually is sort of there but...
    So I'll continue Tried and True 1. Left CLICK 2. Right CLICK 3. Right CLICK 4. Select All 5. Right CLICK 6. Paste 7. Save anyway
    So you can understand the request for a "Paste All & Save" Button shrinking 3 thru 7 into 1...1>7 is done VERY FREQUENTLY in development. Also the additional steps take away from the 'Train of Thought' when deep in a Stylesheet...
    About the only thing it did was hook the Editor with the "Firefox" file, which can be dangerous for manageability... ie recover and so on..., for a single Update... Not very functional/productive in the present form... Don't know what would help?
  • Just don't press Save and it won't close. If you want to try it out, press Preview.
  • For Clarity,
    Preview is for the CSS engagement or for the CSS error checking?
  • Preview applies the CSS temporarily and will tell you about any errors.

    Save applies the CSS permanently, will tell you about any errors, writes the style to the file, and closes the dialog.
  • One thing I noticed that is missing from the later versions is the ability to right click on a style and bring up an option menu - edit, delete. I'd like to see this again.
  • Hi Jason,
    That post would work wonders in the FAQ...
  • this still only for us versions ?
  • I don't get it localized till I'm sure I won't be adding any more strings.
  • edited March 2007
    Hi Jason, FYI Using 0.5a2 when in the Preview mode and you disable(StatusBar) a Style Stylish disables the Style but it is still invoked and no matter how many reloads/refreshes you do you can not get back to the original CSS without restarting FireFox. Not a show stopper but it isn't what was expected... Also Stylish Hangs/Dumps if I'm not mistaken... Don't want to do it again to make sure... Later
  • What kind of style is it, and what version of Firefox are you using?
  • FireFox and I am working on a Style for the Forum which would be a 'kind of style': Site
  • Can you outline the steps you're taking?
  • edited March 2007
    1. Left CLICK Stylish(StatusBar)
    2. Right CLICK active Style
    3. CLICK It's All Text
    4. Save changes in Editor
    5. Stylish Flashes
    6. CLICK Preview
    7. Refresh Page for new style
    8. Left CLICK Stylish(StatusBar)
    9. Disable Style to verify Old vs. New
    10. Refresh for Old Style and Nada (Preview is still in place with the Style disabled)
    11. Stylish sort of gets disgruntled at this point... I gave up and Restarted Firefox when the Dump FINALLY finished
    I don't want to go thru that again said the Productive Style Tester! LOL
  • very nice, especially the dnd stuff, thanks! so much easier to have the stylish panes flat when working on a page. it would be very cool to have the toolbarbutton dnd Manage Styles onto a pane.

    one thing though, when clicking save more than once in a pane, a NOT_INITIALIZED js error pops up an alert. i guess save/cancel should close the pane for consistency..?

    also, any idea how to access the nodes? i posted a Q in the userchrome.js thread on mozillazine - although a load listener fires code, i get nulls on window.document.getElementById.
  • Would love to see this version work with Songbird. Accessing via the preferences for Stylish works (after adding in the songbird app info to the install.rdf), but some modifications need to be made in order to get the status-panel working. A good example of an extension that works in Firefox and Seamonkey that has been written to work with Songbird is Adblock Plus, available at here

    Also, doesn't detect that Stylish is installed, so no install button shows up. Manual entry of code works fine.
  • edited March 2007
    okay, I've figured out a preliminary solution to at least get the status panel working

    in install.rdf, add the following:
    <!-- Songbird -->

    in chrome.manifest add the following line
    overlay chrome://rubberducky/content/xul/mainwin.xul chrome://stylish/content/songbirdOverlay.xul

    make the songbirdOverlay.xul with the following in it:

    <?xml version="1.0"?>

    <?xml-stylesheet href="chrome://stylish/skin/overlay.css" type="text/css"?>

    <!DOCTYPE overlay [
    <!ENTITY % common SYSTEM "chrome://stylish/locale/common.dtd">
    <!ENTITY % branding SYSTEM "chrome://stylish/content/branding.dtd">
    <!ENTITY % overlay SYSTEM "chrome://stylish/locale/overlay.dtd">
    <overlay id="stylish-overlay"


    <script type="application/javascript" src="rdfds.js"/>
    <script type="application/javascript" src="common.js"/>
    <script type="application/javascript" src="StylishStyle.js"/>
    <script type="application/javascript" src="commonOverlay.js"/>
    <script type="application/javascript" src="browserOverlay.js"/>

    <!-- statusbar Songbird -->
    <hbox id="frame_status_pane">
    <stringbundle id="stylish-strings" src="chrome://stylish/locale/"/>
    <stringbundle id="stylish-url-strings" src="chrome://stylish/content/"/>
    <vbox id="stylish-panel" src="chrome://stylish/skin/smallicon.png" class="statusbarpanel-menu-iconic" tooltiptext="&stylish;" onclick="stylishCommonOverlay.handleStatusClick(event)">
    <menupopup id="stylish-status-popup" onpopupshowing="stylishBrowserOverlay.mainPopupShowing(event)" onpopuphiding="stylishBrowserOverlay.clearStyleMenuItems(event)">
    <menuitem label="&stylish.manageSites;" accesskey="&stylish.manageSites.ak;" oncommand="stylishCommonOverlay.openManageStyles()"/>
    <menuitem id="stylish-add-file" label="&stylish.addfile;" accesskey="&stylish.addfile.ak;" oncommand="stylishBrowserOverlay.addFile()"/>
    <menuitem label="&stylish.findStyleBrowser;" accesskey="&stylish.findStyleBrowser.ak;" oncommand="stylishBrowserOverlay.findStyle(event)" onclick="checkForMiddleClick(this, event)"/>
    <menu id="stylish-write-style-menu" label="&stylish.writeStyle;" accesskey="&stylish.writeStyle.ak;">
    <menupopup onpopupshowing="stylishBrowserOverlay.writeStylePopupShowing(event)" onpopuphiding="stylishCommonOverlay.clearMenu(event)"/>
    <menu id="stylish-global-styles" label="&stylish.globalStyles;" accesskey="&stylish.globalStyles.ak;">
    <menupopup onpopupshowing="stylishBrowserOverlay.showGlobalStyles(event)" onpopuphiding="stylishBrowserOverlay.clearStyleMenuItems(event)"/>
  • I've put a preliminary Songbird compatible version of Stylish 0.5a2 up at here I'll be working on improving compatibility more as time allows.
  • I just came up with an idea:
    Left Click (on Stylish statusbar icon) opens Manage Styles
    Right Click opens the usual menu
  • Linchpin: middle click already opens the management dialog.
  • Normal status bar icon menus open on left click. People were used to right-click from other extensions so I added that too.
  • Now that bug 366770 is fixed, XBL works fine with normal data URLs. I think I'm going to remove the xdata thing. On one hand, xdata would've let Firefox 1.5 and 2.0 users to use XBL, on the other hand, encouraging xdata would make styles not working if Stylish weren't installed.
  • So does that mean we can still use XBL, but we have to use "data:text/xml;base64,"...and only in a future version of Firefox 2.0 or 1.5 that has the fix? Just want to be clear...for a second I thought you were removing XBL support.
  • There's a bunch of things at play here.

    -You will still be able to use XBL through normal (http) URLs in Stylish.
    -In Firefox 3.0, you will additionally be able to use XBL through data URLs in Stylish.
    -There will be no extra xdata protocol in the next version of Stylish that will make data-like URLs work in Firefox 1.5 or 2.0.
    -You still won't be able to post styles on userstyles that include XBL (due to security concerns).
  • Posted By: HullaBalooI don't want to go thru that again said the Productive Style Tester! LOL
    Stylish is very likely to get confused if you modify a style in multiple ways at once. I don't think there's anything I can do about it because it would lead to strange situations like if you had a disabled style, then you modified and previewed it, then you enabled it. Technically in that case both the preview and the original should be applied, but that's obviously not what the user would want.
  • Posted By: Micah Bucy (aka eterWould love to see this version work with Songbird. Accessing via the preferences for Stylish works (after adding in the songbird app info to the install.rdf), but some modifications need to be made in order to get the status-panel working.
    Thanks for the idea. The status bar is mostly meant for providing info on or changing the status of the open page. Since Songbird isn't meant to be a general purpose browser, I don't think a status bar icon is that useful. It also doesn't fit that well with Songbird's look. I think it is useful to have Stylish work with Songbird, however, and I've added support. I also got the Stylish detection working in Songbird.
  • Just found this thread in an irrelevant search. Bumping for content.
Sign In or Register to comment.