SONAR-3242 improve rendering of review forms

* form replaces bottom bar of actions
* improve markdown help

19 files changed, 104 insertions, 89 deletions

diff --git a/sonar-markdown/src/main/java/org/sonar/markdown/HtmlMultilineCodeChannel.java b/sonar-markdown/src/main/java/org/sonar/markdown/HtmlMultilineCodeChannel.java
index f3a8b37d503..bff8bf9bc3f 100644
--- a/sonar-markdown/src/main/java/org/sonar/markdown/HtmlMultilineCodeChannel.java
+++ b/sonar-markdown/src/main/java/org/sonar/markdown/HtmlMultilineCodeChannel.java
@@ -38,6 +38,8 @@ import org.sonar.channel.RegexChannel;
  * will produce:
  * {@literal<pre>}{@literal<code>}This code
  * spans on 2 lines{@literal</code>}{@literal</pre>}
+ *
+ * @since 2.14
  */
 class HtmlMultilineCodeChannel extends RegexChannel<MarkdownOutput> {
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/controllers/markdown_controller.rb b/sonar-server/src/main/webapp/WEB-INF/app/controllers/markdown_controller.rb
index 540a9fb6690..4c4fbbc406c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/controllers/markdown_controller.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/controllers/markdown_controller.rb
@@ -21,7 +21,7 @@ class MarkdownController < ApplicationController
 
   SECTION=Navigation::SECTION_CONFIGURATION
   
-  def full_help
+  def help
   end
   
 end
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_help.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_help.html.erb
deleted file mode 100644
index ff1a65a5973..00000000000
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_help.html.erb
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="note" style="text-align: right; float: right;">
-  (<a onclick="window.open(this.href,'markdown','height=800,width=900,scrollbars=1,resizable=1');return false;" 
-     href="<%= url_for :controller => 'markdown', :action => 'full_help', :layout => 'false' -%>"><%= message('more') -%></a>)
-</div>
-<div style="min-width: 100px">
-<h3><%= message('help_tips') -%> </h3>
-<br/>
-<table>
-  <tr>
-    <td>*<%= message('bold') -%>*</td>
-    <td class="sep"></td>
-    <td><b><%= message('bold') -%></b></td>
-  </tr>
-  <tr>
-    <td>``<%= message('code') -%>``</td>
-    <td class="sep"></td>
-    <td><code><%= message('code') -%></code></td>
-  </tr>
-  <tr>
-    <td colspan="3">* <%= message('bulleted_point') -%></td>
-  </tr>
-</table>
-</div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_tips.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_tips.html.erb
new file mode 100644
index 00000000000..9ba279488f3
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/_tips.html.erb
@@ -0,0 +1,15 @@
+<div style="min-width: 100px">
+<h3><a onclick="window.open(this.href,'markdown','height=350,width=520,scrollbars=1,resizable=1');return false;"
+       href="<%= url_for :controller => 'markdown', :action => 'help', :layout => 'false' -%>"><%= message('help_tips') -%></a></h3>
+<table>
+  <tr>
+    <td>*<%= message('bold') -%>*</td>
+  </tr>
+  <tr>
+    <td>``<%= message('code') -%>``</td>
+  </tr>
+  <tr>
+    <td>* <%= message('bulleted_point') -%></td>
+  </tr>
+</table>
+</div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/full_help.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/full_help.html.erb
deleted file mode 100644
index 9b33bb2515e..00000000000
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/full_help.html.erb
+++ /dev/null
@@ -1,36 +0,0 @@
-<div id="markdown-full-help" style="width:500px">
-<h2>Markdown syntax</h2>
-
-<br/>
-
-<h3>Format text</h3>
-
-<pre class="code">
-*This text will be bold*
-</pre>
-
-<pre class="code">
-* Item 1
-* Item 2
-* Item 3
-</pre>
-
-<pre class="code">
-http://www.google.com is automatically transformed into a link.
-</pre>
-
-<h3>Code</h3>
-
-<pre class="code">
-Please check ``Lists#newArrayList()`` method.
-</pre>
-
-<pre class="code">
-``java
-public void foo() {
-  // do some logic here
-}
-``
-</pre>
-
-</div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb
new file mode 100644
index 00000000000..c71c74586cc
--- /dev/null
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/markdown/help.html.erb
@@ -0,0 +1,52 @@
+<div id="markdown-full-help" style="width:500px">
+  <h2 class="spacer-bottom">Markdown Syntax</h2>
+
+  <table class="width100 table table-bordered spacer-bottom">
+    <thead>
+    <tr>
+      <th>Write :</th>
+      <th>To display :</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr class="even">
+      <td>*this text is bold*</td>
+      <td><b>this text is bold</b></td>
+    </tr>
+    <tr class="odd">
+      <td>http://sonarsource.org</td>
+      <td><a href="http://sonarsource.org">http://sonarsource.org</a></td>
+    </tr>
+    <tr class="even">
+      <td valign="top">* bulleted point</td>
+      <td class="discussionComment">
+        <ul>
+          <li>bulleted point</li>
+        </ul>
+      </td>
+    </tr>
+    <tr class="odd">
+      <td valign="top">``Lists#newArrayList()``</td>
+      <td><code>Lists#newArrayList()</code></td>
+    </tr>
+    <tr class="even">
+      <td valign="top">
+        ``<br>
+        // code on multiple lines<br>
+        public void foo() {<br>
+        &nbsp;&nbsp;// do some logic here<br>
+        }<br>
+        ``
+      </td>
+      <td valign="top"><pre style="border: 1px dashed #DDD;padding: 5px;color: #444;font-size: 12px;">
+        <code>
+// code on multiple lines
+public void foo() {
+  // do some logic here
+}
+        </code>
+      </pre>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_assign_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_assign_form.html.erb
index efeca053752..67a66a1c78c 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_assign_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_assign_form.html.erb
@@ -13,7 +13,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_comment_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_comment_form.html.erb
index c470bfecc5a..aeafb78549d 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_comment_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/project_reviews/_comment_form.html.erb
@@ -14,7 +14,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_violation.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_violation.html.erb
index 7446f2edc44..4598ce3bec5 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_violation.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_violation.html.erb
@@ -51,14 +51,12 @@
 
     </div>
 
-    <div class="discussionComment first" id="vBody<%= violation.id -%>">
+    <div class="discussionComment first">
       <div id="vMsg<%= violation.id -%>">
         <%= violation.html_message || '&nbsp;' -%>
       </div>
     </div>
 
-    <div class="discussionComment" id="reviewForm<%= violation.id -%>" style="display:none"></div>
-
     <%
        if violation.review
          violation.review.comments.each_with_index do |review_comment, comment_index|
@@ -108,7 +106,7 @@
        end
     %>
     <% if current_user %>
-      <div class="vFooter">
+      <div class="vActions" id="vActions<%= violation.id -%>">
         <%= link_to_function message('reviews.comment'), "sCF(#{violation.id})", :name => 'bComment', :class => 'link-action spacer-right' -%>
 
         <% unless violation.review && violation.review.resolved? %>
@@ -122,8 +120,8 @@
 
         <% unless violation.switched_off? && violation.review && violation.review.resolved? %>
         <div class="dropdown">
-          <a href="#" class="link-action link-more" onclick="$('vActions<%= violation.id -%>').toggle();return false;"><%= message('more_actions') -%></a>
-          <ul style="display: none" class="dropdown-menu" id="vActions<%= violation.id -%>" onmouseout="this.hide();" onmouseover="this.show();">
+          <a href="#" class="link-action link-more" onclick="$('more<%= violation.id -%>').toggle();return false;"><%= message('more_actions') -%></a>
+          <ul style="display: none" class="dropdown-menu" id="more<%= violation.id -%>" onmouseout="this.hide();" onmouseover="this.show();">
             <% if !violation.switched_off? %>
               <li><%= link_to_function (violation.review && violation.review.resolved? ? message('reviews.reopen') : message('reviews.resolved')),
                                        "sCStF(#{violation.id})", :name => (violation.review && violation.review.resolved? ? 'bReopen' : 'bResolved') -%></li>
@@ -137,6 +135,7 @@
         <% end %>
       </div>
     <% end %>
+    <div class="discussionComment" id="reviewForm<%= violation.id -%>" style="display:none"></div>
   </div>
 
 </div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_action_plan_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_action_plan_form.html.erb
index 40b778a5859..511c9cbc207 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_action_plan_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_action_plan_form.html.erb
@@ -23,7 +23,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_assign_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_assign_form.html.erb
index 60fcd8ffce6..15bbd704747 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_assign_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_assign_form.html.erb
@@ -13,7 +13,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_severity_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_severity_form.html.erb
index 849abb413d6..fc45d84af21 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_severity_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_severity_form.html.erb
@@ -15,7 +15,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_status_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_status_form.html.erb
index 745956c18cb..79359eeedea 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_status_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_change_status_form.html.erb
@@ -9,7 +9,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_comment_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_comment_form.html.erb
index 0f53ad9846d..51ac1848fba 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_comment_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_comment_form.html.erb
@@ -15,7 +15,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_false_positive_form.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_false_positive_form.html.erb
index 2cebbd3ffad..5d9e06f03da 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_false_positive_form.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/reviews/_violation_false_positive_form.html.erb
@@ -19,7 +19,7 @@
       </td>
       <td class="sep"></td>
       <td style="vertical-align:top;width: 90px">
-        <%= render :partial => 'markdown/help' -%>
+        <%= render :partial => 'markdown/tips' -%>
       </td>
     </tr>
   </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
index 79370fd0b10..de2963c8799 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_active_rule_note.html.erb
@@ -46,7 +46,7 @@
                     onkeyup="if (this.value=='') $('<%= submit_active_note_update_button_id -%>').disabled=true; else $('<%= submit_active_note_update_button_id -%>').disabled=false;"><%= h(note.plain_text) if note -%></textarea>
         </td>
         <td class="markdown-help">
-          <%= render :partial => 'markdown/help' -%>
+          <%= render :partial => 'markdown/tips' -%>
         </td>
       </tr>
     <tr>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
index 672b88d5fbf..e8ae9b7b3d1 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/rules_configuration/_rule_note.html.erb
@@ -40,7 +40,7 @@
           <textarea name="text" id="<%= note_textarea_id -%>" rows="10" style="width:100%"><%= h(note.plain_text) if note -%></textarea>
         </td>
         <td class="markdown-help nowrap">
-          <%= render :partial => 'markdown/help' -%>
+          <%= render :partial => 'markdown/tips' -%>
         </td>
       </tr>
     <tr>
diff --git a/sonar-server/src/main/webapp/javascripts/resource.js b/sonar-server/src/main/webapp/javascripts/resource.js
index e5d3acaba0a..1223897743a 100644
--- a/sonar-server/src/main/webapp/javascripts/resource.js
+++ b/sonar-server/src/main/webapp/javascripts/resource.js
@@ -33,7 +33,7 @@ function cancelViolationAction(violation_id) {
 }
 
 function hideMoreViolationActions(violation_id) {
-  var popup = $('vActions' + violation_id);
+  var popup = $('more' + violation_id);
   if (popup != null) {
     popup.hide();
   }
@@ -48,7 +48,7 @@ function sCF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('commentText' + violation_id).focus();
         }
@@ -65,7 +65,7 @@ function sCSF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('selectSeverity' + violation_id).focus();
         }
@@ -82,7 +82,7 @@ function sCStF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('commentText' + violation_id).focus();
         }
@@ -99,7 +99,7 @@ function sFPF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('commentText' + violation_id).focus();
         }
@@ -116,7 +116,7 @@ function sAF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('assignee_login').focus();
         }
@@ -133,7 +133,7 @@ function sAPF(violation_id) {
         asynchronous:true,
         evalScripts:true,
         onComplete:function (request) {
-          $('vBody' + violation_id).remove();
+          $('vActions' + violation_id).remove();
           $('reviewForm' + violation_id).show();
           $('action_plan').focus();
         }
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index d85f39419e9..ec4912a167c 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -886,7 +886,7 @@ div.vtitle img {
   vertical-align: text-bottom;
 }
 
-div.vFooter {
+div.vActions {
   padding: 5px 10px;
   border-top: 1px solid #DDD;
   background-color: #EFEFEF;
@@ -1142,7 +1142,7 @@ table.reviewDetails td img {
   vertical-align: bottom;
 }
 
-div.discussion {
+.discussion {
   width: 100%;
   border: 1px solid #DDDDDD;
 }
@@ -1151,7 +1151,7 @@ div.discussion {
   border-top: none;
 }
 
-div.discussionComment {
+.discussionComment {
   background-color: #EFEFEF;
   border-top: 1px solid #DDDDDD;
   line-height: 1.5em;
@@ -1159,18 +1159,24 @@ div.discussionComment {
   padding: 5px 10px;
 }
 
-div.discussionComment h4 {
+.discussionComment h4 {
   font-size: 90%;
   margin-bottom: 2px;
 }
 
-div.discussionComment h4 img {
+.discussionComment h4 img {
   vertical-align: sub;
 }
 
-div.discussionComment li {
+.discussionComment li {
   list-style: square inside;
 }
+.discussionComment pre {
+  padding: 10px;
+  border: 1px dashed #DDD;
+  color: #444;
+  font-size: 12px;
+}
 
 div.comment-excerpt {
   background-color: transparent;