Add new skin work (thanks to Zach Linder), fix tab bar, and add "test n of

n" to litmus tab.

testing/extensions/community/chrome/content/litmus.js

@@ -108,7 +108,6 @@
     handleDialogCancel : function() {
         if (litmus.lastTestRunSummary == "") return;
         
-        
         // this code is v. similar to readStateFromPref, but without an async call.
         $("qa-testrun-label").value = litmus.lastTestRunSummary;
         $("qa-testgroup-label").value = litmus.lastTestGroupSummary;
@@ -205,7 +204,12 @@
     selectCurrentTestCase : function() {
         //var menu = document.getElementById('testlist');
         //menu.selectedIndex = litmus.currentTestCaseIndex;
-        litmus.getTestcase($("testlist").selectedItem.value, litmus.populateTestcase);
+        litmus.getTestcase($("testlist").selectedItem.value, function(testcase) {
+        	litmus.populateTestcase(testcase);
+        	$('qa-testcase-progress').value = 
+        		qaMain.bundle.getFormattedString('qa.extension.litmus.progress',
+        			[$("testlist").selectedIndex+1, $("testlist").getRowCount()]);
+        });
     },
 	populatePreviewBox : function(testcases) {
         
@@ -224,7 +228,7 @@
             checkbox.setAttribute("type", "checkbox");
             checkbox.setAttribute("disabled", "true");
             var name = document.createElement("listcell");
-            name.setAttribute("label", "#" + testcases[i].testcase_id + " -- " + testcases[i].summary);
+            name.setAttribute("label", (i+1) + " -- " + testcases[i].summary);
             name.setAttribute("crop", "end");
             name.setAttribute("maxwidth", "175");
             row.appendChild(checkbox);
@@ -252,12 +256,14 @@
 	populateFields : function(subgroup) {
         litmus.lastSubgroupObject = subgroup;
 		litmus.populatePreviewBox(subgroup.testcases);
+		$('qa-subgroup-label').value = subgroup.name;
         $("testlist").selectedIndex = 0;
         litmus.selectCurrentTestCase();
 	},
     statePopulateFields : function(subgroup) {  //TODO: there's gotta be a better way to do this...
         litmus.lastSubgroupObject = subgroup;
         litmus.populatePreviewBox(subgroup.testcases);
+        $('qa-subgroup-label').value = subgroup.name;
         
         $("testlist").selectedIndex = qaPref.getPref(qaPref.prefBase + ".currentTestcase.testcaseIndex", "int");
         litmus.selectCurrentTestCase();

testing/extensions/community/chrome/content/qa.xul

@@ -80,7 +80,7 @@
     <tab label="&qa.litmus.title;" />
     <tab label="&qa.bugzilla.title;" />
     <tab label="&qa.chat.title;" />
-    <spacer flex="1" />
+    <spacer width="30" />
     <tab label="&qa.preferences.title;" id="qa-tabbar-prefs" />
     <tab label="&qa.help.title;" />
   </tabs>

testing/extensions/community/chrome/content/tabs/litmus.xul

@@ -40,6 +40,7 @@
 
 <!DOCTYPE overlay [
 <!ENTITY % qaDTD SYSTEM "chrome://qa/locale/qa.dtd"> %qaDTD;
+<!ENTITY % xhtmlDTD SYSTEM "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> %xhtmlDTD;
 ]>
 
 <overlay id="qa-litmus-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
@@ -55,9 +56,9 @@
 			 <button maxwidth="110" label="&qa.litmus.selecttests;"
                      oncommand="litmus.handleDialog()"
                      style="margin-left: 4px;" />
-			 <label maxwidth="140" value="" id="qa-testrun-label"/>
+			 <label maxwidth="160" value="" id="qa-testrun-label"/>
-			 <label maxwidth="140" value="" id="qa-testgroup-label"/>
+			 <label maxwidth="160" value="" id="qa-testgroup-label"/>
-			 <label maxwidth="140" value="" id="qa-subgroup-label"/>
+			 <label maxwidth="160" value="" id="qa-subgroup-label"/>
 		</vbox>
 		<listbox rows="7" minwidth="200" onselect="litmus.handleSelect()" id="testlist">
             <listcols>
@@ -68,13 +69,15 @@
                 
         </listbox>
 	 </hbox>
-	 <hbox style="font-weight: bold;">
+	 <vbox>
+	   <hbox style="font-weight: bold;">
+	  	   <label id="qa-testcase-id" value="&qa.litmus.testlist.initialdescription;" />
+	  	   <label value="&mdash;" />
+           <description id="qa-testcase-summary" maxwidth="230px" crop="end"></description> 
+	   </hbox>
+	   <label value="" id="qa-testcase-progress" />
+	 </vbox>
 	 
-		 <label id="qa-testcase-id" width = "100px" value="&qa.litmus.testlist.initialdescription;" />
-		 <label value=" --" />
-         <description id="qa-testcase-summary" maxwidth="230px" crop="end"></description>
-		 
-	 </hbox>
 	
 	<vbox width="370px" minwidth="370px">
 		<groupbox maxheight="130px" minwidth="370px" width="370px">

testing/extensions/community/chrome/locale/en-US/qa.properties

@@ -4,3 +4,5 @@ qa.extension.prefs.loadingMsg = Validating account information. Please Wait...
 qa.extension.prefs.savedMsg = Your settings have been saved
 qa.extension.sysconfig.loadingMsg = Loading menu options...
 qa.extension.loading = Loading...
+
+qa.extension.litmus.progress = Test %1$S of %2$S

testing/extensions/community/chrome/skin/qa.css

@@ -9,22 +9,76 @@
   display: none;
 }
 
+/*-------------------------------
+               HTML
+  -------------------------------*/
+
 html|ul, html|ol {
-  padding-left: 12px;
+  margin: 0;
-  margin-top: 2px;
+  padding: 0;
-  margin-bottom: 2px;
+}
+html|ul li {
+  list-style-type: square;
+  margin-bottom: 0.4em;
 }
 
 html|p {
-  margin-top: 2px;
+  
 }
 
-html|a {
+html|a, html|a:link, html|a:visited {
-  text-decoration: underline;
+  border-bottom: 1px solid #5383DF;
-  color: black;
+  color: #039;
 }
+html|a:focus, html|a:hover, html|a:active {
+  color: #333;
+  border-bottom-color: #333;
+}
+
+
+/*-------------------------------
+               TABS
+  -------------------------------*/
+
+tabs {
+  background: #e1dece url(tabrow-bg.gif) repeat-x left top;
+  height: 26px;
+}
+tab {
+  padding: 0.1em 0.6em;
+  vertical-align: middle;
+  background-color: transparent;
+}
+
+/*-------------------------------
+               PANELS
+  -------------------------------*/
+tabpanel {
+  color: #5F6775;
+  line-height: 1.6;
+}
+groupbox {
+  border-color: #e0e0e0;
+  background-color: #fff;
+  padding: 6px 8px;
+}
+caption {
+  font: bold 12px helvetica, arial, sans-serif;
+  color: #BD1D01;
+  background: transparent url(caption-bg.gif) repeat-x left 6px;
+  padding: 0;
+}
+
+#qa-qmo-help {
+
+}
+
+/*-------------------------------
+               NOTIFY
+  -------------------------------*/
 
 #qa-notify {
+  display: none; /* take out eventually... this just got annoying -zak */
   right: 18px;
   bottom: 21px;
   position: fixed;
@@ -42,7 +96,7 @@ html|a {
 
 #qa-notify-box {
   padding: 0px 6px 6px 6px;
-  display: table;
+	display: table;
 }
 
 #qa-notify-header {
@@ -50,37 +104,10 @@ html|a {
   font-weight: bold;
 }
 
-#qa-notify-header-box {
-	position: absolute;
-	top: 2px;
-}
 
-#qa-notify-content {
+/*-------------------------------
-	position: absolute;
+               GENERAL
-	left: 12px;
+  -------------------------------*/
-}
-
-#qa-notify description {
-	max-width: 400px;
-}
-
-#qa-notify-event {
-	border-style: dashed;
-	border-width: 1px;
-	margin-left: 15px;
-}
-
-#qa-notify-inprogress {
-	color: red;
-	font-size: 1.25em;
-}
-
-#qa-notify-text {
-	margin-top: 3px;	
-}
-
-
-/* general formatting */
 
 .list {
   padding-left: 10px;