AMO:Editors/EditorGuide/CommonThemeProblems: Difference between revisions

<br>http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121

<br>http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60

On Win7 with Aero Glass support Firefox doesn't always go to full screen mode from a normal window properly. The resolution to this issue is to add the following code to your browser.css file somewhere below where the main-window is made transparent to support Aero glass.

<br>---

<br>For more information about this issue please see https://bugzilla.mozilla.org/show_bug.cgi?id=732757 and http://forums.mozillazine.org/viewtopic.php?f=18&t=2438459.

===OS X===

Due to Firefox bugs 679708 (https://bugzilla.mozilla.org/show_bug.cgi?id=679708) and 702558 (https://bugzilla.mozilla.org/show_bug.cgi?id=702558), it appears that your toolbar buttons may be broken on FF8+ running on Mac OS-X Lion. In order to work around this issue, you need to either rename any of the following files that are in your chrome://browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://browser/skin/lion/:

<br>&nbsp;&nbsp;&#42; keyhole-circle.png

<br>&nbsp;&nbsp;&#42; places/toolbar.png

===Linux===

On Linux: The styling of drop down select box fields are showing both a drop arrow and up/down spinner arrows.&nbsp;&nbsp;The problem is commonly caused by a "-moz-appearance:menulist" style rule in chrome://global/skin/menulist.css. Once the offending rule is found, it should be deleted and manual styling used.

====Firefox app button not styled on Linux, but is styled on Windows====

==Toolbars and Menus==

===Firefox App Button===

When in private browsing mode there is no visual difference to the Firefox app button that is displayed when tabs are on top and the menu bar is disabled.

====Text only toolbar buttons not aligned properly====

When text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons are not aligning properly. The common cause of this is style rules that reference [iconsize="small"] without excluding [mode="text"]. The solution usually is to append :not ([mode="text"]) to those style rules. For instance use 'toolbar[iconsize="small"]:not ([mode="text"])'. A little experimenting may be required to fully address this issue with your theme.

===Address Bar===

In FF14+ the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the website's status. In the case of secure sites the icon MUST be a padlock. For more information please see: https://wiki.mozilla.org/AMO:Editors/EditorGuide/ThemeReviews#Identity_Boxes

====No visual clue for disabled url bars====

There needs to be a visual clue when URL bar is disabled. To test this please go to https://bug486395.bugzilla.mozilla.org/attachment.cgi?id=370495 using the default theme and activate the "click me" link. The URL bar of the resulting popup window is disabled.

===Address Bar "Door Hangers"===

The sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border. This issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the URL bar. For details, please see https://bugzilla.mozilla.org/show_bug.cgi?id=708797

=="About" Pages==

===About:addons===

In Tools &gt; Add-ons, the icons of disabled icons need to be converted to grey scale. To accomplish this you need to add the following style rule to the css file extensions.css:

<br>---

<br>---

===About:memory===

The styling of about:memory is a little messed up in that nodes do not collapse as they should when clicked on. To fix this issue you need to copy the following file from the latest version of Firefox to your theme: chrome://global/content/aboutMemory.css

===About:permissions===

{to be added}

===Web Console===

On the web console (Tools &gt; Web Developer &gt; Web Console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.

====Web console close button is missing====

On the web console (Tools &gt; Web Developer &gt; Web Console) the sprite mapping for the close button is messed up.

===Style Inspector===

The style inspector that is part of FF10.0+ needs to be styled. Using the default theme in the latest Firefox, please try Tools &gt; Web Developer &gt; Inspect to see how this new feature functions and how it should be styled. You'll probably want to copy the files from the folder "browser/devtools/" from the default theme into your theme and then modify as necessary to achieve the desired look.

The text labels of breadcrumbs on the style inspector (Tools &gt; Web Developer &gt; Inspect) are too similar to the background colors making them very hard to read. Please choose text label colors that stand out against the background color better. The style rules for these labels can be found near the end of chrome://browser/skin/browser.css. The color style for the follow statements need to be adjusted:

<br>---

<br>&nbsp;&nbsp;.inspector-breadcrumbs-classes {

<br>---

The use of the styling rule "fill" in -moz-border-image is incompatible with versions of Firefox older than FF14, however, its use is needed for FF14+. Themes that use -moz-border-image and support both FF14+ and older versions of Firefox need to use both the older and newer methodologies like the following example.&nbsp;&nbsp;In most themes this issue specifically affects the breadcrumbs toolbar of the style inspector.

<br>---

<br>&nbsp;&nbsp;.muteButton[muted="true"] {...}

<br>---

The error console is reporting the following issue:

<br> ----------

<br>---

<br>You can generate the error console message by going to https://www.mozilla.org/mission/. If you are using the extension Console² (https://addons.mozilla.org/en-US/firefox/addon/console²) you can easily filter out content related messages to see just chrome issues.

Firefox no longer supports -moz-border-radius style properties. Use CSS standard border-radius properties instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/border-radius

Firefox no longer supports -moz-box-shadow style property. Use CSS standard box-shadow property instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/box-shadow

Firefox no longer supports -moz-transition style property. Use CSS standard transition property instead (supported by Firefox since FF4.0). See: https://developer.mozilla.org/en/CSS/transition