Confirmed users
116
edits
AMO:Editors/EditorGuide/CommonThemeProblems: Difference between revisions
Jump to navigation
Jump to search
AMO:Editors/EditorGuide/CommonThemeProblems (view source)
Revision as of 00:09, 1 August 2012
, 1 August 2012→Style Inspector
| Line 89: | Line 89: | ||
On the web console (Tools > Web Developer > Web Console) the sprite mapping for the close button is messed up. | On the web console (Tools > Web Developer > Web Console) the sprite mapping for the close button is messed up. | ||
===Style Inspector=== | ===Style Inspector=== | ||
====Style inspector is missing button icons on toolbar==== | |||
The style inspector is missing icons from its inspect and "markup panel buttons on its toolbar. To fix this issue you need to copy the files chrome://browser/skin/devtools/inspect-button.png and chrome://browser/skin/devtools/treepanel-button.png from the default theme into your "browser/devetools/" folder. You also need to insert the following style rules into the proper place in the "browser/browser.css" file in your theme theme: | |||
<br>--- | |||
<br>/* Highlighter toolbar - HTML Tree */ | |||
<br> | |||
<br>#inspector-treepanel-toolbutton { | |||
<br> list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png"); | |||
<br> -moz-margin-end: 0; | |||
<br> -moz-image-region: rect(0px 18px 16px 0px); | |||
<br>} | |||
<br> | |||
<br>/* Highlighter toolbar */ | |||
<br> | |||
<br>#inspector-inspect-toolbutton { | |||
<br> list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); | |||
<br> -moz-image-region: rect(0px 16px 16px 0px); | |||
<br>} | |||
<br>--- | |||
====Style inspector is completely unstyled==== | ====Style inspector is completely unstyled==== | ||
The style inspector that is part of FF10.0+ needs to be styled. Using the default theme in the latest Firefox, please try Tools > Web Developer > 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 style inspector that is part of FF10.0+ needs to be styled. Using the default theme in the latest Firefox, please try Tools > Web Developer > 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. | ||
====Style inspector breadcrumb button backgrounds are not consistent between pre-FF14 and FF14+==== | |||
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. In most themes this issue specifically affects the breadcrumbs toolbar of the style inspector. | |||
<br>--- | |||
<br> .inspector-breadcrumbs-button { | |||
<br> -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch; /* For FF13- */ | |||
<br> -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; /* For FF14+ */ | |||
<br> } | |||
<br>--- | |||
====Style inspector's bread crumb buttons are hard to read==== | ====Style inspector's bread crumb buttons are hard to read==== | ||
The text labels of breadcrumbs on the style inspector (Tools > Web Developer > 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: | The text labels of breadcrumbs on the style inspector (Tools > Web Developer > 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: | ||
| Line 103: | Line 131: | ||
<br> .inspector-breadcrumbs-classes { | <br> .inspector-breadcrumbs-classes { | ||
<br>--- | <br>--- | ||
===Responsive Design View=== | ===Responsive Design View=== | ||
====Responsive design view is missing background for unused area==== | ====Responsive design view is missing background for unused area==== | ||