506720 - Use media queries to adapt browser tools UI for portrait/landscape

Status: VERIFIED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Mark Finkle (:mfinkle) (use needinfo?)]

The browser tools UI panels (addons, downloads, etc) is currently designed for landscape UI. We can use CSS media queries to adapt the UI for portrait.

Comment 1

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: WIP

This patch moves the orientation setting from XUL elements/attributes to CSS -moz-box-* and uses media queries to switch the orientation based on .... orientation!

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

Attachment: patch

This patch handles portrait/landscape changes for wince and hildon:
* Removes the table of contents for perferences
* Adds a simple header for preferences
* Restructures the radiogroup for Error Console so we can hide the "warnings" and "messages" filters in portrait
* Adds a simple header for Error Console
* Chanages "Evaluate" to "..." to save space in Error Console
* Moves the sort radios to a second row in Downloads
* Moves the Get Add-ons Search box to a second row in Addons Manager
* Rotates the panel buttons (add-ons, downloads, prefs, etc) to the bottom of the screen when in portrait mode.
* Moved some non-pixel styles out of the browser-low browser-high files for wince

Comment 3

[:Gavin Sharp [email: [e-mail]]]

Comment on attachment 391697 [details] [diff] [review]
patch

>diff --git a/chrome/content/browser.xul b/chrome/content/browser.xul

>+    <box id="panel-container" hidden="true" class="panel-dark" top="0" left="0">
>+      <box id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
>+        <!-- <toolbarspring/> -->

Need to either restore this, or add #panel-controls {-moz-box-pack: end } in landscape mode to keep the right look.

>diff --git a/themes/hildon/browser.css b/themes/hildon/browser.css
>diff --git a/themes/wince/browser.css b/themes/wince/browser.css

Why are you hiding the warnings/messages buttons in portrait mode? I see those buttons on their own line, and there seems to be room for them (if I make the window any narrower, the "evaluate" button gets cut off):

https://people.mozilla.com/~gavin/fennec/portrait.png

I guess maybe this is only an issue with the wince theme?

I wonder whether we should group by orientation rather than by section, to avoid repeating @media blocks.

Can you indent the rules inside the @media blocks to make things easier to read?

What happened to the -moz-box-flex changes you were thinking you'd need? Was that for another bug?

Comment 4

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #3)
> (From update of attachment 391697 [details] [diff] [review])
> >+        <!-- <toolbarspring/> -->
> 
> Need to either restore this, or add #panel-controls {-moz-box-pack: end } in
> landscape mode to keep the right look.

Added the -moz-box-pack

> Why are you hiding the warnings/messages buttons in portrait mode? I see those
> buttons on their own line, and there seems to be room for them (if I make the
> window any narrower, the "evaluate" button gets cut off):

It might only be a WindowsCE low-res issue, but since it's a developer-only UI, I am erring on the conservative side. The console panel was messing up the width for all other panels. We can look at adding it back for maemo and hi-res if it becomes a problem.

> I wonder whether we should group by orientation rather than by section, to
> avoid repeating @media blocks.

Yeah, I thought about that too, but decided grouping by section might make it easier to keep the file up to date when changing things.

> Can you indent the rules inside the @media blocks to make things easier to
> read?

OK

> What happened to the -moz-box-flex changes you were thinking you'd need? Was
> that for another bug?

I could not get it to work, so I'll file a followup bug on it :(

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

pushed: http://hg.mozilla.org/mobile-browser/rev/96d2744dddb3

Comment 6

[Aakash Desai [:aakashd]]

verified FIXED On build:

Mozilla/5.0 (Windows; U; WindowsCE 5.2; en-US; rv:1.9.2b1pre) Gecko/20091009 Fennec/1.0a3

and

Mozilla/5.0 (Windows; U; WindowsCE 5.2; en-US; rv:1.9.3a1pre) Gecko/20091012 Fennec/1.0a3