Open Bug 221824 (rtl-themes) Opened 21 years ago Updated 7 years ago

themes should be RTL compatible

Categories

(SeaMonkey :: Themes, defect, P3)

defect

Tracking

(Not tracked)

Future

People

(Reporter: tsahi_75, Unassigned)

References

(Blocks 2 open bugs)

Details

(Keywords: meta, rtl)

Attachments

(20 files, 9 obsolete files)

754 bytes, patch
mconnor
: review+
Details | Diff | Splinter Review
3.40 KB, patch
benjamin
: review+
Details | Diff | Splinter Review
51.25 KB, application/zip
Details
867 bytes, text/plain
Details
10.82 KB, application/zip
Details
526 bytes, application/vnd.mozilla.xul+xml
Details
43.27 KB, image/png
Details
71.53 KB, patch
asaf
: review+
Details | Diff | Splinter Review
1.41 KB, patch
steffen.wilberg
: review+
Details | Diff | Splinter Review
1.96 KB, patch
kevin
: review+
Details | Diff | Splinter Review
2.53 KB, patch
asaf
: review+
Details | Diff | Splinter Review
4.15 KB, patch
benjamin
: review+
Details | Diff | Splinter Review
12.99 KB, patch
benjamin
: review+
Details | Diff | Splinter Review
952 bytes, patch
Details | Diff | Splinter Review
51 bytes, image/gif
Details
1.30 KB, patch
asaf
: review+
Details | Diff | Splinter Review
684 bytes, patch
asaf
: review+
Details | Diff | Splinter Review
66.45 KB, patch
Details | Diff | Splinter Review
18.01 KB, application/zip
Details
170.59 KB, application/x-zip-compressed
Details
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; he-IL; rv:1.4) Gecko/20030624
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; he-IL; rv:1.4) Gecko/20030624

currently, when a language pack of a RTL language (e.g. hebrew, arabic) is used,
the theme graphics remain as they were with a LTR interface. it looks weird with
the Modern and Classic themes, where the back and forward bottons of Navigator
are facing each other instead of opposite sides, and breaks most 3rd party themes.

the problem is mostly with graphics that include arrows: back/foreard, personal
toolbar shevron, sidebar handle, site navigation bar last/next/previous/first,
menu>sub menu arrow, mail: reply, reply all, forward, and others, some of which
depend on the theme.

what i'm suggesting is the following:
1. all images that might be affected by a RTL language pack should have two
sets, one for LTR and one for RTL interface. for some of the images this means
that the RTL Back button, for instance, will simply be the LTR Forward button.
for images that don't have an opposite image, the theme creator will have to
make one.
2. themes will have to be sensitive to the current direction of the interface in
some way.
3. the theme will select the appropriate image, if applicable, depending on the
interface direction. if the image is not affected by the direction (e.g. the
stop button) then the same image is used for both directions.


Reproducible: Always

Steps to Reproduce:
here's how to make the interface RTL, to give you a sence:
1. add these lines to the file intl.css, in the locale\en-US\global, in the
en-US.jar file (the language pack file, in the chrome folder):

/*make UI RTL */

window,dialog,wizard,page { direction: rtl; }

menu { direction: rtl; }

outliner { direction: rtl; }

/*
 * make sure search from address bar remains in RTL
 */

#urlbar .autocomplete-search-engine
{
direction: rtl !important;
}

/*
 * keep Composer <HTML> Source tab LTR
 */

#content-source,
#doctype-text { direction: ltr; }

2. start mozilla
Actual Results:  
browser is cross-eyed

Expected Results:  
back button should point right and not left, forward button should point left
and not right, and the same for other buttons i mentioned, and some that i
didn't mention.


it is also possible that in some places, a different CSS will have to be used.
in Modern theme, the extentions buttons (like the back and forward history, or
the two options under the print button) are to the right of their originating
buttons, while they should be to the left in a RTL locale.
i filed a bug a long time ago talking about a selector for this, see if you can
turn it up.
i tried, but couldn't find any.
How is chrome supposed to know that it's "rtl" if all that means is that some
CSS rules got set somewhere?
don't ask me, i don't know any css. i'm just pointing to a problem, which limits
the number of available themes for RTL locales.

maybe this, from bug 147232 comment 16, will help:

BrowserToolbar[dir=rtl] ForwardButton 
  {
  background: url(RightArrow.png) !important
  }

> 2. themes will have to be sensitive to the current direction of the interface in
> some way.

Unless we have a better way of defining the "current direction of the interface"
than the current ad-hoc setting of "direction" on some random subset of boxes,
that isn't really feasible.

i can't say anything smart about this since i don't know javascript or css. it
is possible that the theme mechanism will have to be altered to support this.
how about this idea, without knowing much about how things work: the language
pack will have a flag somewhere in one of the dtd files that will tell mozilla
if it's a RTL or a LTR language. that will trigger both the css we currently put
in intl.css in the language pack, and proper behaviour of the theme (maybe like
what is suggested in bug 147232 comment 27 by dbaron. this solution, if
feasable, will revoke the need to what we put in intl.css. it will reside
somewhere else, maybe in the code itself.
it is not enough to have flipped images: in Modern theme, the dropmarkers (down
arrows in drop-down menues) are designed with css. a RTL theme will have to use
different css to style them. the same goes for some other elements in the
sidebar and elsewhere, that need a different style rule for a RTL UI.
Assignee: shliang → themes
OS: Windows XP → All
Hardware: PC → All
btw, my suggestion in comment 7 above is already implemented for the <html>
Source tab in composer.
OK, I'd like to push through the idea in comment #7 for firefox 1.0. Having a
DTD flag in global/locale which can be used as a CSS selector is a good idea,
and it will prevent RTL locales from having to ship an entirely different theme
from everyone else.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: blocking-aviary1.0?
This is just a locale hook so that the theme can hook into a reliable entity.
Tsahi, I'm interested in knowing why you need these rules: shouldn't they
naturally inherit from the window/page/whatever? Is there some reason why the
.autocomplete-search-engine needs the !important?

menu { direction: rtl; }
outliner { direction: rtl; }
#urlbar .autocomplete-search-engine
{
  direction: rtl !important;
}
Attachment #160352 - Flags: review?(mconnor)
Are we laying the groundwork for RTL styles to be in the default theme, and the
image flipping stuff will come later? If we're not going to have image flipping,
we'll have to include separate RTL icons.

I can think of more theme icons that are not RTL friendly: Perhaps the bookmark
sidebar has the spine of the book on the wrong side for RTL. Pinstripe's
download sidebar icon also has a little progress meter in the icon which is
going the wrong way for RTL. Also, it seems to me that to do this right we
should redo more of the icons to put the dominant element on the right and the
secondary element(s) on the left ... for instance the new tab and new window
icons should have the + badge on the left.
Comment on attachment 160352 [details] [diff] [review]
Add ltr/rtl as a locale entity for theme hookup

ah, good idea.
Attachment #160352 - Flags: review?(mconnor) → review+
Attachment #160352 - Flags: approval-aviary?
(In reply to comment #12)
> Tsahi, I'm interested in knowing why you need these rules: shouldn't they
> naturally inherit from the window/page/whatever? 

No. The page directionality should not affect the application directionality.

Simple (and common) scnario:
I have two tabs open- one with a RTL page and the other with LTR page.
What direction should mozilla be? Should it one why for one tab and another way
for another?

Mozilla does that for the scroll bar at some sites:
http://news.nana.co.il/Article/?ArticleID=142213&sid=16

(open the link in a new tab and try to scroll)

Very bad IMO, as I need to move the mouse to the other side of the screen to
scroll (once I notice that the scroll bar is suddenly at the other side, and
that takes time as well) and then when I switch to a LTR tab I have to move the
mouse all the way over again.

Very bad for usability IMO- web pages should not affect the browser UI at all.
Tsahi, perhaps my question was poorly worded, it had nothing to do with
web-pages: since all of our <xul:menu> elements are contained within an
<xul:window>, why do we need a special CSS rule "menu { direction: rtl; }",
since that should, according to the CSS cascade, inherit properly from "window {
direction: rtl; }"
(In reply to comment #12)
> Tsahi, I'm interested in knowing why you need these rules: shouldn't they
> naturally inherit from the window/page/whatever? Is there some reason why the
> .autocomplete-search-engine needs the !important?
> 
> menu { direction: rtl; }
> outliner { direction: rtl; }
> #urlbar .autocomplete-search-engine
> {
>   direction: rtl !important;
> }

as i know relatively little CSS, and even less of the chrome's CSS classes,
smontagu told me what CSS to put in the langpack in order to 'flip' it, when i
started with it about two years ago. i was told that outliner doesn't exist anymore.

as for the !important thing, currently the URL bar gets LTR from xul.css (IIRC)
with a class introduced in bug 157607. we add this rule to the langpack to force
RTL in the autocomplete menu and the "search for X at Y" bar.

(In reply to comment #13)
> Are we laying the groundwork for RTL styles to be in the default theme, and the
> image flipping stuff will come later? If we're not going to have image flipping,
> we'll have to include separate RTL icons.
> 

that is correct, Kevin. i once opened a bug for flipping images functionality,
thinking that it would make our lives easier in making RTL langpack. however, i
have since realised that this is not so. images often have shading, which goes
with the shading of the widgets styled with CSS. simply flipping the Back and
Forward buttons, for example, will break that shading. unless, of course,
bsmedberg will find a way to also flip all the shading effects too :) (i am not
sure this is something we want though. MS is doing that in it's localized
products, but if the OS is not localized, it has the shading coming from upper
left, which results in a complete mess in that regard.)

so as i see it now, some of the images will have to have two copies, one for
each UI direction. in other images, we can reuse them in the RTL locale, e.g.
the LTR Back button can be used as the RTL Forward botton.

(In reply to comment #16)
> Tsahi, perhaps my question was poorly worded, it had nothing to do with
> web-pages: since all of our <xul:menu> elements are contained within an
> <xul:window>, why do we need a special CSS rule "menu { direction: rtl; }",
> since that should, according to the CSS cascade, inherit properly from "window {
> direction: rtl; }"

you could be right. like i wrote above, i know very little about this stuff, and
i never tried to play with these rules.
Attached patch Fix submenu arrow (obsolete) — Splinter Review
kmgerich, in combination with the patch above this should fix the arrow
direction in submenus: it requires three images. I did winstripe only, but I
suspect the same patch can be applied verbatim to pinstripe/gnomestripe
Comment on attachment 160491 [details] [diff] [review]
Fix submenu arrow

mconnor, I chose a new "chromedir" attribute instead of "dir" because "dir" has
special-case bidi code and I didn't want to introduce regressions. This patch
shouldn't affect anything in ltr locales, it's just an unused attribute.
Attachment #160491 - Flags: superreview?(webmail)
Attachment #160491 - Flags: review?(mconnor)
Reuven, this bug might save you some work.
Comment on attachment 160491 [details] [diff] [review]
Fix submenu arrow

s/%globalRegion;/%globalRegionDTD;/ to make this actually work :(
Comment on attachment 160491 [details] [diff] [review]
Fix submenu arrow

ooh, snazzy, I like
Attachment #160491 - Flags: review?(mconnor) → review+
Comment on attachment 160491 [details] [diff] [review]
Fix submenu arrow

looks good. I'll do a patch for Pinstripe tomorrow
Attachment #160491 - Flags: superreview?(webmail) → superreview+
Comment on attachment 160352 [details] [diff] [review]
Add ltr/rtl as a locale entity for theme hookup

a=asa.
Attachment #160352 - Flags: approval-aviary? → approval-aviary+
Flags: blocking-aviary1.0? → blocking-aviary1.0+
The entity (attachment 160352 [details] [diff] [review]) has been checked in, branch and trunk.
Keywords: late-l10n
Assignee: themes → bsmedberg
Attachment #160491 - Attachment is obsolete: true
Status: NEW → ASSIGNED
Comment on attachment 160767 [details] [diff] [review]
just the content hook attributes (added back/forward buttons), no actual theme changes

Carrying over mconnor's review, seeking approvals. I will go ahead and land
this on trunk.
Attachment #160767 - Flags: review+
Attachment #160767 - Flags: approval-aviary?
QA Contact: pmac → bugs.mano
Reuven says _partly_ flips the livemark icons, so we need his png(s).
Attachment #160767 - Attachment is obsolete: true
Attachment #160767 - Flags: approval-aviary?
Attachment #160917 - Flags: review?(bsmedberg)
i'm attaching the modified files for the rtl theme. the images i flipped are
the 3 files in the browser directory, the chevron icon under global->toolbar,
and the arrows under global->menu. the files in the global->arrow i just
changed the names from "rit" to "lft" and vice versa.

the changes in the css are mainly adjusting the margin, for example in
downloads.css i changed from:

#saveToFolder .toolbarbutton-text {
  text-align: left;
  margin-left: 5px !important;
}

to:

#saveToFolder .toolbarbutton-text {
  text-align: right;
  margin-right: 5px !important;
}
Attachment #161056 - Attachment filename: rtl theme files.zip → rtl-theme-files.zip
Flags: blocking-aviary1.0+ → blocking-aviary1.0-
Reuven/Mano: right now all I want is a list of images that need to be flipped
for the default theme(s). Kevin Gerich will actually be landing the flipped images.

Please attach it as a text file. Then I can look at the best way to get these
images flipped with the most efficient CSS rules, I am not sure that attachment
160917 [details] [diff] [review] uses the best placement of the new attributes.
The arrows under /browser/arrow/ don't actually need to be flipped. the
filenames can be changed from "lft" to "rit" and vice versa
about the shading: i think we should keep the LTR shading (i.e. light comes from
upper left) in the RTL case too, for two reasons:
1. changing the light source to upper-right will break the flow of the OS, which
is in most cases LTR. i don't have localized Windows (or KDE/Gnome), but in the
hebrew localized MS-Office XP, they kept the light source at the upper-left.
also, WinXP has this 3D shading effect for menues and the mouse pointer, so if
we will have the shade on the left, we will end up having shade at both sides of
the menues.
2. changing the shading direction means most images will have to have a RTL
version, to match the new light source, where as now, some of the images can be
used in both cases, sometimes changing position with their mirror counterparts
(mostly arrows that have versions for right and left pointing).

Reuven raised some concerns to me, that the tabs are not well bordered in RTL if
the shading is like in LTR, because they are aligned to the right (the last tab
is the left most tab). there could be other problems like this, so these cases
should be noted.
Kevin, any update?
Comment on attachment 160917 [details] [diff] [review]
[checked in branch] all (i hope) the content hook attributes (except of menu.xml)

Let's get this in.
Attachment #160917 - Flags: review?(bsmedberg)
Attachment #160917 - Flags: review+
Attachment #160917 - Flags: approval-aviary+
Alias: rtl-themes
Attachment #160917 - Attachment description: all (i hope) the content hook attributes (except of menu.xml) → [checked in branch] all (i hope) the content hook attributes (except of menu.xml)
I also checked in the content hook for menu.xml from attachment 160491 [details] [diff] [review]
This bug seems to have an aviary branch checkin associated with it. If this has
landed on the aviary branch (as much as it's going to for 1.0) can you please
add the "fixed-aviary1.0" keyword? Thanks.
OK. This is not all-the-way fixed; we're for images checkin by kmgerich, but I
have added the keyword for the benefit of some queries.
Keywords: fixed-aviary1.0
Attached file RTL Image Files
RTL images. will check in shortly
Comment on attachment 163093 [details]
RTL Image Files

Thank you Kevin.

Does it include all the files Reuven mentioned?
These are the images that were included:

Go-rtl.png
Menu-arrow-hover-rtl.png
sbtab-twisty-rtl.gif
chevron-rtl.gif
Menu-arrow-disabled-rtl.png
livemark-item-rtl.png
page-livemarks-rtl.png
Weblink-rtl.png
Menu-arrow-rtl.png

For the others, the arrows are already in the theme, you just need a different
css rule.

I didn't include the images on Mac. I will soon.
bsmedberg/kevin, what about the css rules?
I had assumed the css would be in the language pack jar .. I can do the CSS if
you need it, but I probably won't get to it for another couple of days.
(In reply to comment #42)
> I had assumed the css would be in the language pack jar .. I can do the CSS if
> you need it, but I probably won't get to it for another couple of days.

no, they will be in the themes shiped by mozilla.org. something like attachment
160491 [details] [diff] [review].
(In reply to comment #42)
> I had assumed the css would be in the language pack jar .. I can do the CSS if
> you need it, 

This is not an option as we can't apply style rules for winstripe/pinstripe only.

> but I probably won't get to it for another couple of days.

as long as it is before One-Dot-Oh final release, t's more than enough. :)
Attached image RTL styles in action (obsolete) —
Patch coming shortly.
Kevin, i forgot to say: we need to replace
1) every margin-right to -moz-margin-end (which is "right" in the rtl case and
"left" in the rtl case)
2) every margin-left to -moz-margin-start
3) every padding-left to -moz-padding-start
4) every padding-right to -moz-margin-end 
^^ That's in order to make rtl themes look as expected).
Here it is. I had to add the global region DTD to the help window because it
wouldn't have known about chromedir otherwise. Also in menu.xml the chromedir
was missing from the menu-iconic binding, so I added that.
Comment on attachment 163998 [details] [diff] [review]
RTL style patch .. CSS and additions to menu.xml, help.xul

Requesting review and superreview. Is Mike still gone?
Attachment #163998 - Flags: superreview?(mconnor)
Attachment #163998 - Flags: review?(bsmedberg)
Asaf, do you have time to come up with a patch for the padding and margins?
(In reply to comment #50)
> Asaf, do you have time to come up with a patch for the padding and margins?

I'm on it.
Also be careful of padding and margins set by shorthand, like

padding: 1px 2px 3px 4px;

would we have to unroll them all into four separate declarations?
(In reply to comment #52)
> Also be careful of padding and margins set by shorthand, like
> 
> padding: 1px 2px 3px 4px;
> 
> would we have to unroll them all into four separate declarations?

yep :( w-i-p.
Actually, not all. just cases where (margin-right != margin-left) :)
Comment on attachment 163998 [details] [diff] [review]
RTL style patch .. CSS and additions to menu.xml, help.xul

>Index: toolkit/themes/winstripe/help/help.css
>===================================================================
>RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/help/help.css,v
>retrieving revision 1.1.2.8
>diff -u -p -8 -r1.1.2.8 help.css
>--- toolkit/themes/winstripe/help/help.css	16 Oct 2004 02:05:05 -0000	1.1.2.8
>+++ toolkit/themes/winstripe/help/help.css	30 Oct 2004 18:14:32 -0000
>@@ -70,23 +70,28 @@ menubutton:not([disabled="true"]):hover,
> toolbarbutton:not([disabled="true"]):hover:active,
> menubutton:not([disabled="true"]):hover:active {
> 	color: ButtonText !important;
> }
> 
> /* Set the minimum sidebar width so the help contents aren't squeezed together.*/
> #helpsidebar-box { width: 200px; }
> 
>-#help-back-button { -moz-image-region: rect(0px 24px 24px 0px); }
>-#help-back-button[buttonover="true"] { -moz-image-region: rect(24px 24px 48px 0px); }
>-#help-back-button[disabled="true"] { -moz-image-region: rect(48px 24px 72px 0px); }
>-
>-#help-forward-button { -moz-image-region: rect(0px 48px 24px 24px); }
>-#help-forward-button[buttonover="true"] { -moz-image-region: rect(24px 48px 48px 24px); }
>-#help-forward-button[disabled="true"] { -moz-image-region: rect(48px 48px 72px 24px); }
>+#help-back-button, 
>+#help-forward-button[chromedir="rtl"] { -moz-image-region: rect(0px 24px 24px 0px); }
>+#help-back-button[buttonover="true"], 
>+#help-forward-button[buttonover="true"][chromedir="rtl"] { -moz-image-region: rect(24px 24px 48px 0px); }
>+#help-back-button[disabled="true"], 
>+#help-forward-button[disabled="true"][chromedir="rtl"] { -moz-image-region: rect(48px 24px 72px 0px); }
>+
>+#help-forward-button, #help-back-button[chromedir="rtl"] { -moz-image-region: rect(0px 48px 24px 24px); }
>+#help-forward-button[buttonover="true"], 
>+#help-back-button[buttonover="true"][chromedir="rtl"] { -moz-image-region: rect(24px 48px 48px 24px); }
>+#help-forward-button[disabled="true"], 
>+#help-back-button[disabled="true"][chromedir="rtl"] { -moz-image-region: rect(48px 48px 72px 24px); }

I guess this is prevailing style, but yech.

>-}
>+}
>\ No newline at end of file

newline please :)

r=mconnor@steelgryphon.com

(and yes, this is the exception, not the rule)
Attachment #163998 - Flags: superreview?(mconnor)
Attachment #163998 - Flags: review?(bsmedberg)
Attachment #163998 - Flags: review+
Attached patch margin/padding winstripe fix (obsolete) — Splinter Review
*argh(!)*
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

Kevin, I hope you will find enough time and motivation to read this boring one
:-)

We should get this in really soon, so we will have enough time to test both
rtl/ltr builds.
Attachment #164013 - Flags: review?(webmail)
Accroding to Mac Pinstripe: There is no need to create rtl images / css rules
for it. Altough there are some translated (hebrew / arbic) apps, no one of them
is RTLed.

In order to avoid the mac theme to be fliped, i suggest to add the following css
rules to pinstripe:

window, dialog, page, menu
{
  direction: ltr !important;
}
kevin, is it possible to make a RTL version of the Add Tab button? in LTR, the
plus is on the right, because new tabs are added to the right. in RTL, new tabs
are added to the left, so the plus should be on the left side of the image.
One more question:
why we are "hard-lefting" here:
http://lxr.mozilla.org/aviarybranch/source/toolkit/themes/winstripe/mozapps/downloads/downloads.css#109

isn't it left by deafult?
and another image: the show/hide index pane button in the help window needs a
RTL version, because in RTL the pane is on the right.
There are many more icons that need RTL equivalents (new window, new tab, new
bookmark, bookmark sidebar, etc etc.) but I think this is the best we can do for
now. I want to land this and get on to other things before 1.0.

Of course feel free to submit patches for other issues you come across, but
they'll be considered separately.

On the Mac issue, that's great to hear that I don't have to do this again for
Pinstripe today :) but we should probably have another bug requesting that
Pinstripe be RTL compatible and target it at Firefox 1.1.
Attachment #163998 - Flags: approval-aviary?
(In reply to comment #56)
> Created an attachment (id=164013)
> margin/padding winstripe fix
> 
> 
> *argh(!)*

a few comments:

1. as a general rule, all the left and right attributes most be changed unless
you know their is a reason why not to (which is a very good idea). 

2. i think we discussed the -moz-margin-start: attribute. do you know for fact
that it's working?

3. they are a few more attributes that need to be changed. these are just
examples, so you need to change them accordingly. also i'm using here the left
values, but you need to change both directions:

text align: left;
border left: none;

in the tabbox.css file:

-moz-appearance: tab-left-edge; , -moz-border-radius-topleft: 0; ,
-moz-border-radius-bottomleft: 0; these are actually pretty significant changes.

i also change the shadows of -moz-border-left-colors, and border-left. i had a
discussion with tsahi about the menus shadows, since windows xp adds a shaddow
to the left side of the menu, so the shaddow appears at both directions. i
personnaly think that it's better to change the shaddow in the menus as well
since i didn't see this problem on other platforms, and also in windows xp i
think it's better to have the shaddow in both sides, instead of just on the
wrong side.

sorry if i'm too meticulous, but after all I am using the Hebrew interface of
firefox, and i want it to look as good as possible :-)
ye, works fine...
(In reply to comment #63)

> 2. i think we discussed the -moz-margin-start: attribute. do you know for fact
> that it's working?

see last attachment.

> 3. they are a few more attributes that need to be changed. these are just
> examples, so you need to change them accordingly. also i'm using here the left
> values, but you need to change both directions:
> 
> text align: left;
> border left: none;

please mail me a list of all these cases, this won't be automatic as the last
patch...


> i also change the shadows of -moz-border-left-colors, and border-left. i had a
> discussion with tsahi about the menus shadows, since windows xp adds a shaddow
> to the left side of the menu, so the shaddow appears at both directions. i
> personnaly think that it's better to change the shaddow in the menus as well
> since i didn't see this problem on other platforms, and also in windows xp i
> think it's better to have the shaddow in both sides, instead of just on the
> wrong side.

We're not going to (and we shoudn't) change the shaddows.
(In reply to comment #65)
> (In reply to comment #63)
> 

> > 3. they are a few more attributes that need to be changed. these are just
> > examples, so you need to change them accordingly. also i'm using here the left
> > values, but you need to change both directions:
> > 
> > text align: left;
> > border left: none;
> 
> please mail me a list of all these cases, this won't be automatic as the last
> patch...

the list here includes all the attributes i know for now.

> > i also change the shadows of -moz-border-left-colors, and border-left. i had a
> > discussion with tsahi about the menus shadows, since windows xp adds a shaddow
> > to the left side of the menu, so the shaddow appears at both directions. i
> > personnaly think that it's better to change the shaddow in the menus as well
> > since i didn't see this problem on other platforms, and also in windows xp i
> > think it's better to have the shaddow in both sides, instead of just on the
> > wrong side.
> 
> We're not going to (and we shoudn't) change the shaddows.

why not?

Keywords: fixed-aviary1.0
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

Kevin?
Attachment #164013 - Flags: approval-aviary?
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

Please fix the typo otherwise, r=me. This was a great read :)

Index: toolkit/themes/winstripe/global/checkbox.css
===================================================================
RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/checkbox.css,v
retrieving revision 1.1.2.1
diff -u -r1.1.2.1 checkbox.css
--- toolkit/themes/winstripe/global/checkbox.css	5 Jun 2004 21:31:31
-0000	    1.1.2.1
+++ toolkit/themes/winstripe/global/checkbox.css	30 Oct 2004 21:45:25
-0000
@@ -33,17 +33,20 @@
   -moz-appearance: checkbox-container;
   -moz-box-align: center;
   margin: 2px 4px;
-  padding: 1px 2px 1px 4px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 2p;x
 }
Attachment #164013 - Flags: review?(webmail) → review+
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

Any chance to get these two patches before 1.0?

Both are pretty safe (no "real" code changes, only additions for rtl).

It currently blocks the he-IL release rom being offical.
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

too late for 1.0
Attachment #164013 - Flags: approval-aviary? → approval-aviary-
Comment on attachment 163998 [details] [diff] [review]
RTL style patch .. CSS and additions to menu.xml, help.xul

too late for 1.0
Attachment #163998 - Flags: approval-aviary? → approval-aviary-
Comment on attachment 164013 [details] [diff] [review]
margin/padding winstripe fix

The margin patch still applies. Kevin, would you be able to check it in?
Flags: blocking-aviary1.1?
Keywords: late-l10n
Attached patch winstripe: all in one (obsolete) — Splinter Review
moving r= forn kmgerich/mconnor.

I'll check it in later today.
Attachment #163998 - Attachment is obsolete: true
Attachment #164013 - Attachment is obsolete: true
Attachment #174134 - Flags: review+
Comment on attachment 174134 [details] [diff] [review]
winstripe: all in one

oops, wrong diff
Attachment #174134 - Attachment is obsolete: true
Attachment #174134 - Flags: review+
Attached patch winstripe: all in one (obsolete) — Splinter Review
again...
Attachment #174135 - Flags: review+
Attached image screenshot
Attachment #163997 - Attachment is obsolete: true
checked in 2005-02-20 07:49
Attachment #174135 - Attachment is obsolete: true
Attachment #174854 - Flags: review+
Comment on attachment 174854 [details] [diff] [review]
Winstripe patch: checked in

Part of this regressed bug 257280 Ev1 patch.

Please, check-in a corrective patch,
changing the |#help-forward-button[buttonover="true"][chromedir="rtl"]|-like
syntax to |#help-forward-button[chromedir="rtl"]:hover| in these files.

Thanks.
only those i regressed.
Attachment #175124 - Flags: review?(webmail)
(In reply to comment #78)
> (From update of attachment 174854 [details] [diff] [review] [edit])
> Part of this regressed bug 257280 Ev1 patch.
> 
> Please, check-in a corrective patch,
> changing the |#help-forward-button[buttonover="true"][chromedir="rtl"]|-like
> syntax to |#help-forward-button[chromedir="rtl"]:hover| in these files.
> 

Apparently, this was only help.css (the other instances werem't fixed in bug
257280).
(In reply to comment #80)
> Apparently, this was only help.css (the other instances werem't fixed in bug
> 257280).

Right: "not yet" let's say ;->

While I agree that you can leave the unmodified ones for me to fix in that other
bug,
it would be nice if you could convert the ones you added too...
Comment on attachment 176046 [details] [diff] [review]
[checked in] winstripe: new pref window fixes

looks good. Thanks Asaf!
Attachment #176046 - Flags: review?(webmail) → review+
Comment on attachment 176046 [details] [diff] [review]
[checked in] winstripe: new pref window fixes

Checking in preferences.css;
/cvsroot/mozilla/browser/themes/winstripe/browser/preferences/preferences.css,v
 <--  preferences.css
new revision: 1.3; previous revision: 1.2
done
Attachment #176046 - Attachment description: winstripe: new pref window fixes → [checked in] winstripe: new pref window fixes
Comment on attachment 175124 [details] [diff] [review]
[checked in] buttonover -> :hover

r=me.
Attachment #175124 - Flags: review?(webmail) → review+
Comment on attachment 176046 [details] [diff] [review]
[checked in] winstripe: new pref window fixes

This file is "broken";
please, fix the Trunk:
{{
201 #ChangeActionDialog {
  padding: 0px;
202 }
203 
#ChangeActionDialog .dialog-button-box {
204   padding: 8px 10px 10px 8px;
}
205 
#changeActionHeader {
206   border-bottom: 2px groove ThreeDFace;
207   margin: 0px;
208   padding: 10px;
209   background-color: -moz-Field;
210   color: -moz-FieldText;  
211 }
212 
#changeActionContent {
213   padding: 8px 10px 10px 9px;
214 }
215 
#defaultAppIcon {
216   width: 16px;
  height: 16px;
217   margin-left: 2px;
}
218 
}}
Comment on attachment 174854 [details] [diff] [review]
Winstripe patch: checked in

'padding:' line should have been removed in the following rules:
(please fix them)


>Index: toolkit/themes/winstripe/global/button.css
>===================================================================
>RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/button.css,v

>@@ -99,30 +102,37 @@ button[checked="true"] {
> button[checked="true"] > .button-box {
>   padding: 2px 3px 1px 4px;
>+  padding-top: 2px;
>+  padding-bottom: 1px;
>+  -moz-padding-start: 4px;
>+  -moz-padding-end: 3px;
> }


>Index: toolkit/themes/winstripe/global/menulist.css
>===================================================================
>RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/menulist.css,v

>@@ -121,16 +124,20 @@ menulist[disabled="true"] {
> .menulist-editable-box {
>   padding: 3px 0px 3px 2px;
>+  padding-top: 3px;
>+  padding-bottom: 3px;
>+  -moz-padding-start: 2px;
>+  -moz-padding-end: 0px;
> }


>Index: toolkit/themes/winstripe/global/radio.css
>===================================================================
>RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/radio.css,v

>@@ -42,27 +42,34 @@
> .radio-label-box {
>-  margin-left: 2px;
>+  -moz-margin-start: 2px;
>   border: 1px solid transparent;
>   padding: 0px 0px 1px 1px;
>+  padding-top: 0px;
>+  padding-bottom: 1px;
>+  -moz-padding-start: 1px;
>+  -moz-padding-end: 0px;
> }


>Index: toolkit/themes/winstripe/global/toolbarbutton.css
>===================================================================
>RCS file: /cvsroot/mozilla/toolkit/themes/winstripe/global/toolbarbutton.css,v

>@@ -51,49 +51,56 @@ toolbarbutton {
> toolbarbutton[checked="true"] {
>   border-color: ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow !important;
>   padding: 4px 2px 2px 4px !important;
>+  padding-top: 4px !important;
>+  padding-bottom: 2px !important;
>+  -moz-padding-start: 4px !important;
>+  -moz-padding-end: 2px !important;
>   background-image: url("chrome://global/skin/toolbar/Lighten.png");
>   color: ButtonText;
> }
(In reply to comment #87/#88)
everything should be fixed now, please verify
(In reply to comment #88)
> (In reply to comment #87/#88)
> everything should be fixed now, please verify

LXR has not updated yet, but Bonsaï looks fine; for the patch and the two comments.
Thanks.
Flags: blocking-aviary1.1?
I've notice they are still 2 problems:
1. going to file->print preview, the back and next arrows are switched.
2. the tab shadows are incorrect. to reproduce open a new tab, select it, then
go back and reselect the first one. the end of the next tab seems to be cut.
Thanks Neil.
Attachment #177604 - Flags: review?(benjamin)
Attachment #175124 - Attachment description: buttonover -> :hover → [checked in] buttonover -> :hover
Attachment #177604 - Flags: review?(benjamin) → review+
Comment on attachment 177604 [details] [diff] [review]
[checked in] tabbox fixes (winstripe)

Checking in toolkit/content/widgets/tabbox.xml;
/cvsroot/mozilla/toolkit/content/widgets/tabbox.xml,v  <--  tabbox.xml
new revision: 1.22; previous revision: 1.21
done
Checking in toolkit/themes/winstripe/global/tabbox.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/tabbox.css,v  <--  tabbox.css
new revision: 1.11; previous revision: 1.10
done
Attachment #177604 - Attachment description: tabbox fixes (winstripe) → [checked in] tabbox fixes (winstripe)
the &locale.dir inside tabbox.xml is set to "tabs" instead of "tab"
updating also tabbox.css
Attachment #177604 - Attachment is obsolete: true
Comment on attachment 178105 [details] [diff] [review]
[checked in] fix tabbox.xml and tabbox.css

right, thanks.
Attachment #178105 - Attachment description: fix menu.xml and tabbox.css → fix tabbox.xml and tabbox.css
Attachment #178105 - Flags: review+
Comment on attachment 178105 [details] [diff] [review]
[checked in] fix tabbox.xml and tabbox.css

Checking in toolkit/themes/winstripe/global/tabbox.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/tabbox.css,v  <--  tabbox.css
new revision: 1.12; previous revision: 1.11
done
Checking in toolkit/content/widgets/tabbox.xml;
/cvsroot/mozilla/toolkit/content/widgets/tabbox.xml,v  <--  tabbox.xml
new revision: 1.23; previous revision: 1.22
done
Attachment #178105 - Attachment description: fix tabbox.xml and tabbox.css → [checked in] fix tabbox.xml and tabbox.css
this patch is to fix the right and left arrows that are on the print preview
toolbar.
Attachment #178235 - Flags: review?(benjamin)
Attachment #178235 - Flags: review?(benjamin) → review+
Comment on attachment 178235 [details] [diff] [review]
[checked in] fix for printPreview toolbar arrows

Checking in toolkit/components/printing/content/printPreviewBindings.xml;
/cvsroot/mozilla/toolkit/components/printing/content/printPreviewBindings.xml,v
 <--  printPreviewBindings.xml
new revision: 1.18; previous revision: 1.17
done
Checking in toolkit/themes/winstripe/global/printPreview.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/printPreview.css,v  <-- 
printPreview.css
new revision: 1.5; previous revision: 1.4
done
Attachment #178235 - Attachment description: fix for printPreview toolbar arrows → [checked in[ fix for printPreview toolbar arrows
Attachment #178235 - Attachment description: [checked in[ fix for printPreview toolbar arrows → [checked in] fix for printPreview toolbar arrows
Assignee: benjamin → bugs.mano
Status: ASSIGNED → NEW
QA Contact: bugs.mano → benjamin
The rest of this bug (which is mainly classic and modern, and firefox's
pinstripe) aren't really something I'm going to workon -> helpwanted.

If there are more issues with Winstripe, please open new bugs (against me), thanks.
Keywords: helpwanted
Priority: -- → P3
Target Milestone: --- → Future
the new seamonkey council announced they plan to move seamonkey to toolkit
(http://wiki.mozilla.org/SeaMonkey:Home_Page#The_plan and
http://wiki.mozilla.org/SeaMonkey:Project_Goals#Future_Releases). in light of
this, is there a point in working on this? will current themes work with a
toolkit seamonkey?
Depends on: 289886
(In reply to comment #99)
> the new seamonkey council announced they plan to move seamonkey to toolkit
> (http://wiki.mozilla.org/SeaMonkey:Home_Page#The_plan and
> http://wiki.mozilla.org/SeaMonkey:Project_Goals#Future_Releases). in light of
> this, is there a point in working on this? will current themes work with a
> toolkit seamonkey?

I think this will add a new theme to the themes directory, and will probably be
something separate (like Firefox and Thunderbird have) once it's in, we can
apply this patch to seamonkey as well.
the chevron-rtl.png icon does not appear in:
http://lxr.mozilla.org/seamonkey/source/toolkit/themes/winstripe/global/toolbar/
which results in no "chevron" icon in the he-IL interface.
This patch adjusts the theme for Linux to be RTL compatible.
Attachment #184246 - Flags: review?(benjamin)
Attachment #184246 - Flags: review?(benjamin) → review+
Attachment #184246 - Flags: approval-aviary1.1a2?
Comment on attachment 184246 [details] [diff] [review]
[checked in] patch for Linux theme

a=shaver
Attachment #184246 - Flags: approval-aviary1.1a2? → approval-aviary1.1a2+
Comment on attachment 184246 [details] [diff] [review]
[checked in] patch for Linux theme

checked in.
Attachment #184246 - Attachment description: patch for Linux theme → [checked in] patch for Linux theme
remember this is nu such thing as "0px;" is just called "0;". could save a few
bytes...:)
Attachment #187181 - Flags: approval-aviary1.1a2?
Attachment #187181 - Flags: approval-aviary1.1a2? → approval-aviary1.1a2+
Attachment #187181 - Attachment description: adds chevron-rtl.gif to jar → [checked in] adds chevron-rtl.gif to jar
fix fot the new preferences window changes...
Attachment #187182 - Attachment description: goes in toolkit/themes/winstripe/global/toolbar/chevron-rtl.gif → [checked in] goes in toolkit/themes/winstripe/global/toolbar/chevron-rtl.gif
Attachment #187301 - Flags: review+
Attachment #187301 - Flags: approval-aviary1.1a2?
minor fix for "window.dialog" padding in global.css
Attachment #187302 - Flags: review+
Attachment #187302 - Flags: approval-aviary1.1a2?
Attachment #187302 - Flags: approval-aviary1.1a2? → approval-aviary1.1a2+
Comment on attachment 187301 [details] [diff] [review]
[checked in] fix for preferences.css

a=bsmedberg for landing today (6/29)
Attachment #187301 - Flags: approval-aviary1.1a2? → approval-aviary1.1a2+
Comment on attachment 187302 [details] [diff] [review]
[checked in] fix padding in global.css

Checking in global.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/global.css,v  <--  global.css
new revision: 1.8; previous revision: 1.7
done
Attachment #187302 - Attachment description: fix padding in global.css → [checked in] fix padding in global.css
Comment on attachment 187301 [details] [diff] [review]
[checked in] fix for preferences.css

Checking in preferences.css;
/cvsroot/mozilla/toolkit/themes/winstripe/global/preferences.css,v  <-- 
preferences.css
new revision: 1.3; previous revision: 1.2
done
Attachment #187301 - Attachment description: fix for preferences.css → [checked in] fix for preferences.css
Blocks: 304291
Blocks: 306980
*** Bug 317050 has been marked as a duplicate of this bug. ***
from bug 317050:

Twisty is not aligned properly in search bar

Seen using Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; he; rv:1.8)
Gecko/20051117 Firefox/1.5

In the search bar location, the twisty is not aligned properly, causing it to
be inside of the Google icon. Screenshot coming.

-a mac-specific problem.
Attached patch patch for pinstripe (obsolete) — Splinter Review
this is a complete patch for the mac theme.

this is just a draft, since i'm still having a minor problem with the bookmarks(on the personal toolbar) hover/open color, which i haven't solved yet. this problem just effects the RTL interface.
i had some unnecessary lined in the previous patch that i removed in this one.
Attachment #205078 - Attachment is obsolete: true
Attached file pinstripe RTL images
these images that are needed for this patch. these images are simply the original ones flipped horizontally.
As Firefox 1.5 became official, there are few things left buggy in the default theme. Tsahi said the Windows version looks complete, but for me I see the Linux version with few design bugs.
(In reply to comment #118)
> Created an attachment (id=205174) [edit]
> Screenshots: Things left behind in Firefox 1.5/Linux
> 
> As Firefox 1.5 became official, there are few things left buggy in the default
> theme. Tsahi said the Windows version looks complete, but for me I see the
> Linux version with few design bugs. 
> 

most of the problems in the screenshots are not releated to the screenshots, but to something in the gtk UI. the problem with the reversed arrows is reported in bug 316748 and with the checkmarks and bullets in bug 297790. regarding the tabs issue, this was fixed in windows with patch 178105. i couldn't find a way to change the tab appearence in Linux in the Css, so i guess this belongs to something in the gtk UI as well (my guess is that both ot these problems have the same source). The problem with the Firefox word aligned to the left appears in windows as well. the interesting part about this is that if you open the preferences window the second time it appears correctly.

we should probably open two additional bugs for the tabs and the preferences "Firefox" alignment.
(In reply to comment #119)
> (In reply to comment #118)
> > Created an attachment (id=205174) [edit]
> > Screenshots: Things left behind in Firefox 1.5/Linux
> > 
> > As Firefox 1.5 became official, there are few things left buggy in the default
> > theme. Tsahi said the Windows version looks complete, but for me I see the
> > Linux version with few design bugs. 
> > 
> 
> most of the problems in the screenshots are not releated to the screenshots,
> but to something in the gtk UI.

i meant are not related to the theme :-)
What's going on with this bug? I know Firefox 2 will have all-new themes. Will this bug be fixed? Will it be even worse? Pinstripe is still completely busted, and gnome still has issues. 

One issue I have which I've not seen mentioned here is that in LTR mode, firefox highlights both the active tab as well as the tab twice to the right from the active tab (if it exists). This does not happen when I use the English interface (same build with xpi added and language autodection code enabled). 
FF 1.5 already has RTL compatible theme. what remains is having a SeaMonkey RTL compatible theme (originally i opened this bug for the Suite, but that's irrelevant now). as for the theme for FF 2, we should check on that.
It is not true that Firefox has RTL compatible themes. Not everyone uses the expeirence-points (XP) based operating system. As I (and others) have noted, Firefox on the Mac has no RTL compatability, and even the GTK version has some issues left. 

While I'm ranting: it seems that only the default theme is RTL compatible. Other themes are not. Is this intentional? It would be nice if there a way to make themes RTL compatible (or at the very least get Forward/Back right :) without special effort on the part of theme designers, although I guess this may not be possible. 
note to asaf, for my landing for bug I *did not* check in the following changes, but I think you will want to make them to scrollbox.css (for pinstripe and winstripe):


< .autorepeatbutton-up
> .autorepeatbutton-up, .autorepeatbutton-down[chromedir="rtl"]

and

< .autorepeatbutton-down
> .autorepeatbutton-down, .autorepeatbutton-up[chromedir="rtl"]

please let me know if you have questions.
Depends on: tabbedbrowsing
Please do commit this change to winstripe.

Pinstripe (as i noted in the other bug) shouldn't be changed until we fix the whole theme.
> Please do commit this change to winstripe.
>
>Pinstripe (as i noted in the other bug) shouldn't be changed until we fix the
>whole theme.

thanks for clarifying.  I'll go fix this on winstripe, but not pinstripe.
> I'll go fix this on winstripe, but not pinstripe.

winstripe change checked in, and I will check it into the branch once I get approval for the the branch, but the pinstripe change will not be checked in to either trunk or branch.
Assignee: mano → nobody
Keywords: helpwantedmeta
QA Contact: benjamin → themes
Blocks: 402273
Blocks: fx3-l10n-he
Blocks: fx35-l10n-fa
No longer blocks: Persian-Fx3.5
Mass-assigning the new rtl keyword to RTL-related (see bug 349193).
Keywords: rtl
Product: Core → SeaMonkey
QA Contact: themes → themes
No longer blocks: fx35-l10n-fa
Blocks: Persian
No longer blocks: Persian-Fx3.5
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: