Fix layout of main toolbar

[Rob--W]

Before this commit there were two main issues:

• In small windows, the zoom controls visually floated above the page number
• In small windows, the (transparent) zoom container covered the go-to-page
  input box, which prevented one from using the input field to quickly
  navigate to a different page.

[Snuffleupagus]

Also reduced the specifity of the CSS selectors targetting .outerCenter, because I did not find any reason for using specifity 0,1,3,1 over 0,0,2,1. It only added unnecessary complexity of maintaining the style sheet.

The reason was that we wanted to have a slightly different behaviour depending on whether the sidebar was open or not.

Generally I think these changes look good though, with one exception: The zoom controls now "snaps" to the left-hand side at a much larger window width, compared with the current CSS. (Because you removed the selectors.)

[Rob--W]

@Snuffleupagus I see. I have reverted all of my original changes, and submitted a new patch. The initially reported problems were solved by replacing 185px with 205px (otherwise the minus-button would float on the page number) and using pointer-events (to allow the user to click through the invisible wrapper).

[Snuffleupagus]

/botio-windows preview

[pdfjsbot]

From: Bot.io (Windows)

---

Received

Command cmd_preview from @Snuffleupagus received. Current queue size: 0

Live output at: http://107.22.172.223:8877/1c358b0bbaf719b/output.txt

[pdfjsbot]

From: Bot.io (Windows)

---

Success

Full output at http://107.22.172.223:8877/1c358b0bbaf719b/output.txt

Total script time: 0.33 mins

Published

• Viewer: http://107.22.172.223:8877/1c358b0bbaf719b/web/viewer.html
• Extension: http://107.22.172.223:8877/1c358b0bbaf719b/extensions/firefox/pdf.js.xpi
• Extension (AMO): http://107.22.172.223:8877/1c358b0bbaf719b/extensions/firefox/pdf.js.amo.xpi

[Snuffleupagus]

I've noticed that some browsers (IE) doesn't support pointer events, see: http://caniuse.com/#search=pointer-events.
Couldn't we instead solve this by using z-index? I think something like this would work:

#toolbarViewerLeft {
  z-index: 1;
}
.outerCenter {
  z-index: 0;
}

[Rob--W]

@Snuffleupagus The caniuse you've linked to is about (device) pointer events, not about the pointer-events CSS property. pointer-events for HTML works in IE 11.

Your z-index proposal also works, until #toolbarViewerLeft overlaps with .innerCenter (that is a child of outerCenter). When the same situation occurs with pointer-events, the minus/plus buttons are clickable at least.

[Snuffleupagus]

pointer-events for HTML works in IE 11.

Yes, but it will be an issue with the older versions (9 and 10). I don't know if it really matters though, I just wanted to ask the question. Let's wait for the official opinion.

[Snuffleupagus]

This PR will also fix: https://bugzilla.mozilla.org/show_bug.cgi?id=913747.

[Snuffleupagus]

Thanks for the patch!