Last Comment Bug 575403 - Create an Android theme for Fennec
: Create an Android theme for Fennec
Status: VERIFIED FIXED
:
Product: Fennec Graveyard
Classification: Graveyard
Component: General (show other bugs)
: Trunk
: ARM Android
: -- normal (vote)
: ---
Assigned To: Mark Finkle (:mfinkle) (use needinfo?)
:
:
Mentors:
: 590393 596625 601820 (view as bug list)
Depends on: 582583 590777 590817 600101 601048 602671 605348 605544 618989
Blocks: 604946
  Show dependency treegraph
 
Reported: 2010-06-28 15:07 PDT by Madhava Enros [:madhava]
Modified: 2012-01-22 12:09 PST (History)
15 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
wip (458.80 KB, patch)
2010-09-22 03:58 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
first draft - urlbar screenshot (64.42 KB, image/png)
2010-09-22 04:00 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details
wip v0.2 (387.98 KB, patch)
2010-09-24 09:02 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
urlbar screenshot (52.08 KB, image/png)
2010-09-24 09:04 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details
Initial batch of hdpi icons (50.01 KB, application/zip)
2010-09-29 08:33 PDT, Sean Martell
no flags Details
wip - v0.3 (361.25 KB, patch)
2010-09-30 10:16 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
screenshot 1 (27.09 KB, image/png)
2010-09-30 10:16 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details
screenshot 2 - unfinished tabs (32.65 KB, image/png)
2010-09-30 10:17 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details
wip-0.3 - enhance (354.01 KB, patch)
2010-10-01 07:07 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
Patch - part 1 - chrome border (166.73 KB, patch)
2010-10-04 09:34 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
Screenshots - part 1 (208.30 KB, image/png)
2010-10-04 11:08 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details
Patch - part 1 - chrome border (168.10 KB, patch)
2010-10-04 11:12 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
Patch - part 1 - chrome border - updated (171.53 KB, patch)
2010-10-06 09:35 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
Patch - part 1 - chrome border v0.2 (174.37 KB, patch)
2010-10-07 04:58 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mark.finkle: review+
Details | Diff | Splinter Review
Patch - part 1 - chrome border v0.3 (172.45 KB, patch)
2010-10-07 11:26 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mark.finkle: review+
Details | Diff | Splinter Review
Patch - part 1 - chrome border v0.4 (130.33 KB, patch)
2010-10-07 20:49 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mark.finkle: review+
mbrubeck: review-
Details | Diff | Splinter Review
latest unbitrotted (130.58 KB, patch)
2010-10-15 12:57 PDT, Mark Finkle (:mfinkle) (use needinfo?)
no flags Details | Diff | Splinter Review
test patch (no gradients or shadows) (130.58 KB, patch)
2010-10-15 14:01 PDT, Mark Finkle (:mfinkle) (use needinfo?)
no flags Details | Diff | Splinter Review
real test patch (no gradients and shadows) (130.11 KB, patch)
2010-10-15 14:15 PDT, Mark Finkle (:mfinkle) (use needinfo?)
mbrubeck: review+
Details | Diff | Splinter Review
hdpi panel arrows (3.29 KB, application/zip)
2010-10-15 15:03 PDT, Sean Martell
no flags Details
hdpi pngs (128.74 KB, application/zip)
2010-10-17 18:17 PDT, Sean Martell
no flags Details
inactive tab bg (1.07 KB, image/png)
2010-10-18 09:32 PDT, Sean Martell
no flags Details
Patch - part 1 - chrome sidebars and urlbar gradients (6.19 KB, patch)
2010-10-18 10:17 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
no flags Details | Diff | Splinter Review
Patch v0.2 - part 1 - chrome sidebars and urlbar gradients (6.20 KB, patch)
2010-10-18 10:51 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mark.finkle: review+
Details | Diff | Splinter Review
bookmarked star PNG (2.62 KB, image/png)
2010-10-18 11:13 PDT, Sean Martell
no flags Details
revised tab close buttons (7.83 KB, application/zip)
2010-10-18 12:46 PDT, Sean Martell
no flags Details
Awesomescreen notification small icons (2.78 KB, application/zip)
2010-10-18 13:33 PDT, Sean Martell
no flags Details
Patch - part 1 - chrome panel row (11.33 KB, patch)
2010-10-19 05:31 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mark.finkle: review+
Details | Diff | Splinter Review
Down arrow for in-page search (1.88 KB, image/png)
2010-10-19 10:53 PDT, Sean Martell
no flags Details
Up arrow for in-page search (1.89 KB, image/png)
2010-10-19 10:54 PDT, Sean Martell
no flags Details
stop glyph (not sure if this was uploaded yet) (1.55 KB, image/png)
2010-10-19 10:57 PDT, Sean Martell
no flags Details
patch for stop button (4.51 KB, patch)
2010-10-19 11:20 PDT, Mark Finkle (:mfinkle) (use needinfo?)
mbrubeck: review+
Details | Diff | Splinter Review
Beta icon with proper styling (2.55 KB, image/png)
2010-10-19 11:24 PDT, Sean Martell
no flags Details
prefs seperator grey gradient (2.28 KB, image/png)
2010-10-19 12:46 PDT, Sean Martell
no flags Details
pressed endcap to match search field mockup (3.41 KB, image/png)
2010-10-19 13:07 PDT, Sean Martell
no flags Details
video glyphs (mute, unmute, play, pause) (8.50 KB, application/zip)
2010-10-19 13:50 PDT, Sean Martell
no flags Details
search glass icon for in-page search field (1.72 KB, image/png)
2010-10-19 14:44 PDT, Sean Martell
no flags Details
EV default gradient (1.02 KB, image/png)
2010-10-19 14:52 PDT, Sean Martell
no flags Details
SSL default gradient (1.03 KB, image/png)
2010-10-19 14:53 PDT, Sean Martell
no flags Details
blue color shift fix (11.08 KB, application/zip)
2010-10-19 14:58 PDT, Sean Martell
no flags Details
Patch - part 1 - chrome sidebars buttons pressed state (3.38 KB, patch)
2010-10-20 13:38 PDT, Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)
mbrubeck: review+
Details | Diff | Splinter Review
patch: search box background (3.34 KB, patch)
2010-10-20 13:55 PDT, Matt Brubeck (:mbrubeck)
mark.finkle: review+
Details | Diff | Splinter Review
Larry color icons (6.56 KB, application/zip)
2010-10-20 15:16 PDT, Sean Martell
no flags Details
patch (1.96 KB, patch)
2010-10-20 15:37 PDT, Matt Brubeck (:mbrubeck)
mark.finkle: review+
Details | Diff | Splinter Review
Search bar background tweaks, v2 (5.63 KB, patch)
2010-10-20 15:54 PDT, Matt Brubeck (:mbrubeck)
mark.finkle: review+
Details | Diff | Splinter Review
Larry closed lock (1.44 KB, image/png)
2010-10-20 15:57 PDT, Sean Martell
no flags Details
task icons (8.85 KB, application/zip)
2010-10-20 16:15 PDT, Sean Martell
no flags Details
task buttons for desktop and maemo (14.80 KB, patch)
2010-10-21 13:56 PDT, Mark Finkle (:mfinkle) (use needinfo?)
mbrubeck: review+
Details | Diff | Splinter Review

Description Madhava Enros [:madhava] 2010-06-28 15:07:05 PDT
The current Fennec theme is an original creation, somewhat influenced by Maemo norms. We should create an Android specific theme for Fennec on Android devices that fits better there, while still maintaining some cross-platform Fennec distinctiveness.

Typically, we try to maintain glyphs/icons and overall layout across platforms, while altering button shape, colors, and textures to fit better with the host platform conventions.

As a starting point, here are some links to exemplar Android apps:

Twitter app UI example:
http://android-developers.blogspot.com/2010/05/twitter-for-android-closer-look-at.html

doubletwist media app:
http://blog.cocoia.com/2010/doubletwist-android-media-player-app/

Stock froyo UI:
http://smarterware.org/6085/android-2-2-screenshot-tour-my-favorite-features-in-froyo
Comment 1 Madhava Enros [:madhava] 2010-06-30 08:40:38 PDT
Related: bug 570514 - Need status bar icons for Android
Comment 2 Dietrich Ayala (:dietrich) 2010-08-24 06:56:06 PDT
Please take lower resolution phones into account in the design. I use the HTC Wildfire (240x320), and Fennec is unusable there because the UI elements are gigantic at that resolution - while any other app I use sizes itself appropriately.
Comment 3 Matt Brubeck (:mbrubeck) 2010-08-25 16:57:51 PDT
More details about low-resolution display support in bug 590777.
Comment 4 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-22 03:58:58 PDT
Created attachment 477461 [details] [diff] [review]
wip

* This patch is not a final version, it is not even a real wip *

This is just an experiment to see how far we could go by just tweaking the css and how much work the new theme required and the experiment is in a very very early stage, the only stuff I've play with is the background and the urlbar look for now (so not that much)
Comment 5 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-22 04:00:11 PDT
Created attachment 477462 [details]
first draft - urlbar screenshot
Comment 6 Mark Finkle (:mfinkle) (use needinfo?) 2010-09-23 11:46:42 PDT
*** Bug 590393 has been marked as a duplicate of this bug. ***
Comment 7 Sean Martell 2010-09-23 12:02:42 PDT
I've uploaded a page with the beginnings of converting my mockups to CSS. Disregard how I align the glyphs, elements, etc as it is hackish :)  This is merely a staging area for CSS styles to be incorporated into the working theme.

http://mozilla.seanmartell.com/fennec/fimo/androidUI/index.html

*** I'll update the page with more elements as they are created. ***
Comment 8 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-24 09:02:51 PDT
Created attachment 478284 [details] [diff] [review]
wip v0.2

I've uploaded the patch to use the CSS from the page linked in the previous comment and it looks much better. I appreciate particularly that we use CSS now to style the left/right sides of the urlbar and not images anymore.
This has 3 benefits compare to what we do actually in my opinion:
 * this looks better :)
 * easier to maintain for the RTL cases
 * the fennec package will be a bit smaller

I can't wait to have the others part of the theme to update the patch!
Comment 9 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-24 09:04:12 PDT
Created attachment 478286 [details]
urlbar screenshot

Screenshot with the css from Martell's mockup.
Comment 10 Mark Finkle (:mfinkle) (use needinfo?) 2010-09-28 20:24:38 PDT
*** Bug 596625 has been marked as a duplicate of this bug. ***
Comment 11 Sean Martell 2010-09-29 08:33:40 PDT
Created attachment 479398 [details]
Initial batch of hdpi icons
Comment 12 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-30 10:16:06 PDT
Created attachment 479817 [details] [diff] [review]
wip - v0.3

The only things style by this patch is the main front-end view (screenshots can let think more is done)
Comment 13 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-30 10:16:35 PDT
Created attachment 479818 [details]
screenshot 1
Comment 14 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-09-30 10:17:28 PDT
Created attachment 479819 [details]
screenshot 2 - unfinished tabs
Comment 15 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-01 07:07:21 PDT
Created attachment 480103 [details] [diff] [review]
wip-0.3 - enhance

Same patch as previous but with a few more tweaks
Comment 16 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-04 09:34:02 PDT
Created attachment 480644 [details] [diff] [review]
Patch - part 1 - chrome border

This patch change the CSS and icons for the permanent non-moving chrome UI.
This mean the patch does _not_ tweak (yet):
 * panels (awesome results, preferences, downloads, etc...)
 * Alert/Prompt/Confirm/Notification... popups
 * Site menu
 * Open Search list
Comment 17 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-04 11:08:42 PDT
Created attachment 480667 [details]
Screenshots - part 1

The screenshot illustrate the previous comment.
Comment 18 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-04 11:12:07 PDT
Created attachment 480668 [details] [diff] [review]
Patch - part 1 - chrome border

fix a small bug with the feedback panel.
Comment 20 Sean Martell 2010-10-04 11:35:27 PDT
you can indeed.

re: the styles - looking good!  for the Prefs pane, the background behind the title "Preferences" should be the blue color all the way throughout, not grey.
Comment 21 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-04 11:38:26 PDT
(In reply to comment #20)

> re: the styles - looking good!  for the Prefs pane, the background behind the
> title "Preferences" should be the blue color all the way throughout, not grey.

The "Preferences" row be going away in bug 601048. But if it stays, it will be styled as you mentioned.
Comment 22 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-04 18:18:05 PDT
*** Bug 601820 has been marked as a duplicate of this bug. ***
Comment 23 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-06 09:35:45 PDT
Created attachment 481246 [details] [diff] [review]
Patch - part 1 - chrome border - updated

Patch updated on trunk.

As seen on IRC it would make life easier if instead of having one bug for all the theme refactoring we could have a few:
 * chrome side borders (this one)
 * Site Menu / Open Search Menu
 * Every other popups
 * Inner right panels
 * Awesome results

This would help everyone figure out what's wrong in each part and also allow different people to work on different parts.

I will open bugs for that
Comment 24 Madhava Enros [:madhava] 2010-10-06 10:38:37 PDT
Just so that the mockups are referenced somewhere in the bug, they're here:
http://www.flickr.com/photos/madhava_work/sets/72157624962763028/detail/
Comment 25 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-06 12:19:19 PDT
Comment on attachment 481246 [details] [diff] [review]
Patch - part 1 - chrome border - updated

* Wondering if we can come up with a simpler name for "browser-control-button"
* Do we still need "page-button", "panel-button" and "button-image" classes?
* Can you unbitrot the patch please?
Comment 26 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-07 04:58:33 PDT
Created attachment 481469 [details] [diff] [review]
Patch - part 1 - chrome border v0.2

(In reply to comment #25)
> * Wondering if we can come up with a simpler name for "browser-control-button"

I have renamed the class to button-control to stays in the same naming convention as button-dark, button-text; ...

> * Do we still need "page-button", "panel-button" and "button-image" classes?

Removed, it still stays a block of CSS for the navigations button of find/form helper that will be removed once we will have icons for those 2 buttons.

> * Can you unbitrot the patch please?

Done.
Comment 27 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-07 08:15:45 PDT
Comment on attachment 481469 [details] [diff] [review]
Patch - part 1 - chrome border v0.2

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

>             <notificationbox id="addons-messages" flex="1">
>               <richlistbox id="addons-list" flex="1" onselect="ExtensionsView.hideOnSelect(event)">
>-                <label id="addons-list-header" class="panel-header" value="&addonsHeader.label;"/>

You are removing the "Add-ons" panel-header here. Madhava wants to keep it.

>-                <richlistitem id="addons-local" class="section-header" align="center" nohighlight="true">
>+                <richlistitem id="addons-local" class="panel-header section-header" align="center" nohighlight="true">

Don't use "panel-header" for the "Your add-ons" section header.

-----
Remove the geo-16.png and geo-16.png.orig images

r+ with nits fixed
Comment 28 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-07 11:26:45 PDT
Created attachment 481585 [details] [diff] [review]
Patch - part 1 - chrome border v0.3

This one address comments and also include a few fixes for RTL and correct a bug with the calculation of tabs columns count (this is a bit dirty and can be enhance later in my opinion)
Comment 29 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-07 14:37:30 PDT
File a followup bug for the XXX (use of constants)
Comment 30 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-07 16:13:11 PDT
http://hg.mozilla.org/mobile-browser/rev/f316a2ba79f9

Filled bug 602669 for the XXX.
Filled bug 602671 for styling the Site Menu / Open Search Menu
Filled bug 602674 for styling the other popups
Filled bug 602675 for styling the inner right panels
Filled bug 602677 for styling the awesome results
Comment 31 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-07 17:53:41 PDT
Txul increase 23.2% on Nokia n900 mobile

The patch has been backouted, we're looking Txul to see if it was guilty
Comment 32 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-07 20:49:22 PDT
Created attachment 481751 [details] [diff] [review]
Patch - part 1 - chrome border v0.4

Pretty the same patch as before except:
 * no more gradients on the right/left/top bar for the moment
 * less shadow
    - no more shadown above the urlbar
    - some inset shadow/gradient of the urlbar have been factorized
 * some images have been stripped down
 * remove unuseful images
 * rename some :active:hover to :hover:active since this what we use commonly
Comment 33 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-07 21:16:29 PDT
Comment on attachment 481751 [details] [diff] [review]
Patch - part 1 - chrome border v0.4

Let's land this and see the talos effects.
Comment 34 Matt Brubeck (:mbrubeck) 2010-10-07 22:15:23 PDT
Comment on attachment 481751 [details] [diff] [review]
Patch - part 1 - chrome border v0.4

I'd like to review this for efficient CSS selectors, ala https://developer.mozilla.org/en/writing_efficient_css
Comment 35 Matt Brubeck (:mbrubeck) 2010-10-08 10:55:19 PDT
Comment on attachment 481751 [details] [diff] [review]
Patch - part 1 - chrome border v0.4

This is just a list of all the potential selector improvements I found.  You
or Mark can choose which ones are worth the trouble to fix.  I noted which
ones appeared to be most important.

>+++ b/themes/core/browser.css

>+#urlbar-container .urlbar-cap-button {
>+#urlbar-container .urlbar-cap-button[open="true"],
>+#urlbar-container .urlbar-cap-button:hover:active {

Remove the "#urlbar-container" descendant selector if possible, or replace
with child selectors.

>+#urlbar-icons > #tool-reload {
>+#urlbar-icons > #tool-stop {
>+#urlbar-icons > #tool-search {

Get rid of the child selector unless it is necessary.

>+#content-stack > div:-moz-focusring {
>+  outline: 0 !important;
> }

Give the div an ID and remove the child selector.  (Requires a match for every
<div> but fortunately we don't have many divs.)

> #tabs > * {

Unrelated to this patch, but we really need to replace this universal
selector.  (Very important because it will do a test for *every* element.)

>+#content-navigator > hbox > toolbarbutton {

Add a class and use a simple class selector.  (Important because it requires a
child selector test for every <toolbarbutton>.)

>+++ b/themes/core/platform.css

>+.toggle-dark:not([disabled=true]) radio:hover:active,
> .toggle-dark radio[selected] {
> .toggle-dark radio:first-child {
> .toggle-dark radio:first-child:-moz-locale-dir(rtl) {
>+.toggle-dark:not([disabled=true]) radio:first-child:hover:active,
> .toggle-dark radio:first-child[selected] {
>+.toggle-dark:not([disabled=true]) radio:first-child:hover:active:-moz-locale-dir(rtl),
> .toggle-dark radio:first-child[selected]:-moz-locale-dir(rtl) {
> .toggle-dark radio:last-child {
> .toggle-dark radio:last-child:-moz-locale-dir(rtl) {
>+.toggle-dark:not([disabled=true]) radio:last-child:hover:active,
> .toggle-dark radio:last-child[selected] {
>+.toggle-dark:not([disabled=true]) radio:last-child:hover:active:-moz-locale-dir(rtl),
> .toggle-dark radio:last-child[selected]:-moz-locale-dir(rtl) {
> .toggle-dark radio:first-child:last-child {
>+.toggle-dark:not([disabled=true]) radio:first-child:last-child:hover:active,
> .toggle-dark radio:first-child:last-child[selected] {

Would be faster with child selectors.  (Existing problem, not caused by this
patch.  Important because it requires a slow descendant test for every
<radio>.)

>+.panel-row-header > toolbarbutton {

Add a class, use a simple class selector.  (Important because it requires
a child test for every <toolbarbutton>.)

>+.panel-row-header > toolbarbutton.choice-all {
>+.panel-row-header > toolbarbutton.choice-bookmarks {
>+.panel-row-header > toolbarbutton.choice-history {
>+.panel-row-header > toolbarbutton.choice-remotetabs {

Remove the "toolbarbutton" from these selectors.  Could also replace the child
selector with a new class as in the previous note.

>+  .panel-row-header > toolbarbutton .toolbarbutton-text {
>+.panel-row-header > toolbarbutton .toolbarbutton-text {
>+.panel-row-header > toolbarbutton .toolbarbutton-text:-moz-locale-dir(rtl) {
>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-icon {
>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {

Descendant selectors. Use all child selectors if possible.
Comment 36 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-08 11:06:29 PDT
Thanks for your opinion Matt, I will try to fix some in a new version of the patch, I will ignore those related to toggle since this will probably take places into the bug for styling the right panels.
Comment 37 Matt Brubeck (:mbrubeck) 2010-10-08 11:16:59 PDT
Comment on attachment 481751 [details] [diff] [review]
Patch - part 1 - chrome border v0.4

>+.panel-row-header > toolbarbutton .toolbarbutton-text {
>+  text-align: left;
>+  text-shadow: rgba(0,0,0,0.3) 0 2px;
>+}

>+.panel-row-header > toolbarbutton .toolbarbutton-text:-moz-locale-dir(rtl) {
>+  text-align: right;
>+}

>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
>+  color: #aaa;
>+}

>+.panel-row-header > toolbarbutton[disabled="true"] .toolbarbutton-text {
>+  color: #aaa;
>+}

I just realised, for rules like these I think you can use CSS inheritance and get rid of the ".toolbarbutton-text" part.  If you do this, then you can also speed things up even more if you replace "toolbarbutton" with a class.  For example:

 <toolbarbutton class="panel-row-header-button">

 .panel-row-header-button[disabled="true"] {
   color: #aaa;
 }

Also, the last rule above appears to be duplicated.
Comment 38 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-15 12:57:09 PDT
Created attachment 483572 [details] [diff] [review]
latest unbitrotted

Just unbitrotted
Comment 39 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-15 14:01:30 PDT
Created attachment 483601 [details] [diff] [review]
test patch (no gradients or shadows)

This patch further strips Vivien's second patch and makes many of the CSS selector changes Matt wanted.

I want to land this, even temporarily, to see the performance hit.
Comment 40 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-15 14:15:24 PDT
Created attachment 483606 [details] [diff] [review]
real test patch (no gradients and shadows)

Uploaded the wrong patch
Comment 41 Matt Brubeck (:mbrubeck) 2010-10-15 14:19:36 PDT
Comment on attachment 483606 [details] [diff] [review]
real test patch (no gradients and shadows)

This looks fine for test purposes.
Comment 42 Sean Martell 2010-10-15 15:03:22 PDT
Created attachment 483634 [details]
hdpi panel arrows
Comment 43 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-15 22:20:43 PDT
We landed this:
http://hg.mozilla.org/mobile-browser/rev/f52b5b45c047

But I wouldn't say it's fixed yet. We have some cleanup and minimal changes to add first - for beta 2. We also have some fixes for the identity panel in bug 602671, also for beta 2.

Once we do some cleanup, this can be marked fixed.
Comment 44 Sean Martell 2010-10-17 18:17:23 PDT
Created attachment 483880 [details]
hdpi pngs

sliced up all the gradients etc to add as bgs to the elements. shadowed bevels within elements added to the bg PNGs now, so they can be removed as box-shadow in code. ping me in IRC for specific border colors for any elements that require drop shadows, or, if we can perhaps re-use those current inset box-shadows as outset ones for the element dropshadows.
Comment 45 Sean Martell 2010-10-18 09:32:27 PDT
Created attachment 483998 [details]
inactive tab bg
Comment 46 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-18 10:17:17 PDT
Created attachment 484009 [details] [diff] [review]
Patch - part 1 - chrome sidebars and urlbar gradients

The patch uses sean's gradient images for the urlbar and the sidebars
Comment 47 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-18 10:51:03 PDT
Created attachment 484018 [details] [diff] [review]
Patch v0.2 - part 1 - chrome sidebars and urlbar gradients

This patch fix a bug discovered by Matt when the window is in landscape mode
Comment 48 Sean Martell 2010-10-18 11:13:55 PDT
Created attachment 484028 [details]
bookmarked star PNG

now in autumn yellows.
Comment 49 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-18 12:16:14 PDT
Comment on attachment 484018 [details] [diff] [review]
Patch v0.2 - part 1 - chrome sidebars and urlbar gradients

Let's rename xxxBackground.png -> xxx-bg.png

example:
urlbarBackground.png -> urlbar-bg.png
Comment 50 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-18 12:46:02 PDT
pushed vivien's patch with my nits and the new star image:
http://hg.mozilla.org/mobile-browser/rev/1e23824fbd7e
Comment 51 Sean Martell 2010-10-18 12:46:34 PDT
Created attachment 484053 [details]
revised tab close buttons
Comment 52 Sean Martell 2010-10-18 13:33:33 PDT
Created attachment 484078 [details]
Awesomescreen notification small icons
Comment 53 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-19 05:31:24 PDT
Created attachment 484277 [details] [diff] [review]
Patch - part 1 - chrome panel row

The patch use the images for panel rows and the new bookmarked and remote-tab images for the awesomepanel.
Comment 54 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-19 06:13:59 PDT
Comment on attachment 484277 [details] [diff] [review]
Patch - part 1 - chrome panel row

Use "-hdpi.png" on the images that were added. It's the new way we will separate images used for high and medium resolution devices.

Watch Twinopen after landing, as usual.
Comment 55 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-19 06:35:05 PDT
Pushed the panel rows change:
http://hg.mozilla.org/mobile-browser/rev/14c624774e10
Comment 56 Sean Martell 2010-10-19 10:53:57 PDT
Created attachment 484367 [details]
Down arrow for in-page search
Comment 57 Sean Martell 2010-10-19 10:54:18 PDT
Created attachment 484368 [details]
Up arrow for in-page search
Comment 58 Sean Martell 2010-10-19 10:57:14 PDT
Created attachment 484371 [details]
stop glyph (not sure if this was uploaded yet)
Comment 59 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-19 11:20:31 PDT
Created attachment 484380 [details] [diff] [review]
patch for stop button

Adds stop button and renames reload button
Comment 60 Sean Martell 2010-10-19 11:24:33 PDT
Created attachment 484383 [details]
Beta icon with proper styling
Comment 61 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-19 12:00:06 PDT
pushed stop and reload patch:
http://hg.mozilla.org/mobile-browser/rev/1632eb8b2186
Comment 62 Sean Martell 2010-10-19 12:46:00 PDT
Created attachment 484416 [details]
prefs seperator grey gradient
Comment 63 Sean Martell 2010-10-19 12:48:53 PDT
we should match the seperator stylings here: http://grab.by/6WBJ

so having the #cacdd5 lines on the top/bottom of the seperator gradient.
Comment 64 Sean Martell 2010-10-19 13:07:01 PDT
Created attachment 484427 [details]
pressed endcap to match search field mockup
Comment 65 Sean Martell 2010-10-19 13:50:01 PDT
Created attachment 484442 [details]
video glyphs (mute, unmute, play, pause)
Comment 66 Sean Martell 2010-10-19 14:44:00 PDT
Created attachment 484480 [details]
search glass icon for in-page search field
Comment 67 Sean Martell 2010-10-19 14:52:31 PDT
Created attachment 484483 [details]
EV default gradient
Comment 68 Sean Martell 2010-10-19 14:53:09 PDT
Created attachment 484485 [details]
SSL default gradient
Comment 69 Sean Martell 2010-10-19 14:58:51 PDT
Created attachment 484486 [details]
blue color shift fix

thre were odd color shifts in the blue colors, coming out purple.

fixed PNGs attached
Comment 70 Matt Brubeck (:mbrubeck) 2010-10-19 16:15:40 PDT
(In reply to comment #69)
> thre were odd color shifts in the blue colors, coming out purple.
> 
> fixed PNGs attached

Pushed the new blue tab background in bug 602671.  (The other purple images were not checked in yet; we'll use the fixed versions when we get to them.)
Comment 71 Sean Martell 2010-10-19 17:24:26 PDT
the fixed blue versions are attached on this bug.  what other ones are you referring to?
Comment 72 Matt Brubeck (:mbrubeck) 2010-10-19 17:31:52 PDT
(In reply to comment #71)
> the fixed blue versions are attached on this bug.  what other ones are you
> referring to?

I'm referring to the ones attached to this bug in attachment 484486 [details].

The old version of the tab background was in the tree already, so I replaced it with the fixed version.  The other images (SSL gradient, toggle background, etc.) weren't in the tree yet (the code to use them is still in progress).  When we do check them in, we'll use the fixed versions from this bug.
Comment 73 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-20 13:38:33 PDT
Created attachment 484802 [details] [diff] [review]
Patch - part 1 - chrome sidebars buttons pressed state

This patch use sean's bacground image for the pressed state of sidebars buttons
Comment 74 Matt Brubeck (:mbrubeck) 2010-10-20 13:55:33 PDT
Created attachment 484814 [details] [diff] [review]
patch: search box background

Use the provided background image for the urlbar edit state and the find bar
Comment 75 Matt Brubeck (:mbrubeck) 2010-10-20 13:59:20 PDT
Comment on attachment 484802 [details] [diff] [review]
Patch - part 1 - chrome sidebars buttons pressed state

We need to force these buttons to have a height of 82px also, so the background looks right.  Sean asked for this in http://etherpad.mozilla.com:9000/Y2VnicnWbz

r+ with that change.
Comment 76 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-20 14:23:33 PDT
Comment on attachment 484814 [details] [diff] [review]
patch: search box background

search-bar-bg-hdpi.png -> textbox-bg.png

we can add the -hdpi to all of them in a different cleanup patch
Comment 77 Matt Brubeck (:mbrubeck) 2010-10-20 14:28:01 PDT
(In reply to comment #76)
> search-bar-bg-hdpi.png -> textbox-bg.png

Done, and pushed: http://hg.mozilla.org/mobile-browser/rev/900a08cb4eeb
Comment 78 Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please) 2010-10-20 14:38:46 PDT
(In reply to comment #75)
> Comment on attachment 484802 [details] [diff] [review]
> Patch - part 1 - chrome sidebars buttons pressed state
> 
> We need to force these buttons to have a height of 82px also, so the background
> looks right.  Sean asked for this in
> http://etherpad.mozilla.com:9000/Y2VnicnWbz
> 
> r+ with that change.

done and pushed:
http://hg.mozilla.org/mobile-browser/rev/daad3a3c3b84
Comment 79 Sean Martell 2010-10-20 15:16:49 PDT
Created attachment 484840 [details]
Larry color icons

thought these were uploaded to the bug.  sorry.
Comment 80 Matt Brubeck (:mbrubeck) 2010-10-20 15:37:04 PDT
Created attachment 484853 [details] [diff] [review]
patch

This adds some details I missed in the previous texbox background patch:
* Use the new background for the urlbar active state.
* Use the new background for the add-on search box too, as suggested in http://etherpad.mozilla.com:9000/Y2VnicnWbz
Comment 81 Matt Brubeck (:mbrubeck) 2010-10-20 15:54:17 PDT
Created attachment 484860 [details] [diff] [review]
Search bar background tweaks, v2

Apply this to the select-helper search box too, and use a class to do it.
Comment 82 Sean Martell 2010-10-20 15:57:09 PDT
Created attachment 484862 [details]
Larry closed lock
Comment 83 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-20 15:58:14 PDT
Comment on attachment 484860 [details] [diff] [review]
Search bar background tweaks, v2

remove textbox.search-bar from browxer.css
Comment 84 Matt Brubeck (:mbrubeck) 2010-10-20 15:59:38 PDT
(In reply to comment #83)
> remove textbox.search-bar from browxer.css

Done: http://hg.mozilla.org/mobile-browser/rev/2650df3f1c91
Comment 85 Sean Martell 2010-10-20 16:15:47 PDT
Created attachment 484870 [details]
task icons
Comment 86 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-21 13:56:00 PDT
Created attachment 485138 [details] [diff] [review]
task buttons for desktop and maemo

This patch just replaces the old images with the new ones.
Comment 87 Matt Brubeck (:mbrubeck) 2010-10-21 14:04:59 PDT
Comment on attachment 485138 [details] [diff] [review]
task buttons for desktop and maemo

>-  skin/images/task-back-40.png              (images/task-back-40.png)
>-  skin/images/task-back-rtl-40.png          (images/task-back-rtl-40.png)
>+  skin/images/task-back-hdpi.png            (images/task-back-hdpi.png)
>+  skin/images/task-back-rtl-hdpi.png        (images/task-back-rtl-hdpi.png)

Some styles are still using task-back-40(-rtl).png.  See #tool-panel-close, which should be updated, and #tool-bookmarks-close, which can be removed along with the "bookmarklist" and "bookark-items" styles.

r+ with those changes.
Comment 88 Mark Finkle (:mfinkle) (use needinfo?) 2010-10-21 14:35:57 PDT
removed unused styles and fixed task-back-40(-rtl).png references. also reduced the left/right padding in urlbar (with OK from madhava)

pushed:
http://hg.mozilla.org/mobile-browser/rev/56a5fabbb9d2

marking FIXED, open new bugs for remaining issues
Comment 89 Aakash Desai [:aakashd] 2010-10-22 08:57:01 PDT
Add testcases as need Aaron! If there aren't any needed, then please feel free to minus this.
Comment 90 Aaron Train [:aaronmt] 2010-10-22 09:01:10 PDT
(In reply to comment #89)
> Add testcases as need Aaron! If there aren't any needed, then please feel free
> to minus this.

That's not something I know the answer to.
Comment 91 Naoki Hirata :nhirata (please use needinfo instead of cc) 2010-10-22 11:02:43 PDT
Larry not changing colors is being tracked in bug 575950
video controls are being tracked in bug 465839

Verified : 
Mozilla/5.0 (Maemo;Linux armv71; rv:2.0b8pre) Gecko/20101022 Firefox/4.0b8pre Fennec/4.0b2pre
Mozilla/5.0 (Android; Linux armv71; rv2.0b8pre) Gecko/20101022 Firefox/4.0b8pre Fennec/4.0b2pre

Note You need to log in before you can comment on or make changes to this bug.