Settings for Tree Style Tab in Firefox 57

Firefox 57 changed the plugin API extensively, and all plugins underwent major changes. One of which was Tree Style Tab, which lets you (among other things) display tabs down the side of the page rather than across the top.

In Firefox 57, the default look with Tree Style Tab had a number of issues for me, namely:

• The regular tabs (across the top) were still visible, even when the tree tab was visible
• The box to close Tree Style Tab was disproportionately large, and I never turn it off anyway
• Each tab in the list was much thicker vertically than previously

Scouring around the internet I came up with the following changes to fix all of the above:

• Add the following to userChrome.css (sourced from this post at /r/Firefox). Create in ~/.mozilla/firefox/<custom>.default/chrome if needed:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* to hide the native tabs */
#TabsToolbar {
  visibility: collapse;
}

/* to hide the sidebar header */
#sidebar-header {
  visibility: collapse;
}

• Add the following to the "Advanced" section of the Tree Style Tab preferences from within Firefox, which mostly came from the posts at this Hacker News thread:

.closebox {
  display: none;
}

.tab:hover .closebox {
  display: block;
}

:root {
  --tab-height: 24px;
}

.tab {
  height: var(--tab-height) !important;
}

#tabbar .after-tabs {
  display: none !important;
}

• In "Hamburger" menu -> Customize, in the bottom left check "Title Bar" if you want it visible

Update 7 Apr 2020: I noticed in new installs that the visibility options weren't being applied properly. As per this comment from MikeF, you now need to go into about:settings and change toolkit.legacyUserProfileCustomizations.stylesheets to true and restart the browser. Thanks Mike!

Image Stacking in reveal.js

A while back I posted on image overlays in reveal.js. That technique seemed promising but has a problem in practice as it messed with the scaling at different resolutions.

A technique that I ended up using was to split an image section off to one side rather than overlay it on top of the text, with a link to the image original so that you could fullscreen it if desired. Multiple images can be stacked on top of one another by offsetting to top left coords.

Here's a snippet of the code:

<section id="slide-1">

  <h2>Slide Heading</h2>

  <div class="image-float">
    <p style="position: relative; left: 0; top: 0;">
        <a href="image1.jpg"><img src="image1.jpg" height="700vh"/></a></p>
    <p class="fragment" data-fragment-index="2" style="position:absolute; left:20px; top:20px;">
        <a href="image2.jpg"><img src="image2.jpg" height="700vh"/></a></p>
    <p class="fragment" data-fragment-index="4" style="position:absolute; left:40px; top:40px;">
        <a href="image3.jpg"><img src="image3.jpg" height="700vh"/></a></p>
  </div>

  <div class="content-aside">
    <p class="fragment fade-down" data-fragment-index="1">Text 1</p>
    <p class="fragment" data-fragment-index="1">Text 2</p>
    <p class="fragment" data-fragment-index="3">Text 3 (after image 2)</p>
    <p class="fragment" data-fragment-index="5">Text 4 (after image 3)</p>
  </div>
</section>

And the css for the custom classes:

.image-float {
   float: left;
   position: relative;
   top: 0;
   left: 0;
}

.reveal .content-aside {
   margin-top: 1em;
}

This technique was okay, but still not perfect, as the stacked images to offset on the left side but scaled so the right hand side sat flush on each one...something for another day.

Image Overlays in reveal.js

Update notice: I've noticed this page is getting a few hits, so I've done an update with an alternate technique that I've used in preference to the one below, which had some issues with scaling at different resolutions.

reveals.js is a fantastic little library for creating web-based presentations.

While putting a presentation together I was trying to work out how to quickly throw up images as overlays over the presentation text at the start of a slide, and then disappear to reveal the text.

With the help of a colleague^†, we worked out a couple of techniques you can apply using the reveal.js "fragment" and "current-visible" option combined with an absolute position.

Option 1 simply overlays the image and has it disappear as the next action in the presentation:

<img class="fragment current-visible" src="image.jpg"
style="position:absolute; left:210px; top:100px;"/>

For Option 2, I added a link so you can get the full-sized image if you want:

<p class="fragment current-visible"
style="position:absolute; left:120px; top:100px;">
<a href="image.jpg"><img src="image.jpg" width="1024"/></a></p>

The way reveal.js scales a presentation to a nominated size in the configuration means the absolute positioning isn't as bad to work in as it would be in a "normal" web page, you only have to get the position right once for the desired image width and it will work due to the scaling factor. It may not be the most elegant way, but it works pretty well.

_{† Okay, let's be honest, my colleague worked it all out, I just watched. Thanks GD!}

CSS Holy Grail: Sadness

Saw an article the other day on the "holy grail" of CSS layout: the three column equal height liquid layout.

The sad thing is that after all this time, there isn't a simple pure-CSS solution to this problem that doesn't involve extra divs and hacky behind the scenes manipulation. :(