Posted on by Mark Finkle

XUL with a Ribbon

I was just goofing around, trying to see what spiffy new UI patterns we could make using XUL. I thought I’d try creating an Office 2007 ribbon style toolbar. My current result is shown here:

xul-ribbon.png

I had my mouse over the “cut” button, therefore it is highlighted. Couple of points:

  • I need to add images to the selected tab to give it a rounded look.
  • I have not added any gradients to the ribbon because its harder than it should be. We should add something to CSS to make this easier.
  • I want to add more control types to the example. A dropdown button will be really easy. It will also be easy to add the dialog launchers too
  • I have already started to think about the XBL version of this 🙂 .

10 Replies to “XUL with a Ribbon”

  2. Hi Mark,

    I love your site. I got your XPCOM example to compile yesterday and today began to play with your XUL explorer application today. All this is in an effort to get XUL elements to be transparent to content in a browser (I know there’s a bug that’s been submitted on this, but I want a solution I could link into FF1.5)

    I had lots of ideas on how to do this, but I’m sorta trying to piece together which one might work.

    Here’s a few ideas — do you think any of them could have a shot at working? And how would you proceed in figuring out which interfaces need to be modified? I must admit that my head is spinning from reading interface descriptions all day.

    -Modify the background rendering code in nsCSSRendering.cpp per the patch which was submitted and then pulled for bug #130087 – problem is that this is core code and I can’t find an interface which would let me get at it for an XPCOM mod

    -Turns out that HTMLIFrame elements are in browser’s view heirarchy so transparency works for them. If I could lock the browser to about:blank and load all content into the iframe (with history) then I’d get the functionality I want – I’ve done this – problem is that every time my browser hits a page which attempts a top.document.location call I break out of the iframe – I was thinking I could use XPCOM to override top so that it pointed at my iFrame instead of the top level browser window (I don’t know what else this would effect) – I just don’t know where to begin to find how that top variable is implemented

    -Create my own pDiv or pIframe HTML-DOM element which would somehow not get reloaded when a page changes – maybe somehow use nsIContentViewer to keep a specific document from unloading – if a window could have 2 documents this might work – might get screwed up by the view heirarchy – this seems unlikely + it would probably create security issues.

    I appreciate any help you could give me 😉

    Thanks,

    -Walt

  3. I once wrote a Ribbon component that can be used in HTML pages, and the component used the Prototype library. The thing supported a few stuff, like mouse-wheeling switches tabs. It didn’t deal with user interface controls, sadly. This XUL-based Ribbon would be a big leap forward.

    One thing interesting about the Ribbon (or Microsoft Office Fluent, as it is now officially called) is that its layout changes with the window size. The smaller the window size, the more compact it scales to, and various controls automagically shrink to accommodate the window size. Developers also get to specify the “importantness” of a control if they want to: it might never shrink despite how small the window is.

    One last chilling aspect of the Ribbon is that Microsoft essentially owns it, and Microsoft does not automatically allow loyalty-free usage in applications that “compete with Microsoft Word, Excel, and PowerPoint,” as they put it. (That was a paraphrase, the exact range of applications mentioned might not be limited to those three.) I’ve always wondered if this also applies even if the Ribbon-like interface is built on another technology, especially a non-Microsoft one. I suppose it does.

  5. Why not use canvas for the gradients and fancy borders? With a little bit of work one could abstract that into a html-like object.

  9. Mark,

    First, thanks for your help with Songbird so far. My teammates speak very highly of you. As for your experiment, very neat! I can already think of place in Songbird where this would be useful. A couple of things about the styling notes you mentioned:

    * For rounded tabs, why not use -moz-border-radius? I use this quite frequently in Songbird rather than images because it allows me greater freedom to change the tabs appearance in just a couple lines of CSS.

    * For gradients in Songbird, I’ve created a few transparent gradients in various levels of opacity and reference them in CSS as background images when I need a gradient.

    Keep up the great work!

  10. We should apply for a licence, and work all together to create a “Fox Ribbon.” Red flames fading behind the toolbar, and obviously the Firefox logo as the ribbon sphere. Uhhh…That would be the coolest thing ever.

    -I might start working on that indipendently, in the mean while, until someone joins me-

    What would have been Microsoft reaction to this before implementing Ribbon UI in its products: “I sue you because you stole my future idea! *and because I fear Mozilla*”

    Uhhuhhh.. That feels even better :~P

    Corvineum

Comments are closed.