Home > Articles Index > Updating a Theme for Latest Bon Echo Safe Browsing Popup

Updating a Theme for Latest Bon Echo Safe Browsing Popup

Here's a case study in how I use DOM Inspector. This article was written in August of 2006, at which time Firefox 2.0 had yet to be released and the user interface of Bon Echo (the prerelease version of Firefox 2.0) and its representation as DOM elements was changing frequently.

The situation is this. Recall that Bon Echo displays a popup warning you of a potential phishing site when you visit a suspect page, such as the test page at http://www.google.com/tools/firefox/safebrowsing/phish-o-rama.html. Here's how it looks in Bon Echo using the current default theme.

I have a theme that used to work to style the safe-browsing popup for Bon Echo, but as of one of the recent nightly builds (on or around 2006-08-01) the popup has started looking wrong. Here's how it used to look.

Here's how it looks now, which is obviously wrong.

I know my CSS rules for that part of the UI have not changed, so I assume something changed within the DOM structure used by Bon Echo to represent that popup. I'll use DOM Inspector (hereafter called DOMi) to take a look at the DOM tree for the popup to get an idea of what's going on.

Step One: Compare DOM Trees in DOM Inspector

First, I'll grab a snapshot of the relevant DOM tree from the 2006-07-24 version on Bon Echo. This is a version where the theme handles the popup correctly. This DOM tree will give me a reference for how it used to be done. Here's the DOM tree.

Next, I'll reopen the latest Bon Echo to scope out the DOM tree there and see what's changed. Again, here's a screenshot of what DOMi shows as the DOM tree for the popup, which the theme is now not handling correctly.

So what's changed? In general, we can see that:

  1. It's mostly the same. Same tree, same element types, same IDs, same classes.
  2. Several changes in the area of the popup title area and close box. Some name changes, some structure changes.
  3. Everything from description#safebrowser-palm-content on down is the same.
  4. Within vbox#safebrowsing-message-content, changes to the representation of the close box and the title:
    • element type for safebrowsing-palm-message-titlebox changed from 'hbox' to 'description'
    • the close box used to be subordinate to the safebrowsing-palm-message-titlebox in the DOM tree, now it's on a parallel level and preceding it
    • the image#safebrowsing-palm-title-icon has been removed (hmm wassup with that? it's still present in the popup, how are they representing it now?)
    • the container for the close button has been changed from vbox to hbox and given a name of its own, safebrowsing-palm-close-container
    • the spacer has been moved into the safebrowsing-palm-close-container
    • the class 'safebrowsing-palm-title' is no longer used
  5. The class assignments look about the same or close enough, except that safebrowsing-palm-message-bubble has been removed as a class from one of the vboxen.

Now that I have a general overview of what's different I can look at my CSS rules and maybe come up with some quick changes to make it work again. Trial and error will get this done, although I'll refer back to the DOM tree for guidance.

Step Two: Examine the CSS

Now to have a look at the CSS. I'll start by looking at the CSS contained in the default theme for the latest Bon Echo, then compare it what I'm using right now in my theme.

Step Three: Synthesize Changes for CSS

I'll edit my CSS to take into account the changes to the DOM structure. I add the z-index to the close container and change the selector '.safebrowsing-palm-message-bubble' into '#safebrowsing-palm-message-content' for the following rule:

#safebrowsing-palm-message-content
{
  background-color: white;
  -moz-box-sizing: border-box;
  -moz-border-radius: 10px;
  margin-top: -5px;
  padding: 10px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  z-index: 1;

  border: 10px solid white;
  -moz-border-radius: 0;
  background-color: #eeeeee;
}

We end up with this popup:

driven by this ruleset, in browser/safebrowsing/browser-protection.css for my theme (not from the Bon Echo default theme):

#safebrowsing-palm-message {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
}

#safebrowsing-palm-message-content
{
  background-color: white;
  -moz-box-sizing: border-box;
  -moz-border-radius: 10px;
  margin-top: -5px;
  padding: 10px;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  z-index: 1;

  border: 10px solid white;
  -moz-border-radius: 0;
  background-color: #eeeeee;
}

.safebrowsing-palm-fixed-width {
  width: 400px;
  max-width: 400px;
}

.safebrowsing-palm-title {
  font-size: 20px;
  font-weight: bold;
}

#safebrowsing-palm-title-icon {
  height: 24px;
  width: 24px;
  max-height: 24px;
}

.safebrowsing-palm-paragraph {
  padding-bottom: 2em;
}

#safebrowsing-palm-close {
  cursor: pointer;
  max-width: 16px !important;
  height: 16px;
  width: 16px;
  z-index: 10;
  list-style-image: url("chrome://browser/skin/safebrowsing/close16x16.png");
}

#safebrowsing-palm-message-tail-container {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  border-right: 2px solid;
  z-index: 3;
  height: 67px;
  margin: 0;
  padding: 0;
  border: 0px solid black;
}

#safebrowsing-palm-message-tail {
  height: 67px;
  width: 24px;
  max-width: 24px;
  z-index: 3;
}

#safebrowsing-palm-message-titlebox {
  background-image: url("chrome://browser/skin/safebrowsing/warning24x24.png");
  background-repeat: no-repeat;
  background-position: top left;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-left: 0px;
  min-height: 26px;
}

#safebrowsing-palm-message-title {
  padding-left: 5px;
}

#safebrowsing-palm-message-actionbox {
  padding: 10px 10px 15px;
  text-align: center;
}

.safebrowsing-palm-bigtext {
  font-size: 14px;
  font-weight: bold;
}

.safebrowsing-palm-smalltext {
  font-size: 10px;
}

#safebrowsing-palm-google-logo {
  height: 32px;
  max-height: 32px;
  width: 78px;
}

#safebrowsing-page-canvas {
  position: fixed;
}

#safebrowsing-dim-area-canvas {
  background-image: url("chrome://browser/skin/safebrowsing/dim.png");
/*  height: 0px; */
  position: fixed;
}

#safebrowsing-pref-caption {
  background-color: #2222EE;
}

#safebrowsing-pref-caption text {
  text-align: center;
  color: #FFFFFF;
  font-size: 150%;
  font-family: arial, helvetica, sans-serif;
}

#safebrowsing-urlbar-icon {
  padding-right: 2px;
}

#safebrowsing-urlbar-icon[level="safe"] {
  list-style-image: none;
}

#safebrowsing-urlbar-icon[level="warn"] {
  list-style-image: url("chrome://browser/skin/safebrowsing/warning16x16.png");
}

#safebrowsing-dim-area-transp {
  background-image: url("chrome://browser/skin/safebrowsing/dim.png");
  height: 0px;
  left: 0px;
  top: 0px;
  position: fixed;
  display: none;
}

#safebrowsing-palm-content {
  margin-left: 0;
  margin-right: 0;
  -moz-margin-start: 1px;
  -moz-margin-end: 0;
}

#safebrowsing-palm-extended-message .safebrowsing-palm-paragraph {
  margin-left: 0;
  margin-right: 0;
  -moz-margin-start: 1px;
  -moz-margin-end: 0;
}

/* add this for new element in DOM */
#safebrowsing-palm-close-container {
  height: 16px;
  margin: 0;
  padding: 0;
}
Step Four: Refine the CSS

This is close but the margins, padding and alignment are off. First, I'll add a bg color to the title so I can see what's going on there:

#safebrowsing-palm-message-titlebox {
  background-image: url("chrome://browser/skin/safebrowsing/warning24x24.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-color: #ff00cc;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-left: 0px;
  min-height: 26px;
}

which gives me this.

I can see that the background icon is correctly aligned with the left and top edges of the titlebox, but that the titlebox is incorrectly indented. Now I'll crank up DOMi and see what the margins and padding are doing.

If I select the titlebox element and choose "Box Model" for the right panel of DOMi, it shows me right away that the titlebox has margins, which I don't want. These must be from the fact that it is now represented as a "description" rather than an "hbox", with the default formatting for description including margins. We'll do away with those by adding a rule "margin: 0;" to the titlebox.

Also, looking at the corresponding CSS in Bon Echo's default theme:

#safebrowsing-palm-message-titlebox {
  background-image: url("chrome://browser/skin/safebrowsing/warning24x24.png");
  background-repeat: no-repeat;
  background-position: top left;
  text-indent: 30px;
  padding: 0 0 5px;
  margin-top: -16px;
  font-size: 120%;
  font-weight: bold;
  min-height: 26px;
}

we see that it uses a text-indent setting to align the text, and a negative top margin to line up with the close box. We'll uses these settings as well.

Finally, looking at our old settings for .safebrowsing-palm-title, which class no longer exists, we see that we were setting the font size and weight there:

.safebrowsing-palm-title {
  font-size: 20px;
  font-weight: bold;
}

so we'll add these to our rules for safebrowsing-palm-message-titlebox as well, yielding:

#safebrowsing-palm-message-titlebox {
  background-image: url("chrome://browser/skin/safebrowsing/warning24x24.png");
  background-repeat: no-repeat;
  background-position: top left;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-left: 0px;
  min-height: 26px;
  text-indent: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  margin-top: -16px;
}

Applying these changes to the theme and restarting Bon Echo gives us this:

which is exactly what we want.

Wrapping It Up

I like the wider spacing between the text links "Get me out of here!" and "Ignore this warning" seen in previous Bon Echo releases, but I'll live with it for now. As Bon Echo gets closer to being "set in stone" as an official Firefox 2.0 release, I'll be a lot more willing to fine-tune those kinds of things, without having to worry about whether a Bon Echo change down the road makes it a wasted effort.

Mozilla Firefox and the Firefox logo are trademarks of the Mozilla Corporation. All rights reserved.
All material on this site is copyright the authors. All rights reserved.

See special note about browser compatibility.