PimpGoogleBookmarks.js

My latest Greasemonkey / jQuery script PimpGoogleBookmarks.js I wrote to – as the name of that script already says it – pimp Google Bookmarks.

One thing I hate about the Google Bookmarks Screen is the long list of tags on the left ( yep, I do have many tags ) which makes the entire document very long ( high, to be precise ).
My little GM script adjusts the height of the list of tags on the left and the list of search results on the right to my screen size and gives both areas a scroll bar, thus I can scroll down the tags list or the list of search results separately.

In addition it is possible to search for a combination of tags by doing a double-click on those.

Sweet, isn’t it ? Greasemonkey and jQuery are two powerful friends when it comes to tweak web pages to just work a bit better and become more convenient to use.

No way to access selected content in a XUL editor element ?

For a Firefox extension I am currently developing I am writing code allowing local editing of documents  and I am using the XUL Editor element for this which provides kind of an easy way to implement a HTML ( or text ) editor in a browser extension. Kind of … Of course there are hurdles and the major one currently was how to retrieve the selection made in the editor.

Why is that needed ? Let’s explain with one simple example. XUL Editor makes it easy to manipulate content thru Midas and the Document.execCommand interface. To insert a link you basically invoke that command with the options shown below:

editor.contentDocument.execCommand("createlink", false, url);

Document.execCommand takes care of inserting the appropriate html tags correctly around the portion of text you have selected. In order to implement this in a senseful way of course you have to come up with some dialog first to ask the user for that url to use for the link:

So far, so good. Now imagine a user selects a text for which a link already had been inserted before. Of course you want your dialog entry field to contain that URL so that the user has the chance to change ( or delete ) it. This is where that feature to detect the user selection in the editor element is needed – and I can think of more use cases ( like e.g. manipulating the attributes of an inserted image ).

I was googling for some time without any luck. Either this is one of the best hidden features in XUL or there is bascially no way to do it. The best hint I found here in the Microsoft Developer Network about using document.selection.createRange(). They actually provide a demo of this code … which is not working and ends with the following error shown in the console: “TypeError: document.selection is undefined”.

So far, so bad. Looks like I had to come up with my own hack and use what I have. As I said the easy way to manipulate selected content in a XUL editor is thru contentDocument.execCommand. I decided to come up with a ‘marker’ tag to mark selected text first before I continue processing it. Thus for my method to handle links I first did this:

editor.contentDocument.execCommand("hiliteColor", false, "000000");

This bascially applies a black background to the selected text, HTML wise it generates the following tags around the selection:

<span style="background-color: rgb(0, 0, 0);">...</span>

Now with the help of some jQuery magic I can easily find the selected text within my document. The following code demonstrates how I fetch an exisiting URL from the HTML code if an “a” tag is found, by accessing the “href” attribute of that tag:

    spans = $(html).find("span");
    $(spans).each( function () {
        if ($(this).attr("style") == "background-color: rgb(0, 0, 0);" ) {
            if ($(this).find("a").length) {
                url = $(this).find("a").attr("href");
            }
        }
    });

Next I display my dialog for the user to enter / change the given URL and then use this simple code to create the link or remove it if the user has deleted it so that my dialog returns an empty url:

    if (url == "") {
        editor.contentDocument.execCommand("unlink", false, url);        
    } else {
        editor.contentDocument.execCommand("createlink", false, url);        
    }

All what remains to do later on is to remove that “marker” tag after I am done with my processing, which I accomplish thru a regular expression:

patt1 = new RegExp("<span style\=\"background\-color\: rgb.0, 0, 0.;\">(.*)</span>","g");  
editor.contentDocument.documentElement.innerHTML =
        editor.contentDocument.documentElement.innerHTML.replace(patt1,"$1");

Works ! As I said: it’s a hack. It will break of course if any user decides to use black background somewhere in his document. May be I should use another less likely color for my magic, like rgb(0,0,1).

Firefox says: The requested URL could not be retrieved …

This error shows up for many people and might have many potential reasons. In my case I started getting that error after using a Firefox add-on to unblock some sites usually not accessible in my country by going through a proxy. Symptom has been that I was able to visit this site but started to get this error typically for sites in foreign countries ( not for sites in Germany ). The problem shows up only when using Firefox of course, not when using other browsers like Chrome or Internet Explorer.

Even after disabling that add-on & re-starting Firefox that problem didn’t go away. After a while I figured out that this add-on had changed my proxy settings ( that’s basically how it works ) but failed to set it back to normal.

After heading to Tools –> Options –> Advanced –> Network –> Connection Settings and changing my settings back to “No proxy” the problem was solved.

Strange behavior of Firefox 5

Since yesterday I observe some strange behavior of my Firefox 5 browser. Two of my extensions stopped working:

Both add-ons worked before and used to display some dialog box for bookmarking / sharing. Now nothing happens when trying to invoke these add-ons.

Besides Firebug 1.8.0 does not seem to work as well; I can’t find any means to enable / start it, there is for instance no icon showing up in the Add-On Toolbar, even after trying this recommendation.

The weird thing is: after I tried to use any of the two extensions mentioned above the Tools –> Add-ons feature in Firefox stops working as well: no add-ons page is displayed anymore.

And: after exiting Firefox it stays in memory ( I can see the process in Windows Task Manager ) and thus I can not re-start it without first killing that process.

Time of switch to Google Chrome as my default browser like many others are doing it these days ? Or does anyone have any idea how I can debug, investigate, mitigate or solve these problems ?

My favorites for week 10, 2011

Big GrinSomething to laugh: my favorite comic strip of the weekabout technology trade shows

CeBIT, the German IT Trade Show is over. Why do those trade shows make us feel so small, as shown in this Dilbert comic strip  ?  Let’s get back to reality. Nevertheless, it makes me feel small as well quiet often, working as an underling in a large company where everything is managed centrally, even a small travel budget worth 150 € may be.

Weekend is in sight already. Let me feel a bit bigger then …

NerdSomething to watch: my favorite video clip of the weekabout an impressive music instrument

Here is a  video coming along with some nice relaxing music and an impressive animation of a huge music instrument playing that music, a “12 Pipe Dream”. If you check out the site Dailymotion, you find there many more similar videos.

http://www.dailymotion.com/swf/video/x8lkd
12 Pipe Dream 2 von Scorpiotistic

ApplauseSomething to learn: my favorite tip of the weekabout CTRL+TAB in Firefox and other browsers

Like cycling through applications in Windows and other operating systems CTRL+TAB allows you to cycle through your tabs in Firefox. Of course this works as well in Goolge Chrome. And Internet Explorer !


And here are two more magic keys: PF8 and PF7 in Windows Command Window: Type in a view letters and then hit PF8 to insert a similar command you typed previously. Or use PF7 to popup a list of commands to select from.

  Something to enjoy: my favorite photo  on flickr under a Common Creative licenseabout a dusky lamur

IMG_6617 dusky langur (adult)
"IMG_6617 dusky langur (adult)" by Troup1.

Dusky Leaf Monkeys can be found in Malaysia, Myanmar, and Thailand. Thailand seems to be the country where Troup Dresser took this photo.

Something to talk about: my favorite quote of the weekabout inspiration

We should be taught not to wait for inspiration to start a thing. Action always generates inspiration. Inspiration seldom generates action.

Inspiration might be a rare thing, thus waiting for it might mean waiting forever. Instead: start doing. And learning. The more you learn and experience, the more food you have for some inspiration to come – sooner or later.

My favorites for week 33, 2010

Big GrinSomething to laugh: my favorite comic strip of the weekabout next generations

  This “Moderately Confused” comic strip reminds me of a day a few years ago when friends visited our house and had promised their kids that I would show them my turn table player. With big eyes they watched how I played one of those gramophone records on this strange device – strange for them of course. Man, I felt old that day.

NerdSomething to watch: my favorite video clip of the weekabout people under water

Can people walk, talk and breath under water ? Apparently they can – as long as this is no real water as in this Amazing Japanese Fake Pool.

ApplauseSomething to learn: my favorite tip of the weekabout “undo” in firefox

Hit Undo in Firefox’s Address Bar to Browse Your Recent History is a tip published by Lifehacker beginning of this week: Hit the undo shortcut (Ctrl+z/Cmd+z) in Firefox’s address bar to move through your recent history via keyboard and find tabs you’ve closed—sort of like a lightweight version of the Undo Closed Tab feature. And: You can re-open closed tabs in browsers like Firefox, Chrome, and Opera by hitting the Ctrl+Shift+T shortcut (or Cmd+Shift+T on Mac) … !

  Something to enjoy: my favorite photo  on flickr under a Common Creative licenseabout the smallest monkey of the world

Pigmy marmoset
"Pigmy marmoset" by Tambako The Jaguar.

“This is is a pygmy marmoset, which is the smallest monkey of the world. They come from Brazil …” writes Tambako the Jaguar in the description to this photo. He has an awesome collection of animal photos in his flickr photo stream.

Something to talk about: my favorite quote of the weekabout decisions made by groups of people

A committee can make a decision that is dumber than any of its members.

What is said here about a committee might hold true as well for teams or any other type of group of people. As a project manager I should believe in the power of teams, but frankly speaking I actually buy this quote. Often teams come up with a bad decision, because that decision is not derived from true thinking, intelligence and honesty, it is derived from politics and power struggle. >> Where there are people there are politics << is a quote from a PM education class about taking control of an existing project I participated in more than one year ago. My father used to give me the following advice: “Stay away from the opinion and behavior of the majority”.

Why or why does Picasaweb look so different on Windows Vista ?

After fixing the Windows Vista Flash problem on my computer I am still struggling getting my Picasa web albums showing up correctly under Windows Vista. The screen shot below shows how it looks like under Windows XP ( on the left ) and under Vista.

Damn Vista ! I am glad I found this wonderful Firefox plugin Fire/Universal Uploader which makes uploading files to Picasa a piece of cake. A real wonderful user interface reminds me at Norton Commander ( or Total Commander, one of the few pieces of software I ever paid for and don’t want to miss on any of my computers ): on the left side you see your local files and on the right your PicasaWeb albums and files. You simply select a file on the left and click on an arrow to do the upload and a status bar at the bottom visualizes nicely the progress. Or you simply drag’n’drop a file from the left or from your desktop or explorer. Real cool ! And this powerful add-on supports other sharing sites as well like youtube and flickr and many more !

Here is a screenshot from this add-on:

Bad back to my original question: Why or why does PicasaWeb look so different on Windows Vista ?

Update on September 17th, 2008: Even with the new Google Chrome browser PicasaWeb does not show up nicely on my Windows Vista box. Since PicasWeb is owned by Google I would have expected that Google’s browser would fix the issue. Nope. Obviously it is a problem far deeper down in some layer of the operating system, since it shows up no matter what browser I use.