Bug 850135 - hide the textarea custom fields by default with an (edit) link

r=glob,a=LpSolit

3 files changed, 48 insertions, 10 deletions

diff --git a/js/field.js b/js/field.js
index c0d0aaa6e..900299ee0 100644
--- a/js/field.js
+++ b/js/field.js
@@ -214,14 +214,14 @@ function setupEditLink(id) {
 }
 
 /* Hide input/select fields and show the text with (edit) next to it */
-function hideEditableField( container, input, action, field_id, original_value, new_value ) {
+function hideEditableField( container, input, action, field_id, original_value, new_value, hide_input ) {
     YAHOO.util.Dom.removeClass(container, 'bz_default_hidden');
     YAHOO.util.Dom.addClass(input, 'bz_default_hidden');
     YAHOO.util.Event.addListener(action, 'click', showEditableField,
                                  new Array(container, input, field_id, new_value));
     if(field_id != ""){
         YAHOO.util.Event.addListener(window, 'load', checkForChangedFieldValues,
-                        new Array(container, input, field_id, original_value));
+                        new Array(container, input, field_id, original_value, hide_input ));
     }
 }
 
@@ -269,7 +269,7 @@ function showEditableField (e, ContainerInputArray) {
         }
         // focus on the first field, this makes it easier to edit
         inputs[0].focus();
-        if ( type == "input" ) {
+        if ( type == "input" || type == "textarea" ) {
             inputs[0].select();
         }
     }
@@ -293,8 +293,10 @@ function checkForChangedFieldValues(e, ContainerInputArray ) {
     var el = document.getElementById(ContainerInputArray[2]);
     var unhide = false;
     if ( el ) {
-        if ( el.value != ContainerInputArray[3] ||
-            ( el.value == "" && el.id != "alias" && el.id != 'qa_contact') ) {
+        if ( !ContainerInputArray[4]
+             && (el.value != ContainerInputArray[3]
+                 || (el.value == "" && el.id != "alias" && el.id != "qa_contact")) )
+        {
             unhide = true;
         }
         else {
@@ -303,7 +305,7 @@ function checkForChangedFieldValues(e, ContainerInputArray ) {
             if ( set_default ) {
                 if(set_default.checked){
                     unhide = true;
-                }              
+                }
             }
         }
     }
diff --git a/skins/standard/global.css b/skins/standard/global.css
index 3ca350dba..b1c9a7d07 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -520,8 +520,23 @@ input.required, select.required, span.required_explanation {
     list-style-type: none;
 }
 
+.field_textarea_readonly {
+    margin: 2px;
+    padding: 4px;
+    overflow: auto;
+    float: left;
+    max-width: 30em;
+    max-height: 7em;
+    border: 1px solid #CCC;
+}
+
+.field_textarea_readonly pre {
+    font-family: monospace;
+    white-space: pre-wrap;
+}
+
 /* custom styles for inline instances of autocomplete input fields */
-.yui-skin-sam .yui-ac-input { position:static !important; 
+.yui-skin-sam .yui-ac-input { position:static !important;
                               vertical-align:middle !important; }
 .yui-skin-sam .yui-ac-container { left:0px !important; }
 .yui-skin-sam .yui-ac { display: inline-block; }
diff --git a/template/en/default/bug/field.html.tmpl b/template/en/default/bug/field.html.tmpl
index a77f9087c..c086a04f7 100644
--- a/template/en/default/bug/field.html.tmpl
+++ b/template/en/default/bug/field.html.tmpl
@@ -142,9 +142,30 @@
         </script>
 
      [% CASE constants.FIELD_TYPE_TEXTAREA %]
-       [% INCLUDE global/textarea.html.tmpl
-           id = field.name name = field.name minrows = 4 maxrows = 8
-           cols = 60 defaultcontent = value mandatory = field.is_mandatory %]
+       <div id="[% field.name FILTER html %]_edit_container" class="bz_default_hidden">
+         <div>
+             (<a href="#" id="[% field.name FILTER html %]_edit_action">edit</a>)
+         </div>
+         [% IF value %]
+           <div class="field_textarea_readonly">
+             <pre>[% value FILTER html %]</pre>
+           </div>
+         [% END %]
+       </div>
+       <div id="[% field.name FILTER html %]_input">
+         [% INCLUDE global/textarea.html.tmpl
+            id = field.name name = field.name minrows = 4 maxrows = 8
+            cols = 60 defaultcontent = value mandatory = field.is_mandatory %]
+       </div>
+       <script type="text/javascript">
+         hideEditableField('[% field.name FILTER js %]_edit_container',
+                           '[% field.name FILTER js %]_input',
+                           '[% field.name FILTER js %]_edit_action',
+                           '[% field.name FILTER js %]',
+                           '[% value FILTER js %]',
+                           '',
+                           true);
+       </script>
      [% CASE constants.FIELD_TYPE_BUG_URLS %]
        [% '<ul class="bug_urls">' IF value.size %]
        [% FOREACH bug_url = value %]