Tag Archives: firefox

Chrome’s border radius CSS feature

Posted on by

Just a note on how Chrome handles it’s rounded corners.

I found out about CSS3′s rounded corner support for Mozilla and Webkit browsers and happily started using it. Turns out though that Chrome currently doesn’t have the shorthand tag for it like Mozilla does – I’m sure it’s something they’re working on though (or maybe even just forgot).

What I mean is that whilst you can do this:

-moz-border-radius: 2px 2px 15px 15px;

For the radius to be applied clockwise starting from top-left, you can’t do that for Webkit at the moment. So you have to write it out long hand like:

-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;

It’s a tad annoying, but at least Chrome support it, unlike some browsers.

Update: Lots of people seem to be getting to this post via Google, but not staying for long. Comment with what you’re looking for, and I’ll update this post this better information (helping you, and other people that come along later). If you really want to say thanks, you could Flattr this!

Really quick run down of storing and retrieving data in Firefox

Posted on by

Last time I quickly ran through how to add a button to your Firefox bar by making your own extension, but all it did was open a cruddy, static alert box.

In an effort to remind myself how to manage preferences, I’m going to make it so the user can decide what text should be alerted.

First we’ll be needing to add some kind of options dialogue box. For now, I’m just going to add a pane to the options window. We need to make another overlay for the preferences in that case. Create a new text file called prefs.xul. Doing that is explained pretty well in the pane creation section of the Rietta tutorial.

That website it clearly out of date though, since it says this:

If you did not know what you want to merge with, the DOM Inspector is your best tool for looking through browser code and finding element IDs.

Which is no longer true; Firefox doesn’t ship with that DOM Inspector anymore. So, I’ve really no idea how to find the DOM element ID’s I’m supposed to be merging with.

Rietta do a good job of explaining how to link preferences with the inputs too. They don’t mention how to make your stuff get laid out nicely though. I think you can use CSS like normal (using style). There’s a page on tags you can use over MDC.

Once you’ve designed your overlay in XUL, you’ll need to actually overlay it by adding it in your chrome.manifest, like you did with the browser.

overlay chrome://browser/content/preferences/preferences.xul chrome://your-addon/content/prefs.xul

Open up your options window, and you should see your pane there now.

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

Mine definitely needs to be prettier. (The screenshot is for the addon I'm working on, not this example.)

When you change the data in your fields and press ‘Ok’ they’ll automatically be updated and saved. You’ll be able to see them in your about:config too.

Now we can go ahead and make our javascript file, save it in your content folder. This’ll just be like any other javascript function you’d normally write.

We need to use XPCOM in order to get and set preferences from inside a javascript file. That makes my javascript file look like this:

//  Gets the text from the store user preference and returns it
function getAndReturnText () {
  //  Installise the preferences service
  var pref = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);

  //  Message box showing the text the user entered on the options pane
  alert (pref.getCharPref ('extensions.timesink.possibleWebsites'));
}

Doesn’t do much at the moment, until we change the oncommand event we added to our button (in browser.xul). You also need to include the javascript in any overlays with you’re using it.

<script type="application/x-javascript" src="chrome://your-addon/content/mycode.js" />

After learning all that, I ended up with these tabs open, which may be more help to you.

Super quick guide: Adding a button to the Firefox toolbar

Posted on by
My button: look how cute he is!

My button: look how cute he is!

What I’ll cover here is the steps that you should take to add a button to your Firefox toolbar, I think Thunderbird and stuff might be the same too. This isn’t a comprehensive guide, the links I link to are for that.

This is basically an article for me to dump loads of information I’ve accumulated. You won’t learn much just by only reading this article. Take a look through the links I give.

You’re basically making an extension, so you need the same file layout to start with. Here’s assuming you’re building your extension inside a folder named “extName”, call yours whatever you want though.

extName/
        chrome/
               content/
        chrome.manifest
        install.rdf

More indepth look at setting up the environment and folder structure.

Open install.rdf and paste the following:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>addonname@whatever.com</em:id>
    <em:version>0.1</em:version>
    <em:type>2</em:type>

    <!-- Target Application this extension can install into,
         with minimum and maximum supported versions. -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- Front End MetaData -->
    <em:name>Addon name</em:name>
    <em:description>Description for addon</em:description>
    <em:creator>Your name</em:creator>
    <em:homepageURL>http://yourhomepage.com</em:homepageURL>
  </Description>
</RDF>

Change whatever stuff. Don’t make the minVersion less than 1.5, because you’re blatantly lying. Lots changed in 1.5 that doesn’t act the same way now. Don’t change that weird looking id. The first id needs to be changed though. It doesn’t have to be a real email address, but it does have to be in email address format. More indepth look at install.rdf.

Firefox’s appearance is created by using XUL (“zool”). We create our own XUL documents which we tell Firefox to merge with the base template. We say stuff like “add this chunk of XML to the status bar” and it merges that data. You can overwrite sections too. We call our XUL “overlays“.

Add these lines to chrome.manifest.

content     youraddon    chrome/content/
overlay chrome://browser/content/browser.xul chrome://youraddon/content/browser.xul

That basically says “the content of youraddon is in ‘chrome/content’, which is  direct relative to this file.” Here’s a more comprehensive explaination of what it means.

Time to make some images for your button to display. You need to make two, one 24×24 pixels, and a smaller version 16×16 pixels. I stuck them in chrome/content/images/ but so long as they’re in chrome/content/ it shouldn’t matter. Then you need to make a CSS style for those buttons. This’ll do:

/*  skin/toolbar-button.css  */

#youraddon-button {
  list-style-image: url("chrome://myextension/content/btn_large.png");
}

toolbar[iconsize="small"] #youraddon-button {
  list-style-image: url("chrome://youraddon/content/btn_small.png");
}

I think it’s standard to separate your content from your skinning, but I’ve not bothered with that. It’ll probably cause me all sorts of problems later.

Create chrome/content/browser.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://youraddon/content/style.css" type="text/css"?>
<overlay id="youraddonBrowser" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="youraddon-button" class="toolbarbutton-1"  label="Your addon name" oncommand="alert ('hey');" />
</toolbarpalette>
</overlay>

Pretty standard XML styling. Define it as your overlay. Tell it you want to merge with the “BrowserToolbarPalette“, and add a button. That class is required to style it like a toolbar button. The label is the mouse over text. oncommand is the Javascript that will run when you press the button. That’s another article though.

I bookmarked and shared (foxmarksxmarks is cool) all the pages I ended up having open at the end of button creation, so go ahead and look through them.

Debian experience so far

Posted on by

I switched to Debian four or so days ago, and it’s kinda making me feel stressed. I’m having to put a lot more work into the operating system to just make it work.

Firefox for instance – oh, sorry, Iceweasel – took a lot of Googling and about:configing before it felt the same as it did on Windows. Why some of those keys and things have changed is odd for me. Why has ^J for the download menu suddenly been switched to ^Y? Why use Alt instead of Ctrl for tab manipulation? Why doesn’t clicking the address bar auto-highlight it all? These just seem like weird changes to me.

I’ve installed a few extensions in Songbird. It says they’re installed but there’s no other sign of them. No way to run them. No obvious way to get to the iPod functions which apparently exist…

I’ve no idea what I’m supposed to be installing to get OpenGL to work. I need it to play Eve… (Which is apparently no longer in development…)

Installing things is also a little bit of work… I don’t know why more things don’t come with a set up wizard, like I’m so used to in Windows. Instead, I have to try and remember the switches for untaring things, putting them in the right place. Sometimes just guessing what I should be doing to run the damn thing.

This just isn't nice...

This just isn't nice... It looks like it can't decide on what width to use for letters sometimes. Blatant attempts at adding extra pixels to make it more round.

Fonts are a weird, picky problem for me too. But I think that’s just because I’ve not played around with the defaults enough yet, to find one I actually like. Needs more anti-alias, and better kerning.

On the installation for Debian set up thing, I asked it to install a web server. That may exist, but I’ve no idea where to find it… My PHP pages aren’t giving me any errors, they just don’t seem to be outputting anything at all.

It’s just not new user friendly. I’m hoping that Ubuntu is much better in this domain, since that’s what it’s designed for really. So, I may be switching back to Windows some time soon. I don’t think my life can handle not having it as a primary operating system just yet. In the furutre though, I’ll defintely be installing another Linux OS on my next machine.