45060 - addressing widget cleanup, r=ducarroz, sr=sspitzer

mailnews/compose/resources/content/addressingWidgetOverlay.js

@@ -141,6 +141,7 @@ function CompFields2Recipients(msgCompFields, msgType)
 		dump("replacing child in comp fields 2 recips \n");
 	    var parent = treeChildren.parentNode;
 	    parent.replaceChild(newTreeChildrenNode, treeChildren);
+      awFitDummyRows();
         setTimeout("awFinishCopyNodes();", 0);
 	}
 }
@@ -414,7 +415,10 @@ function awAppendNewRow(setFocus)
 	{
 	    var lastRecipientType = awGetPopupElement(top.MAX_RECIPIENTS).selectedItem.getAttribute("data");
 
-		var newNode = awCopyNode(treeitem1, body, 0);
+    var nextDummy = awGetNextDummyRow();
+		var newNode = awCopyNode(treeitem1, body, nextDummy);
+    if (nextDummy) body.removeChild(nextDummy);
+    
 		top.MAX_RECIPIENTS++;
 
         var input = newNode.getElementsByTagName(awInputElementName());
@@ -529,7 +533,8 @@ function awRemoveRow(row)
 	var body = document.getElementById('addressWidgetBody');
 	
 	awRemoveNodeAndChildren(body, awGetTreeItem(row));
-
+  awFitDummyRows();
+  
 	top.MAX_RECIPIENTS --;
 }
 
@@ -546,7 +551,6 @@ function awRemoveNodeAndChildren(parent, nodeToRemove)
 	}
 	
 	parent.removeChild(nodeToRemove);
-
 }
 
 function awSetFocus(row, inputElement)
@@ -762,3 +766,121 @@ function awKeyDown(event, treeElement)
     break;   
   }
 }
+
+/* ::::::::::: addressing widget dummy rows ::::::::::::::::: */
+
+var gAWContentHeight = 0;
+var gAWRowHeight = 0;
+
+function awFitDummyRows()
+{
+  awCalcContentHeight();
+  awCreateOrRemoveDummyRows();  
+}
+
+function awCreateOrRemoveDummyRows()
+{
+  var body = document.getElementById("addressWidgetBody");
+  var bodyHeight = body.boxObject.height;
+  
+  // remove rows to remove scrollbar
+  var kids = body.childNodes;
+  for (var i = kids.length-1; gAWContentHeight > bodyHeight && i >= 0; --i) {
+    if (kids[i].hasAttribute("_isDummyRow")) {
+      gAWContentHeight -= gAWRowHeight;
+      body.removeChild(kids[i]);
+    }
+  }
+
+  // add rows to fill space
+  if (gAWRowHeight) {
+    while (gAWContentHeight+gAWRowHeight < bodyHeight) {
+      awCreateDummyItem(body);
+      gAWContentHeight += gAWRowHeight;
+    }
+  }
+}
+
+function awCalcContentHeight()
+{
+  var body = document.getElementById("addressWidgetBody");
+  var kids = body.getElementsByTagName("treerow");
+
+  gAWContentHeight = 0;
+  if (kids.length > 0) {
+    // all rows are forced to a uniform height in xul trees, so
+    // find the first tree row with a boxObject and use it as precedent
+    var i = 0;
+    do {
+      gAWRowHeight = kids[i].boxObject.height;
+      ++i;
+    } while (i < kids.length && !gAWRowHeight);
+    gAWContentHeight = gAWRowHeight*kids.length;
+  }
+}
+
+function awCreateDummyItem(aParent)
+{
+  var titem = document.createElement("treeitem");
+  titem.setAttribute("_isDummyRow", "true");
+
+  var trow = document.createElement("treerow");
+  trow.setAttribute("class", "dummy-row");
+  trow.setAttribute("onclick", "awDummyRow_onclick()");
+  titem.appendChild(trow);
+
+  awCreateDummyCell(trow);
+  awCreateDummyCell(trow);
+  
+  if (aParent)
+    aParent.appendChild(titem);
+  
+  return titem;
+}
+
+function awCreateDummyCell(aParent)
+{
+  var cell = document.createElement("treecell");
+  cell.setAttribute("class", "treecell-addressingWidget dummy-row-cell");
+  if (aParent)
+    aParent.appendChild(cell);
+  
+  return cell;
+}
+
+function awDummyRow_onclick() {
+  // pass click event back to handler
+  awClickEmptySpace(document.getElementById("addressWidgetBody"), true); 
+}
+
+function awGetNextDummyRow()
+{
+  // gets the next row from the top down
+  var body = document.getElementById("addressWidgetBody");
+  var kids = body.childNodes;
+  for (var i = 0; i < kids.length; ++i) {
+    if (kids[i].hasAttribute("_isDummyRow"))
+      return kids[i];
+  }
+  return null;
+}
+
+function awSizerListen()
+{
+  // when splitter is clicked, fill in necessary dummy rows each time the mouse is moved
+  awCalcContentHeight(); // precalculate
+  document.addEventListener("mousemove", awSizerMouseMove, true);  
+  document.addEventListener("mouseup", awSizerMouseUp, false);  
+}
+
+function awSizerMouseMove()
+{
+  awCreateOrRemoveDummyRows();
+}
+
+function awSizerMouseUp()
+{
+  document.removeEventListener("mousemove", awSizerMouseUp, false);  
+  document.removeEventListener("mouseup", awSizerMouseUp, false);  
+}
+

mailnews/compose/resources/content/messengercompose.xul

@@ -515,7 +515,7 @@
     </toolbar>
   </toolbox>
 
-  <splitter id="compose-toolbar-sizer" collapse="after"/>
+  <splitter id="compose-toolbar-sizer" onmousedown="awSizerListen()" collapse="after"/>
 
   <!-- The mail message body frame -->
   <box id="appcontent" orient="vertical" flex="1">

themes/modern/global/globalBindings.xml

@@ -208,6 +208,16 @@
     </content>
   </binding>
 
+  <binding id="menulist-compact" extends="chrome://global/content/menulistBindings.xml#menulist">
+    <content includes="menupopup" flex="1">
+      <xul:box class="menulist-compact-internal-box" flex="1" autostretch="never">
+        <xul:image class="menulist-compact-dropmarker" inherits="disabled"/>
+        <xul:spring flex="1"/>
+        <xul:text class="menulist-compact-text" inherits="value,accesskey,crop,disabled" crop="right"/>
+      </xul:box>
+    </content>
+  </binding>
+    
   <binding id="scrollbar" extends="chrome://global/content/scrollbarBindings.xml#scrollbar">
     <content>
       <xul:scrollbarbutton sbattr="scrollbar-up-top" type="decrement" inherits="sborient=align">

themes/modern/global/menulist.css

@@ -317,4 +317,39 @@
       border: 1px inset #B2BFBF;
     }
 
+/* :::::::::: compact menulists :::::::::: */
+
+.menulist-compact {
+  -moz-binding: url("chrome://global/skin/globalBindings.xml#menulist-compact");
+  margin: 0px;
+  border: 1px solid #000000;
+  min-width: 0px;
+  min-height: 0px;
+  background-color: #D6DFDF;
+  -moz-user-focus: ignore;
+}
+
+.menulist-compact-text {
+  margin-right: 3px;
+}  
+
+.menulist-compact-internal-box {
+  border-left: 1px solid #F7F7F7;
+  border-top: 1px solid #F7F7F7;
+  border-right: 1px solid #8CA2A5;
+  border-bottom: 1px solid #8CA2A5;
+  padding: 1px;
+}
+    
+.menulist-compact-dropmarker {
+  list-style-image: url("chrome://global/skin/menulist-compact-arrow.gif");
+  margin-left: 2px;
+}
+      
+.menulist-compact:hover:active > .menulist-compact-internal-box,
+.menulist-compact[open="true"] > .menulist-compact-internal-box {
+  background-color: #949EA5;
+  border: 1px solid #808080;
+}
+
 

themes/modern/jar.mn

@@ -274,6 +274,7 @@ modern.jar:
     skin/modern/global/check-radio-check-pressed.gif				   (global/check-radio-check-pressed.gif)
     skin/modern/global/check-radio-check.gif						   (global/check-radio-check.gif)
     skin/modern/global/menulist-arrow.gif                  (global/menulist-arrow.gif)
+    skin/modern/global/menulist-compact-arrow.gif          (global/menulist-compact-arrow.gif)
     skin/modern/global/menulist-dis-arrow.gif              (global/menulist-dis-arrow.gif)
     skin/modern/global/menulist-left-top.gif               (global/menulist-left-top.gif)
     skin/modern/global/menulist-left-mid.gif               (global/menulist-left-mid.gif)

themes/modern/messenger/messengercompose/messengercompose.css

@@ -52,39 +52,53 @@ box.padded {
 /* addressing widget */
 
 #addressingWidgetTree {
-  height : 80px;
   width : 0px;
-  -moz-user-focus: ignore !important;
+  border: 1px inset #5B7693;
+  -moz-user-focus: none;
 }  
 
+#listcol-addressingWidget {
+  width: 9em;
+  border-right: 1px solid #D3D3E5;
+}
+
 #addressingWidgetTree > treechildren > treeitem > treerow,
 #addressingWidgetTree > treechildren > treeitem[selected="true"] > treerow {
   border: none;
-  background-color: transparent;
+  background-color: inherit;
-  color: buttontext;
+  color: inherit;
 }
 
 .treecell-addressingWidget {
 	vertical-align: middle;
+  padding: 0px;
+  border-bottom: 1px solid #D3D3E5;
 }
 
-tree.addressingWidget > treechildren > treeitem > treerow  > treecell > image {
+.treecell-addressingWidget:first-child {
-  margin : 0px 3px 0px 0px;
+  border-top: none;
+  border-bottom: none;
+}
+
+.dummy-row-cell:first-child {
+  border-top: none;
+  border-bottom: 1px solid #D3D3E5;
+}
+
+.aw-menulist {
+  margin: 0px;
+  border-top: none;
+  border-left: none;
+  border-color: #314152;
+}
+
+.person-icon {
+  margin : 2px 4px 2px 4px;
 	border: none;
 	list-style-image: url("chrome://messenger/skin/addressbook/person.gif");
 	-moz-user-focus: ignore;
 }
 
-#listcol-addressingWidget {
-  width: 110px;
-}
-
-.menulist-compact {
-  -moz-user-focus: ignore;
-  margin: 3px;
-  border: none;
-}
-
 /*
 menulist.outset
 {

xpfe/global/resources/content/treeBindings.xml

@@ -92,10 +92,20 @@
   </binding>
  
   <binding id="treecell-header">
-    <content autostretch="never">
+    <content>
-      <xul:image class="tree-header-image" inherits="src"/>
+      <xul:box class="treecell-header-box" flex="1" autostretch="never">
-      <xul:text class="tree-header-text" inherits="crop,value" flex="1" crop="right"/>
+        <xul:image class="tree-header-image" inherits="src"/>
-      <xul:image class="tree-header-sortdirection"/>
+        <xul:text class="tree-header-text" inherits="crop,value" flex="1" crop="right"/>
+        <xul:image class="tree-header-sortdirection"/>
+      </xul:box>
+    </content>
+  </binding>
+
+  <binding id="treecell-header-image">
+    <content>
+      <xul:box class="treecell-header-image-box" flex="1" autostretch="never">
+        <xul:image class="tree-header-image" inherits="src"/>
+      </xul:box>
     </content>
   </binding>
   

xpfe/global/resources/content/xul.css

@@ -305,10 +305,14 @@ treeitem[container="true"] > treerow > .treecell-indent {
  -moz-binding: url("chrome://global/content/treeBindings.xml#treecell-image");
 }
 
-.treecell-header {
+.treecell-header, .treecell-inset-header {
   -moz-binding: url("chrome://global/content/treeBindings.xml#treecell-header");
 }
 
+.treecell-header-image {
+  -moz-binding: url("chrome://global/content/treeBindings.xml#treecell-header-image");
+}
+
 .treecell-align-right {
   -moz-binding: url("chrome://global/content/treeBindings.xml#treecell-align-right");
 }