Bug 1426677 - Remove inset borders from the Page Info window and consolidate styling across platforms. r?ntim draft
authorDão Gottwald <dao@mozilla.com>
Thu, 21 Dec 2017 16:21:24 +0100
changeset 714033 5f8e05b4aaf9909e81c31cda5966f32024a45260
parent 713529 2ff08db67b917fba1558986f3f2f796260f970f8
child 744495 f60975d876a4ff0cc73bec8851a02c23ec726a52
push id93820
push userdgottwald@mozilla.com
push dateThu, 21 Dec 2017 15:22:00 +0000
reviewersntim
bugs1426677
milestone59.0a1
Bug 1426677 - Remove inset borders from the Page Info window and consolidate styling across platforms. r?ntim MozReview-Commit-ID: HrEqujoMcIk
browser/base/content/pageinfo/pageInfo.xul
browser/themes/linux/pageInfo.css
browser/themes/osx/pageInfo.css
browser/themes/windows/pageInfo.css
--- 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 {