Determining when an element is scrollable in Gecko

16 October, 2013 § 1 Comment

As a web developer, there are often times where it’s necessary to know if an element on a page is scrollable. One way of checking this would be to find the difference of element.scrollWidth and element.clientWidth. If the difference between these two properties is non-zero, then the element is scrollable. However, this doesn’t work for all cases.

In particular, element.scrollWidth and element.clientWidth clamp their values to integers. If the difference between the scrollWidth and clientWidth is less than zero, then the computed difference between the two will result in zero. This is less than good.

Starting in Firefox 16 [1], there is a new property element.scrollLeftMax which returns the difference of scrollWidth and clientWidth, including the fractional component. Also introduced is the companion element.scrollTopMax for use in determining vertical scrolling availability.

Hopefully these properties will find their way in to the other layout engines.

[1] These properties were implemented in bug 766937.

Student project: Australis-styled widgets

11 September, 2013 § 2 Comments

A couple weeks back, Gijs Kruitbosch and I began mentoring a group of students on a new student project focused on building some new Australis-styled widgets.

Team MSUThe team is comprised of students from Michigan State University’s Computer Science program. Pictured from left to right are Dan Poggi, Eric Proper, Eric Slenk, and Dave Thorpe.

The goal of the project will be to create four independent widgets using the Add-on SDK and new Australis widget API:

  1. A weather widget that can show the weather for a selected location as well as up to 5-7 additional locations. This will need to use a public and free weather API.
  2. A music playing widget that will play music located on the user’s local machine. The user can select a folder on their machine and the widget will play any media files that it can find within that folder or in that folder’s children. We may need to limit the recursive depth to 2 folders.
  3. A Bugzilla widget that will show the assigned bugs, review requests, etc. This will be based on Heather Arthur‘s excellent Bugzilla Todos dashboard.
  4. A Spartan Scoreboard widget that will show the date, opponent, and location of the next MSU sporting event, as well as the score of the previous game. It should also include a link to get more information.

Eric Proper, Eric Slenk, and David Thorpe have begun blogging about their progress. You can follow along and get more details on their respective blogs. Eric Proper has an amazing amount of detail already on his blog. I’m looking forward to seeing the blogs from Dan Poggi and Dave Thorpe.

We will be meeting weekly at 9:00am Eastern time on Thursdays throughout the Fall semester.

Increasing trust with privileged Firefox pages

23 July, 2013 § 3 Comments

For many years there has been an increased emphasis towards increasing the visibility of a website’s identity. Pages served over HTTP lack a verifiable identity, while pages served over HTTPS begin to have aspects of their identity verifiable.

When a page is viewed over a valid HTTPS connection, the web browser is able to verify the identity of the domain that it is communicating with. Firefox uses this information to place a “site identity” graphic next to the website’s URL. Clicking on this site identity graphic provides more information about the connection.

HTTPS

Clicking on the More Information button shows how often this website is accessed, in an effort towards building trust and pointing out potentially untrustworthy websites.

Page Info

When a page is viewed over a valid HTTPS connection using an Extended Validation certificate, the web browser places the certificate’s Organizational Name between the site identity graphic and the website’s URL. With Extended Validation, the web browser not only can confirm the identity of the domain that it is communicating with, but it relies on the vendor who issued the certificate to have verified the identity of the owner of the website. Again, clicking on the More Information button in the site identity panel will show prior access information.

HTTPS+EV

Within the past couple weeks a new site identity view was introduced. Now when visiting privileged Firefox webpages such as about:home, about:config, and about:addons, the site identity area will show a Firefox logo along with the “Firefox” name. Clicking on the either of these will show a panel that confirms to the user that this page is a secure Firefox page.

Nightly

This feature is expected to reach users on our Release channel during the last week of October, 2013. If you’d like to play with it today you can download and install a build of Firefox Nightly.

Picking Up The Crumbs

17 June, 2013 § 24 Comments

A few days ago a new feature landed in Firefox Nightly that makes closing multiple tabs easier than it was before.

I often find myself in situations where I have multiple tabs that I opened only to look at for short periods of time. Sometimes I reach this state while reading articles on Hacker News or looking at funny pictures on Reddit. At the end of looking at the tabs, it would be nice if Firefox had a way to close these ephemeral tabs so you can get back to your previous work quicker.

Close Tabs to The Right

Well, Firefox now does! If you open lots of tabs from Reddit and then want to close all of the tabs to the right of Reddit, just right-click on the Reddit tab and choose “Close Tabs to the Right”. It’s easy and quick!

Why “close tabs to the right” and not “close tabs to the left”? When we open new tabs they appear on the end, and so naturally tabs that have a longer lifetime end up being promoted to the start-side of the bar. This leads us towards the situation where closing tabs “to the right” is a simple way of closing the ephemeral tabs.

Users who are using Firefox with a right-to-left locale such as Hebrew or Arabic should see the equivalent “Close Tabs to the Left” feature.

Huge thanks go out to Michael Brennan who contributed the patches and automated tests for this feature! Unless something drastic happens, this feature will find its way to Firefox Release in just over 12 weeks in Firefox 24.

Animating and transitioning display:none elements

11 June, 2013 § 7 Comments

The current release of Firefox introduces a nice animation when opening and closing the Find bar. Upon opening the Find bar, the toolbar fades in and slides up. Exiting the toolbar will make it fade out and slide down.

As you may or may not know, the user interface for Firefox is implemented using XUL+HTML/CSS/JavaScript.

We use the XUL hidden attribute, which is very similar to the HTML5 hidden attribute, to hide the Find bar when it is dismissed. The presence of the hidden attribute sets display:none on the referenced element. If you’ve ever played around with CSS Transitions or Animations, you’ve probably noticed that display is not a transitionable property.

To maintain add-on compatibility, as well as code simplicity, we wanted to keep using the hidden attribute. Doing so also allowed us to leave the JavaScript unchanged.

This poses a hard problem. If display is not transitionable, how could we animate the behavior here? It turns out that visibility is a transitionable property.

The various states of visibility are atomic. There is no defined behavior for what should happen when an element transitions from visibility:hidden to visibility:visible or visibility:collapse. However, we can use a zero second duration to make the change happen at the instant that we want.

This brings us to our solution:

findbar {
  transition-property: margin-bottom, opacity, visibility;
  transition-duration: 150ms, 150ms, 0s;
  transition-timing-function: ease-in-out, ease-in-out, linear;
  margin-bottom: 0;
  opacity: 1;
}

findbar[hidden] {
  /* Override display:none to make the transition work. */
  display: -moz-box;
  visibility: collapse;
  margin-bottom: -1em;
  opacity: 0;
  transition-delay: 0s, 0s, 150ms;
}

To explain how this works we’ll start by looking at findbar[hidden], since it’s the default state for the Find bar.

When it is hidden, we will force it to be displayed (using display:-moz-box, which is an internal-to-Gecko display value, you could replace this with display:block or display:inline as needed). We then set visibility to collapse, which will effectively make the element invisible and also not consume any space (except for margins, which is important here). We then use a negative margin-bottom to force the element to be placed just out of view of the browser window. Setting opacity here is used to fade the element in and out. I’ll describe the transition-delay last.

When the Find bar is shown, we set margin-bottom to zero which will slide the toolbar up. We also set opacity to one which will make it fade in. The opposite happens in reverse when the Find bar is dismissed.

The key here is the transition-delay that is set in the findbar[hidden] case.

When the Find bar is hidden and transitions to being visible, we don’t have a transition-delay applied. This causes the visibility to change immediately at the beginning of the animation. The Find bar becomes visible and then it slides and fades in to view.

When the Find bar is visible and transitions to being hidden, we delay changing the visibility until the margin and opacity transitions have completed. Running the visibility transition immediately in this case would cause the element to disappear instantly, which would ruin the animation.

That explains how I implemented the Find bar transition in Firefox without affecting themes or having to change JS. It’s a pretty cool technique for showing and hiding elements, and has opened the doors to implementing some other types of animations in the Firefox user interface. Let me know what you think! :)

Update: I’ve been told by Frank Yan that this won’t work on non-XUL content since display:-moz-box is needed to get the visibility:collapse to work as needed. Still a cool technique to see!

Where Am I?

You are currently browsing entries tagged with firefox at JAWS.

Follow

Get every new post delivered to your Inbox.

Join 100 other followers