[bugzilla-gnome-org-extensions] Improve appearance of "overall comment" text area

[Krzesimir Nowak <krnowak src gnome org>]

commit d29dc900ed2dc4b5668769f589f76d2470ef781f
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Sun Oct 4 17:07:38 2009 -0400

    Improve appearance of "overall comment" text area
    
    - Switch to a CSS-specified-border, and use the Bugzilla style of
      a background-color to indicate focus.
    
    - Fix the alignment on the right by moving the border to a parent
      div, and then hacking around the overflow from width: 100% and
      padding with a padding-right on that parent div. (Textareas
      are replaced elements with an intrinsic size, so width: auto
      on the text area doesn't work :-()
    
    - Instead of a "Overall Comment:" header, use a <Overall Comment>
      hint when the area is empty.

 js/splinter.js      |   10 ++++++++++
 web/index.html.body |    6 +++---
 web/splinter.css    |   25 +++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)
---
diff --git a/js/splinter.js b/js/splinter.js
index d34271b..4597678 100644
--- a/js/splinter.js
+++ b/js/splinter.js
@@ -759,8 +759,18 @@ function start(xml) {
     if (!theReview)
         theReview = new Review.Review(thePatch);
 
+    if (theReview.intro)
+        $("#emptyCommentNotice").hide();
+
     $("#myComment")
         .val(theReview.intro)
+        .focus(function() {
+                   $("#emptyCommentNotice").hide();
+               })
+        .blur(function() {
+                  if ($(this).val().search(/\S/) < 0)
+                      $("#emptyCommentNotice").show();
+              })
         .keypress(function() {
                       queueSaveDraft();
                       queueUpdateHaveDraft();
diff --git a/web/index.html.body b/web/index.html.body
index 22d4f78..1469e3b 100644
--- a/web/index.html.body
+++ b/web/index.html.body
@@ -36,9 +36,9 @@
     Restored from draft; last edited <span id="restoredLastModified"></span>
   </div>
   <div>
-    <div>Overall Comment:</div>
-    <textarea id="myComment"></textarea>
-    <div>
+    <div id="myCommentFrame">
+      <textarea id="myComment"></textarea>
+      <div id="emptyCommentNotice">&lt;Overall Comment&gt;</div>
     </div>
     <div id="buttonBox">
       <span id="attachmentStatusSpan">Patch Status:
diff --git a/web/splinter.css b/web/splinter.css
index eff1d98..2823bbd 100644
--- a/web/splinter.css
+++ b/web/splinter.css
@@ -2,6 +2,10 @@ body {
     margin: 0px;
 }
 
+textarea:focus {
+    background: #f7f2d0;
+}
+
 #splinterHeaders {
     background: black;
     color: white;
@@ -157,11 +161,28 @@ body {
     margin-bottom: 0.5em;
 }
 
+#myCommentFrame {
+    margin-top: 0.25em;
+    position: relative;
+    border: 1px solid black;
+    padding-right: 8px; /* compensate for child's padding */
+}
+
 #myComment {
+    border: 0px solid black;
+    padding: 4px;
+    margin: 0px;
     width: 100%;
     height: 10em;
 }
 
+#emptyCommentNotice {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    color: #888888;
+}
+
 #buttonBox {
     float: right;
 }
@@ -296,6 +317,10 @@ body {
     border: 0px;
 }
 
+#commentEditor textarea:focus {
+    background: white;
+}
+
 #commentEditorLeftButtons {
     float: left;
 }