Bug 72374 Fix: Different icons for bookmarklets and normal bookmarks

The following is a fix for bug 72374 that can be applied to Mozilla 1.4 and after. Prior to the bookmark rewrite in the 1.4 timeframe, the userChrome.css changes I described in the bug would fix the problem.

The reason this broke after the bookmark rewrite is that the bookmarks no longer use the URL as the ID. This fixed the problem where you couldn't have multiple bookmark copies of the same URL with different names.

Adding the following to userChrome.css will fix the problem for the Personal Toolbar because the statustext now contains the URL:

/* Mark the bookmarklets with special icons in the Personal Toolbar */
/* Fix for bug 72374 */
.bookmark-item[statustext^="javascript:"] {
  list-style-image:
     url("chrome://communicator/skin/bookmarks/bookmark-item-updated.gif") !important;
}

Unfortunately, the bookmarks don't have a way to get the URL of the bookmark except on the Personal Toolbar. Let's fix this so we can get the URL in statustext anywhere in the bookmarks.

Change the end of the bookmarks template code in chrome/comm/content/navigator/navigatorOverlay.xul like this (or grab the file or get the patch and apply it):

    <rule>
      <menupopup>
        <menuitem class="menuitem-iconic bookmark-item" uri="rdf:*"
                  label="rdf:http://home.netscape.com/NC-rdf#Name"
                  statustext="rdf:http://home.netscape.com/NC-rdf#URL"
                  status="rdf:http://home.netscape.com/WEB-rdf#status" />
      </menupopup>
    </rule>
  </template>

Then add the following to the userChrome.css to fix the bookmarks menu:

/* Mark bookmarklets with special icons in the bookmarks menu */
/* Fix for bug 72374 */
.menuitem-iconic.bookmark-item[statustext^="javascript:"] {
  list-style-image:
     url("chrome://communicator/skin/bookmarks/bookmark-item-updated.gif") !important;
}

The ideal fix for this patch would be to add a new bookmark icon instead of reusing the updated icon and would also be applied to the themes instead of placed in user chrome.

For the classic theme, fix this in bookmarks.css in chrome/classic/skin/classic/communicator/bookmarks/ by adding the following (or grab the file or get the patch and apply it):

.bookmark-item[statustext^="javascript:"], .menuitem-iconic.bookmark-item[statustext^="javascript:"] {
  list-style-image: url("chrome://communicator/skin/bookmarks/bookmarklet.gif") !important;
}

and use one of the following bookmarklet icons, named bookmarklet.gif and placed in the same directory, instead:

Yellow bookmarklet (preferred)
Blue bookmarklet

And for the modern theme, fix this in bookmarks.css in chrome/modern/skin/modern/communicator/bookmarks/ by adding the following (or grab the file or get the patch and apply it):

.bookmark-item[statustext^="javascript:"], .menuitem-iconic.bookmark-item[statustext^="javascript:"] {
  list-style-image: url("chrome://communicator/skin/bookmarks/bookmarklet.gif") !important;
}

and use the following bookmarklet icon, named bookmarklet.gif and placed in the same directory, instead:

Modern bookmarklet

Of course, if you apply the fixes to the themes, you'll have to remove the userchrome changes in order to see them. :-)

Obviously this is an easily extensible technique that could be used to show different icons for various protocols.

Copyright © 2000-2010 Tim Powell
All rights reserved.