Bug 1426677 - Remove inset borders from the Page Info window and consolidate styling across platforms. r?ntim
MozReview-Commit-ID: HrEqujoMcIk
--- a/browser/base/content/pageinfo/pageInfo.xul
+++ b/browser/base/content/pageinfo/pageInfo.xul
@@ -240,17 +240,17 @@
<spacer id="imageSaveBoxSpacer" flex="1"/>
<button label="&selectall.label;" accesskey="&selectall.accesskey;"
id="selectallbutton"
oncommand="doSelectAllMedia();"/>
<button label="&mediaSaveAs;" accesskey="&mediaSaveAs.accesskey;"
icon="save" id="imagesaveasbutton"
oncommand="saveMedia();"/>
</hbox>
- <vbox id="imagecontainerbox" class="inset iframe" flex="1" pack="center">
+ <vbox id="imagecontainerbox" flex="1" pack="center">
<hbox id="theimagecontainer" pack="center">
<image id="thepreviewimage"/>
</hbox>
<hbox id="brokenimagecontainer" pack="center" collapsed="true">
<image id="brokenimage" src="resource://gre-resources/broken-image.png"/>
</hbox>
</vbox>
</vbox>
--- a/browser/themes/linux/pageInfo.css
+++ b/browser/themes/linux/pageInfo.css
@@ -17,18 +17,20 @@
}
#viewGroup > radio[selected="true"] {
background-color: Highlight;
color: HighlightText;
}
#topBar {
- -moz-appearance: listbox;
- margin: 8px 8px 0;
+ border-bottom: 1px solid ThreeDShadow;
+ padding-inline-start: 10px;
+ background-color: -moz-Field;
+ color: -moz-FieldText;
}
#generalTab {
-moz-image-region: rect(0px, 32px, 32px, 0px)
}
#mediaTab {
-moz-image-region: rect(0px, 64px, 32px, 32px)
@@ -46,49 +48,46 @@
-moz-image-region: rect(0px, 160px, 32px, 128px)
}
#mainDeck {
padding-left: 2px;
padding-right: 2px;
}
-deck {
- padding: 10px 10px 10px 10px;
+#mainDeck {
+ padding: 10px;
}
/* Misc */
tree {
margin: .5em;
}
.gridSeparator {
width: .5em;
}
textbox {
background: transparent !important;
border: none;
- padding: 0px;
+ padding: 0;
margin-top: 1px;
-moz-appearance: none;
}
textbox.header {
margin-inline-start: 0;
}
-.iframe {
+#imagecontainerbox {
margin: .5em;
background: white;
overflow: auto;
-}
-
-.fixedsize {
- height: 8.5em;
+ border: 1px solid ThreeDLightShadow;
}
textbox[disabled] {
font-style: italic;
}
/* General Tab */
#generalPanel > #titletext {
@@ -157,85 +156,62 @@ groupbox.treebox .groupbox-body {
margin: 1em;
}
treechildren::-moz-tree-cell-text(broken) {
font-style: italic;
color: graytext;
}
-#mediaPreviewBox .inset {
- -moz-appearance: listbox;
- margin-bottom: 0;
-}
-
/* Feeds Tab */
#feedPanel {
margin-left: 2px;
margin-right: 2px;
}
#feedtree {
margin-bottom: 0px;
}
#feedListbox richlistitem {
padding-top: 6px;
padding-bottom: 6px;
padding-inline-start: 7px;
padding-inline-end: 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
color: -moz-FieldText;
}
#feedListbox richlistitem[selected="true"] {
background-color: -moz-Dialog;
color: -moz-DialogText;
}
#feedListbox {
margin-bottom: 0;
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
}
.feedTitle {
font-weight: bold;
}
/* Permissions Tab */
-#permPanel {
- margin-left: 6px;
- margin-right: 6px;
-}
#permList {
-moz-appearance: listbox;
- margin-top: .5em;
+ margin: .5em;
overflow: auto;
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
- background-color: -moz-field;
color: -moz-FieldText;
}
.permission {
- padding-top: 6px;
- padding-bottom: 6px;
- padding-inline-start: 7px;
- padding-inline-end: 7px;
+ padding: 6px 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
}
.permissionLabel {
font-weight: bold;
}
.permission:hover {
background-color: -moz-dialog;
--- a/browser/themes/osx/pageInfo.css
+++ b/browser/themes/osx/pageInfo.css
@@ -32,49 +32,46 @@
}
#viewGroup > radio[selected=true],
#viewGroup > toolbarbutton[checked=true] {
color: #FFF !important;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
}
-deck {
- padding: 10px 10px 10px 10px;
+#mainDeck {
+ padding: 10px;
}
/* Misc */
tree {
margin: .5em;
}
.gridSeparator {
width: .5em;
}
textbox {
background: transparent !important;
border: none;
- padding: 0px;
+ padding: 0;
margin-top: 1px;
-moz-appearance: none;
}
textbox.header {
margin-inline-start: 0;
}
-.iframe {
+#imagecontainerbox {
margin: .5em;
background: white;
overflow: auto;
-}
-
-.fixedsize {
- height: 8.5em;
+ border: 1px solid ThreeDLightShadow;
}
textbox[disabled] {
font-style: italic;
}
/* General Tab */
groupbox.collapsable caption .caption-icon {
@@ -141,63 +138,49 @@ treechildren::-moz-tree-cell-text(broken
}
#feedListbox richlistitem {
padding-top: 6px;
padding-bottom: 6px;
padding-inline-start: 7px;
padding-inline-end: 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
}
#feedListbox richlistitem[selected="true"] {
background-color: -moz-Dialog;
color: -moz-DialogText;
}
-#feedListbox {
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
-}
-
.feedTitle {
font-weight: bold;
}
/* Permissions Tab */
#permList {
- margin-top: .5em;
+ margin: .5em;
overflow: auto;
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
- background-color: -moz-field;
+ -moz-appearance: listbox;
+ color: -moz-fieldtext;
}
.permission {
- padding-top: 6px;
- padding-bottom: 6px;
- padding-inline-start: 7px;
- padding-inline-end: 7px;
+ padding: 6px 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
}
.permissionLabel {
font-weight: bold;
}
.permission:hover {
background-color: -moz-dialog;
+ color: -moz-DialogText;
}
/* Security Tab */
#securityPanel .caption-icon {
display: none;
}
#securityPanel .header {
--- a/browser/themes/windows/pageInfo.css
+++ b/browser/themes/windows/pageInfo.css
@@ -23,95 +23,97 @@
}
#viewGroup > radio[selected="true"] {
background-color: #C1D2EE;
color: black;
}
#topBar {
- border-bottom: 2px groove ThreeDFace;
+ border-bottom: 1px solid ThreeDLightShadow;
padding-inline-start: 10px;
background-color: -moz-Field;
color: -moz-FieldText;
}
#generalTab {
-moz-image-region: rect(0px, 32px, 32px, 0px)
}
-#generalTab:hover, #generalTab[selected="true"] {
+#generalTab:hover,
+#generalTab[selected="true"] {
-moz-image-region: rect(32px, 32px, 64px, 0px)
}
#mediaTab {
-moz-image-region: rect(0px, 64px, 32px, 32px)
}
-#mediaTab:hover, #mediaTab[selected="true"] {
+#mediaTab:hover,
+#mediaTab[selected="true"] {
-moz-image-region: rect(32px, 64px, 64px, 32px)
}
#feedTab {
-moz-image-region: rect(0px, 96px, 32px, 64px)
}
-#feedTab:hover, #feedTab[selected="true"] {
+#feedTab:hover,
+#feedTab[selected="true"] {
-moz-image-region: rect(32px, 96px, 64px, 64px)
}
#permTab {
-moz-image-region: rect(0px, 128px, 32px, 96px)
}
-#permTab:hover, #permTab[selected="true"] {
+#permTab:hover,
+#permTab[selected="true"] {
-moz-image-region: rect(32px, 128px, 64px, 96px)
}
#securityTab {
-moz-image-region: rect(0px, 160px, 32px, 128px)
}
-#securityTab:hover, #securityTab[selected="true"] {
+#securityTab:hover,
+#securityTab[selected="true"] {
-moz-image-region: rect(32px, 160px, 64px, 128px)
}
-deck {
- padding: 10px 10px 10px 10px;
+#mainDeck {
+ padding: 10px;
}
/* Misc */
tree {
margin: .5em;
}
.gridSeparator {
width: .5em;
}
textbox {
background: transparent !important;
border: none;
- padding: 0px;
+ padding: 0;
margin-top: 1px;
-moz-appearance: none;
}
textbox.header {
margin-inline-start: 0;
}
-.iframe {
+#imagecontainerbox {
margin: .5em;
background: white;
overflow: auto;
-}
-
-.fixedsize {
- height: 8.5em;
+ border: 1px solid ThreeDLightShadow;
}
textbox[disabled] {
font-style: italic;
}
/* General Tab */
groupbox.collapsable caption .caption-icon {
@@ -183,63 +185,49 @@ treechildren::-moz-tree-cell-text(broken
}
#feedListbox richlistitem {
padding-top: 6px;
padding-bottom: 6px;
padding-inline-start: 7px;
padding-inline-end: 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
}
#feedListbox richlistitem[selected="true"] {
background-color: -moz-Dialog;
color: -moz-DialogText;
}
-#feedListbox {
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
-}
-
.feedTitle {
font-weight: bold;
}
/* Permissions Tab */
#permList {
- margin-top: .5em;
+ margin: .5em;
overflow: auto;
- border: 2px solid;
- -moz-border-top-colors: ThreeDShadow ThreeDDarkShadow;
- -moz-border-right-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-bottom-colors: ThreeDHighlight ThreeDLightShadow;
- -moz-border-left-colors: ThreeDShadow ThreeDDarkShadow;
- background-color: -moz-field;
+ -moz-appearance: listbox;
+ color: -moz-fieldtext;
}
.permission {
- padding-top: 6px;
- padding-bottom: 6px;
- padding-inline-start: 7px;
- padding-inline-end: 7px;
+ padding: 6px 7px;
min-height: 25px;
- border-bottom: 1px dotted #C0C0C0;
+ border-bottom: 1px dotted ThreeDShadow;
}
.permissionLabel {
font-weight: bold;
}
.permission:hover {
background-color: -moz-dialog;
+ color: -moz-dialogText;
}
/* Security Tab */
#securityPanel .caption-icon {
display: none;
}
#securityPanel .header {