Bug 507962 - Pinstripe widget margin cleanup. r=dao

--HG--
extra : rebase_source : e8b5bab4b2ba45f6f64a4d20cb5336f69d965c00

browser/components/preferences/fonts.xul

@@ -152,7 +152,7 @@
                      accesskey="&sizeProportional.accesskey;"
                      control="sizeVar"/>
             </hbox>  
-            <menulist id="sizeVar" class="small-margin">
+            <menulist id="sizeVar">
               <menupopup>
                 <menuitem value="9" label="9"/>
                 <menuitem value="10" label="10"/>

toolkit/themes/pinstripe/global/button.css

@@ -47,9 +47,9 @@
 
 button {
   -moz-appearance: button;
-  /* The margin used here come from the Aqua Human Interface Guidelines,
-     there should be 12 pixels between two buttons. */
-  margin: 6px;
+  /* The horizontal margin used here come from the Aqua Human Interface
+     Guidelines, there should be 12 pixels between two buttons. */
+  margin: 5px 6px 3px;
   min-width: 79px;
   color: ButtonText;
 }

toolkit/themes/pinstripe/global/checkbox.css

@@ -46,12 +46,7 @@
 checkbox {
   -moz-appearance: checkbox-container;
   -moz-box-align: center;
-  margin: 2px 2px 4px;
-}
-
-.checkbox-label-box {
-  margin-left: 0px;
-  padding: 0px;
+  margin: 4px 2px;
 }
 
 .checkbox-icon {
@@ -59,8 +54,7 @@ checkbox {
 }
 
 .checkbox-label {
-  margin: 0 !important;
-  padding-bottom: 1px;
+  margin: 1px 0 !important;
 }
 
 /* ..... disabled state ..... */
@@ -73,7 +67,7 @@ checkbox[disabled="true"] {
 
 .checkbox-check {
   -moz-appearance: checkbox;
-  margin: 0 1px;
+  margin: 1px 1px 0;
   /* vertical-align tells native theming where to snap to. However, this doesn't
    * always work reliably because of bug 503833. */
   vertical-align: top;

toolkit/themes/pinstripe/global/dialog.css

@@ -70,7 +70,7 @@ dialog {
   -moz-box-align: start;
   height: 24px;
   width: 24px;
-  margin: 4px;
+  margin: 3px 4px;
 }
 
 .dialog-button[dlgtype="help"][disabled] {

toolkit/themes/pinstripe/global/filefield.css

@@ -45,18 +45,24 @@
 }
 
 filefield {
-  margin: 2px 4px 2px 27px;
+  margin: 4px;
+  -moz-margin-start: 27px;
   -moz-appearance: textfield;
 }
 
 .fileFieldContentBox {
-  background-color: -moz-Dialog;
+  margin: -3px;
+  background-color: rgba(230, 230, 230, 0.6);
   color: -moz-DialogText;
-  padding: 0px 0px 0px 3px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  -moz-padding-start: 5px;
+  -moz-padding-end: 3px;
 }
 
 .fileFieldLabel {
   -moz-appearance: none;
   background-color: transparent;
   border: none;
+  margin: 0 4px;
 }

toolkit/themes/pinstripe/global/global.css

@@ -202,10 +202,6 @@ separator.groove[orient="vertical"] {
   margin-left: 0.4em;
   margin-right: 0.4em;
 }
-
-.small-margin {
-  margin: 1px 2px;
-}
     
 .plain {
   -moz-appearance: none;
@@ -220,10 +216,7 @@ label {
 }
 
 label {
-  margin-top: 1px;
-  margin-bottom: 2px;
-  -moz-margin-start: 6px;
-  -moz-margin-end: 5px;
+  margin: 2px 6px;
 }
 
 label[disabled="true"] {

toolkit/themes/pinstripe/global/menulist.css

@@ -48,7 +48,7 @@
 
 menulist {
   -moz-appearance: menulist;
-  margin: 2px 4px 1px;
+  margin: 5px 2px 3px;
   min-height: 20px !important;
   color: -moz-DialogText;
 }
@@ -94,7 +94,7 @@ menulist[disabled="true"] > .menulist-dropmarker {
 
 menulist[editable="true"] {
   -moz-appearance: menulist-textfield;
-  margin: 2px 4px;
+  margin: 4px 2px;
 }
 
 html|*.menulist-editable-input {

toolkit/themes/pinstripe/global/radio.css

@@ -50,7 +50,7 @@ radiogroup {
 radio {
   -moz-appearance: radio-container;
   -moz-box-align: center;
-  margin: 2px 2px 4px;
+  margin: 4px 2px;
   -moz-user-focus: ignore;
 }
 
@@ -64,8 +64,7 @@ radio {
 }
 
 .radio-label {
-  margin: 0 !important;
-  padding-bottom: 1px;
+  margin: 1px 0 !important;
 }
 
 /* ..... disabled state ..... */
@@ -78,7 +77,7 @@ radio[disabled="true"] {
 
 .radio-check, .radio-check-box1 {
   -moz-appearance: radio;
-  margin: -1px 1px 1px;
+  margin: 0 1px 1px;
   /* vertical-align tells native theming where to snap to. However, this doesn't
    * always work reliably because of bug 503833. */
   vertical-align: bottom;

toolkit/themes/pinstripe/global/tabbox.css

@@ -49,7 +49,7 @@ tab:last-of-type {
 }
 
 .tab-middle {
-  padding: 2px 6px;
+  padding: 1px 6px 2px;
 }
 
 .tabs-left,

toolkit/themes/pinstripe/global/textbox.css

@@ -50,7 +50,7 @@
 textbox {
   -moz-appearance: textfield;
   cursor: text;
-  margin: 4px 4px;
+  margin: 4px;
   border: 3px solid;
   -moz-border-top-colors: transparent #888888 #000000;
   -moz-border-right-colors: transparent #FFFFFF #000000;

toolkit/themes/pinstripe/global/viewbuttons.css

@@ -58,7 +58,7 @@
   font: menu;
   text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
   margin: 0;
-  padding: 1px 4px 0;
+  padding: 0 4px;
   border: none;
   border-left: 1px solid rgba(0, 0, 0, 0.8);
   background: -moz-linear-gradient(top, bottom, from(#FFF), to(#ADADAD)) repeat-x;

toolkit/themes/pinstripe/reftests/baseline.xul

@@ -0,0 +1,165 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!--
+ * This is a complicated test.
+ * XUL authors like to place several different widgets on the same line by
+ * putting them in a <hbox align="center">. In order for this to look good,
+ * the baselines of the text contained in the widgets should line up.
+ * This is what this test is testing.
+ * The test passes if it's completely white.
+ *
+ * It works like this:
+ * For every combination of two different widgets (where widget is one of
+ * label, radio, checkbox, button, textbox, menulist, menulist[editable="true"] or
+ * filefield), there's a stack with two layers. The back layer in the stack is
+ * just a vertically centered label with a bunch of underscores. This is the
+ * baseline that the text on the widgets should hit.
+ * On the foreground layer in the stack we've placed the pair of widgets we're
+ * testing. They also have underscores in their labels.
+ *
+ * Now we want to test whether the underscores in the foreground layer are directly
+ * on top of those in the back layer. For that we use color-keying and a tricky
+ * SVG color transformation.
+ * The back layer of the stack has a red background; the underscores of the
+ * back label are in white (and have a white text-shadow in order to fill up the
+ * gaps between the individual letters).
+ * Now we want the foreground layer to be solid white, except for those pixels
+ * that make up the labels: These should be transparent.
+ * So if the baselines line up, everything is white, since at those pixels where
+ * the foreground is transparent, only the white pixels from the back layer shine
+ * through. If the baselines don't line up, red pixels from the background will
+ * shine through, and the comparison with about:blank (completely white) will fail.
+ *
+ * So how do we get the foreground white and transparent? That's the job of the
+ * SVG color transformation filter. It's a simple matrix that makes turns opaque
+ * yellow into transparent and all other colors into white.
+ * -->
+
+<window title="Baseline test"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+window {
+  -moz-appearance: none;
+  background-color: white;
+}
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+stack > hbox:first-child {
+  background: red;
+  color: white;
+  text-shadow: 5px 0 white, -5px 0 white;
+}
+stack > .foreground {
+  filter: url(#yellow2transparent);
+}
+stack > hbox:last-child > * {
+  color: yellow;
+}
+]]>
+</html:style>
+
+  <svg:svg style="visibility: collapse;">
+    <svg:filter id="yellow2transparent" color-interpolation-filters="sRGB">
+      <svg:feColorMatrix type="matrix"
+           values="0 0 0 0 1
+                   0 0 0 0 1
+                   0 0 0 0 1
+                   -100 -100 100 -100 300"/>
+    </svg:filter>
+  </svg:svg>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = i + 1; j < set.length; ++j) {
+      ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) elWithValue("label", v)
+function createRadio(v) elWithValue("radio", v)
+function createCheckbox(v) elWithValue("checkbox", v)
+function createButton(v) elWithValue("button", v)
+function createTextField(v) elWithValue("textbox", v)
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function createFileField(v) {
+  let field = elWithValue("filefield", v);
+  field.setAttribute("image", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrCaTT51nAoFAIBAIBAKB4MoCtVsCPjrGuiwAAAAASUVORK5CYII=");
+  return field;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createLabel, createRadio, createCheckbox, createButton, createMenulist, createTextField,
+       /* createEditableMenulist, createFileField, */ /* These don't inherit "color" properly */
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild.lastChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("______"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <stack>
+        <hbox align="center">
+          <label value="______________________________________________"/>
+        </hbox>
+        <hbox align="center" class="foreground">
+        </hbox>
+      </stack>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" flex="1"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>

toolkit/themes/pinstripe/reftests/checkboxsize-ref.xul

@@ -5,6 +5,7 @@ vbox { height: 50px; }
 box {
   -moz-appearance: checkbox;
   margin-left: 2px;
+  margin-top: 1px;
 }
 " type="text/css"?>
 

toolkit/themes/pinstripe/reftests/nostretch-ref.xul

@@ -0,0 +1,97 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window title="Stretched controls test reference"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+.foreground > :nth-child(2) {
+  display: none; /* <----- This is the only difference from nostretch.xul */
+}
+]]>
+</html:style>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = 0; j < set.length; ++j) {
+      if (i != j)
+        ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) elWithValue("label", v)
+function createRadio(v) elWithValue("radio", v)
+function createCheckbox(v) elWithValue("checkbox", v)
+function createButton(v) elWithValue("button", v)
+function createTextField(v) elWithValue("textbox", v)
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createButton, createMenulist, createTextField, createEditableMenulist,
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("Label"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <hbox class="foreground"/>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" width="500"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>

toolkit/themes/pinstripe/reftests/nostretch.xul

@@ -0,0 +1,110 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<!--
+ * This test tests whether you can put different widgets in the same
+ * hbox without stretching them, even if you don't set align="center".
+ * I.e. prior to the fix that added this patch, having a button and a
+ * menulist in the same hbox next to each other would stretch the menulist
+ * vertically because the button had such a big vertical margin.
+ *
+ * The test works like this: Two widgets are placed in a hbox, and the second
+ * widget is visibility: hidden. In the reference (nostretch-ref.xul), the
+ * second widget is display: none. If test and reference look the same,
+ * adding the second widget hasn't affected the appearance of the first widget,
+ * and everything's fine.
+ * -->
+<window title="Stretched controls test"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        orient="vertical"
+        class="reftest-wait"
+        onload="loaded()">
+
+<html:style><![CDATA[
+.regular {
+  font: -moz-dialog;
+}
+.small {
+  font: message-box;
+}
+.spacer {
+  height: 40px;
+}
+.foreground > :nth-child(2) {
+  visibility: hidden;
+}
+]]>
+</html:style>
+
+<script type="application/javascript;version=1.8"><![CDATA[
+
+function cE(elem) {
+  return document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", elem);
+}
+function elWithValue(elem, val) {
+  let e = cE(elem);
+  e.setAttribute(elem == "label" || elem == "textbox" ? "value" : "label", val);
+  return e;
+}
+
+function allPairs(set) {
+  let ps = [];
+  for(let i = 0; i < set.length; ++i) {
+    for (let j = 0; j < set.length; ++j) {
+      if (i != j)
+        ps.push([set[i], set[j]]);
+    }
+  }
+  return ps;
+}
+
+function createLabel(v) elWithValue("label", v)
+function createRadio(v) elWithValue("radio", v)
+function createCheckbox(v) elWithValue("checkbox", v)
+function createButton(v) elWithValue("button", v)
+function createTextField(v) elWithValue("textbox", v)
+function createMenulist(v) {
+  let [list, popup, item] = [cE("menulist"), cE("menupopup"), elWithValue("menuitem", v)];
+  item.setAttribute("selected", "true");
+  popup.appendChild(item);
+  list.appendChild(popup);
+  return list;
+}
+function createEditableMenulist(v) {
+  let list = createMenulist(v);
+  list.setAttribute("editable", "true");
+  return list;
+}
+function loaded() {
+  let template = document.getElementById("template");
+  ["regular", "small"].forEach(function(size) {
+    let wrapper = document.querySelectorAll("#wrapper > ." + size)[0];
+    allPairs([
+      createButton, createMenulist, createTextField, createEditableMenulist,
+    ]).forEach(function(elemList) {
+      let newBox = template.cloneNode(true);
+      newBox.className = "spacer";
+      let foregroundRow = newBox.firstChild;
+      elemList.forEach(function(creator) {
+        foregroundRow.appendChild(creator("Label"));
+      });
+      wrapper.appendChild(newBox);
+    });
+  });
+  document.documentElement.className = "";
+}
+
+]]></script>
+    <vbox id="template">
+      <hbox class="foreground"/>
+    </vbox>
+  <hbox id="wrapper">
+    <vbox class="regular" width="500"/>
+    <vbox class="small" flex="1"/>
+  </hbox>
+
+  <spacer flex="1"/>
+
+</window>

toolkit/themes/pinstripe/reftests/radiosize-ref.xul

@@ -5,6 +5,7 @@ vbox { height: 50px; }
 box {
   -moz-appearance: radio;
   margin-left: 2px;
+  margin-top: 1px;
 }
 " type="text/css"?>
 

toolkit/themes/pinstripe/reftests/reftest.list

@@ -1,3 +1,5 @@
 skip-if(MOZ_WIDGET_TOOLKIT!="cocoa") == 482681.xul 482681-ref.xul
 skip-if(MOZ_WIDGET_TOOLKIT!="cocoa") == radiosize.xul radiosize-ref.xul
 skip-if(MOZ_WIDGET_TOOLKIT!="cocoa") == checkboxsize.xul checkboxsize-ref.xul
+skip-if(MOZ_WIDGET_TOOLKIT!="cocoa") == baseline.xul about:blank
+skip-if(MOZ_WIDGET_TOOLKIT!="cocoa") == nostretch.xul nostretch-ref.xul