earth tech

Another problem that has shown up recently with blogger.com recently is some strange behavior under Firefox v2.0.0.4 and v2.0.0.5 - specifically, the Posting interface, when certain buttons are clicked, does not behave as expected.

For instance, the "Link&qut; button [supposed to add an HTML anchor (A) element in the text box where the blog post is entered and/or edited:

When the link button is clicked, Firefox apparently initiates a "Drag and Drop" operation for the button image. The URL entry box pops up as expected, but the pointer cursor is changed to indicate that a drag/drop is in progress, and if the user clicks within the URL entry field on the popup, the URL of the button image [at blogger.com] is pasted into the URL entry field. If the user clicks outside the text entry field on the popup, the "drop" part of the drag/drop operation fails silently and text can be entered.

For some reason the drag operation does not provide the "NO" symbol cursor on screen areas which will not accept the dragged image.

This is almost certainly a Firefox issue, rather than Blogger issue, but it is possible that it is something funky w/ the Javascript Blogger uses. I have not examined the Javascript source or tried to replicate this error on other sites or with other browsers (although the same issue does exist with Iceweasel under Debian).

Labels: blogger, bug, firefox, iceweasel

posted by pd wilson   #   04:51

I've been using Mozilla Firefox 2.0.0.x under Windows XP and I have found a clue to the source of the problem that can be seen when resizing the Firefox browser window horizontally and the [Firefox] vertical scroll scroll bar - at some seemingly arbitrary point - disapears under the right edge of the shrinking window.

I tried to look this problem up using Google, but I didn't find much - just some forum posts on a forum I've already forgotten the name and URI of. However, there was a vital clue in the lengthy thread which didn't apply to my situation directly: the problem is triggered by some characteristic or behavior of the Status Line.

There was also some other mention of the Status bar in the threads I looked at. Someone complained that when they removed the weather.com widget from their status bar the problem cleared...

To make a long story short, I had installed a fairly large number of widgets ("add-ons") that took over various bits and chunks of the status line.

The point at which the vertical scroll bar disappears is the point at which the status bar reaches its minimum possible width based on the combined widths of whatever widgets you have installed on the status bar.

Simple, huh? Well, it took me a minute to work it out, so I thought I would share...

Labels: bug, firefox, mozilla

posted by pd wilson   #   09:42

Problem

The problem we're solving here is that Firefox does not store a page icon when a bookmark is created which launches a Javascript to e.g. open a pop-up. Specifically, while the Google Bookmarks script is handy and functional, there is no icon stored for it, which means that if we - as some are wont to do - put the Google Bookmarks shortcut on the tool bar without a Name (in the Name: field of the Properties dialog), a generic icon is used which is difficult to differentiate from the rest of the toolbar icons at a glance.

To give you an idea of how annoying this is, here's a screen-shot of typical our FF Links toolbar on a typical day:

Where is the Bookmark Icon Stored?

In looking at the Firefox bookmarks.html file we find that bookmark icons are stored as non-standard attributes of HTML A elements, each of which contain a bookmark URL as an HREF attribute.

We haven't been able to find this documented anywhere, but if we look at the Firefox bookmark file [Firefox 2.0.0.5], the bookmark for the Firefox Start Page looks something like this:

  <DT><A HREF="http://en-us.start.mozilla.com/firefox"
  LAST_VISIT="1162959544"
  ICON="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/
  9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJ
  ZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7
  ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJ
  mTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf
  8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwx
  YCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9
  ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha
  3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8
  bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAEC
  CJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzg
  ABBgAMJ5THwGvJLAAAAABJRU5ErkJggg=="
  LAST_CHARSET="ISO-8859-1"
  ID="rdf:#$.vPhC3">Firefox Start Page</A>

The example above has been line-wrapped and HTML encoded, but clearly, the icon used for this bookmark is defined by the content of the [non-standard] ICON attribute of the A element. Furthermore, we may deduce a few things from the definition shown:

• data: - this implies that something besides data might be stored here. Since we don't have a specification for this attribute value, we'll pass over this for the moment and just plan on using it "as is" - that is, we will create a bookmark that uses this same format for the ICON attribute
• image/png;base64 - This appear to be a MIME-type/encoding specification - we're guessing that the 'base64' goes with the [more obviously a MIME-type] 'image/png' since it is separated by a semi-colon instead of a comma...
• The string after the comma is obviously uuencoded data - the image itself, stored as ASCII characters pto avoid the problems inherent with trying to put binary image data in a text file]

Solution

Since

1. we don't have a base64 encoder handy,
2. we want to avoid manual editting of bookmarks.html
3. the Firefox bookmark property sheet doesn't provide a means to set the icon to use for the bookmark
4. we want to do this as much as possible within Firefox

we propose to follow the following steps to accomplish the goal of setting the ICON attribute of a bookmark which launches a Javascript target:

1. Create a Shortcut Icon Image to use in the bookmark
2. Create a webpage that has the bookmark/page icon we created
3. Navigate Firefox to the page we created
4. Boomark the page in Firefodx
5. Edit that bookmark, removing the page URL, and adding the Javascript
6. Clear the 'Name' property of the bookmark

Create an Shortcut Icon Image

Here is a link to the shortcut icon we created for the 'Add Google Bookmark' script: star-gold+16.png

This icon was created using The GIMP - a description of creating the PNG image is beyond the scope of this post.

Create a Web Page that Uses the Shortcut Icon

This is pretty simple, but assumes access to a web server - for some reason it doesn't seem to work with file:// URLs.

Here is the code for the HTML file we use:

  <html>
    <head>
      <title>example</title>
      <link rel="shortcut icon"
      href="star-gold+16.png" />
    </head>
    <body>
      <p>Example of shortcut icon META element</p>
    </body>
  </html>

This file is a here: http://blogs.earthside.org/earth_tech/uploads.html

Creating the Bookmark

Here is a screen shot of the browser showing the newly created toolbar icon - a plain file icon with labeled 'example'.

Note that you will need to click the newly created shortcut once to get the new icon to show up on the toolbar - for some reason the icon doesn't load when the shortcut is created [this can be seen if you watch the bookmarks.html file - it doesn't update until you click the new shortcut for the first time and the icon loads - it may be that the shortcut would update if FF closed, but...].

Here is a screenshot of the browser after the toolbar shortcut icon has loaded:

Next we open the properties page for the old Gmark shortcut and copy the Jacascript out of the Location field.

Below is a copy of the the Javascript - this all has to go on one line for in the bookmark Properties dialog Location field:

 javascript:(function(){var
 a=window,b=document,
 c=encodeURIComponent,
 d=a.open(
 %22http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=%22
 +(b.location)+%22&title=%22+c(b.title),%22bkmk_popup%22,
 %22left=%22+((a.screenX||a.screenLeft)+10)+%22,
 top=%22+((a.screenY||a.screenTop)+10)+%22,height=420px,width=550px,
 resizable=1,alwaysRaised=1%22);a.setTimeout(function(){d.focus()},
 300)})();

Here is a link to a text file which contains the Javascript shown above, but all on one line, so it can be easily copied and pasted [the line is 392 characters in length]: gmark.js

1. Open the properties dialog for the 'example' shortcut
2. Clear the 'Name' field
3. Paste the Javascript code into the 'Location' field
4. Hit the 'OK' button to save the bookmark

Here is a screen-shot of the 'example' properties after the above changes have been made:

The DT element line from the bookmarks.html file with the Javascript target and the custom icon [saved to a text file]: http://blogs.earthside.org/earth_tech/uploads/gmark.txt

The toolbar with the new shortcut icon which launches the Javascript to add a Google Bookmark:

Notes:

1. In the screenshot above, the button labeled "Gmark" has the script to add the current browser page to Google Bookmarks stored in its "Location" property - the script is launched when the button is clicked.
2. This functionality [add Google Bookmark] exists in the IE Google toolbar, but not in the Firefox version.
3. The Gmark button is the only button currently on the toolbar that contains a Javascript, but it's so ugly that it would be nice to have a way to add an icon to the buttons which launch Javascript before any more are added.
4. The Firefox bookmark property sheet does not provide a way to set the icon to be displayed for a given bookmark.
5. The Firefox bookmark property sheet does allow a blank "Name" property field, unlike IE, which treats the bookmark name as a filename, and hence will not allow the bookmark to exist without a filename.
6. There are almost certainly others [e.g. manually Base-64 encoding the icon image], but this solution will work for trivial cases, since it leverages the "built-in" Firefox icon storage functionality - this has the advantage of not requiring you to edit the bookmarks.html file.
7. Based on the previous note, above, it should be possible to create a PHP or CGI scripted server page which will allow this process to be somewhat automated [e.g. allow the user to select a favicon from a list, then return a page which has that image as a page icon - the Javascript could be added to the bookmark created for the generated page, preserving the ICON attribute of the bookmark A element...
8. Various of the attribute names used in the Firefox bookmarks file are not defined in HTML, and so are not properly speaking "legal" HTML - we don't really care about that here, but it's worth noting if you are interested in manipulating the bookmarks.html file directly [ignoring the instructions from mozilla to the contrary].
9. Comletely unrelated, but handy: If you click a button on the toolbar while holding down the Shift key, the target URL opens in a new window. Ctrl+<click> opens the target in a new tab.

Labels: bookmarks, firefox, graphics, icons, javascript

posted by pd wilson   #   02:40