Improve rendering of duplications tab and add support for IE6

5 files changed, 124 insertions, 128 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/controllers/resource_controller.rb b/sonar-server/src/main/webapp/WEB-INF/app/controllers/resource_controller.rb
index 339c1dd4daa..339b8a0854b 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/controllers/resource_controller.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/controllers/resource_controller.rb
@@ -61,7 +61,7 @@ class ResourceController < ApplicationController
       original_resource = Project.by_key(params[:original_resource_id])
       render :partial => 'duplications_source_snippet', 
              :locals => {:resource => resource, :original_resource => original_resource, :from_line => params[:from_line].to_i, :to_line => params[:to_line].to_i, :lines_count => params[:lines_count].to_i, 
-                         :source_div => params[:source_div], :external => resource.root_id != original_resource.root_id}
+                         :group_index => params[:group_index], :external => (resource.root_id != original_resource.root_id)}
     else
       access_denied
     end
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications.html.erb
index a7233f8b48e..7a37dca2c0d 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications.html.erb
@@ -4,7 +4,7 @@
 
 <% else %>
 
-  <table id="duplicationsTable" class="data max-width">
+  <table id="duplications" class="data">
     <thead>
       <tr>
         <th class="thin nowrap"><%= message('duplications.blocks') -%></th>
@@ -12,85 +12,75 @@
         <th class="thin nowrap"><%= message('duplications.from_line') -%></th>
         <th class="thin nowrap"><%= message('duplications.file') -%></th>
         <th><%= message('duplications.details') -%></th>
-        <th class="thin nowrap"></th>
       </tr>
     </thead>
-    
+
     <tbody>
-    <% 
+    <%
       @duplication_groups.each_with_index do |group, group_index|
-        group_size = group.size()
-        row_style = cycle 'even','odd', :name => ('duplications')
     %>
-      <tr class="<%= row_style -%>">
-        <td rowspan="<%= group_size+2 -%>" class="center">
-          <br/><b><%= group_size -%></b>
-        </td>
-        <td colspan="4" style="height:2px"></td>
-        <td rowspan="<%= group_size+2 -%>"></td>
+      <tr>
+        <td colspan="5" style="height: 10px"> </td>
       </tr>
-    <%
-        group.each_with_index do |dup, index|
-          resource = dup[:resource]
-          external = resource.root_id != @resource.root_id
-          lines_count = dup[:lines_count].to_i
-          from_line = dup[:from_line].to_i
-          to_line = from_line + (lines_count > 5 ? 5 : lines_count)
-          group_class = "group#{group_index}"
-          group_row_class = "row#{group_index}-#{index}"
-          source_div = "source-#{group_index}"
-          update_snippet_script = "updateDuplicationLines('#{url_for :action => :show_duplication_snippet, :params => {:id => resource.id, :original_resource_id => @resource.id, :from_line => from_line, :lines_count => lines_count, :source_div => source_div}}','#{group_class}', '#{group_row_class}', '#{source_div}', #{lines_count}, #{from_line}, #{to_line});"
-    %>
-      <tr class="hoverable <%= row_style -%>">        
-        <td class="center group-item">
-          <div class="<%= group_class -%> <%= group_row_class -%> clickable <%= 'selected' if index==0 -%>" 
-               onclick="<%= update_snippet_script -%>" style="border-right-width: 0px; margin-left: 2px;">
-          <%= lines_count -%>
-          <div>
+      <tr id="duplGroup_<%= group_index -%>">
+        <td class="item">
+          <p><b><%=  group.size() -%></b></p>
         </td>
-        <td class="center group-item">
-          <div class="<%= group_class -%> <%= group_row_class -%> clickable <%= 'selected' if index==0 -%>" 
-               onclick="<%= update_snippet_script -%>" style="border-right-width: 0px;border-left-width: 0px;">
-            <%= from_line -%>
-          </div>
+
+        <td class="item">
+          <% group.each_with_index do |dup, index| %>
+            <p id="duplCount-<%= group_index -%>-<%= index -%>" class="<%= 'selected' if index==0 -%>"><%= dup[:lines_count].to_i -%></p>
+          <% end %>
+        </td>
+
+        <td class="item">
+          <% group.each_with_index do |dup, index| %>
+            <p id="duplFrom-<%= group_index -%>-<%= index -%>" class="<%= 'selected' if index==0 -%>"><%= dup[:from_line].to_i -%></p>
+          <% end %>
         </td>
-        <td class="left group-item">
-          <% if resource==@resource
-               cell_content = resource.name
-             else
-               cell_content = link_to_resource(resource, resource.name, {:line => from_line})
-             end
+
+        <td class="fileItem">
+          <% group.each_with_index do |dup, index|
+            resource = dup[:resource]
+            external = resource.root_id != @resource.root_id
+            lines_count = dup[:lines_count].to_i
+            from_line = dup[:from_line].to_i
+            to_line = from_line + (lines_count > 5 ? 5 : lines_count)
+            lines_count = dup[:lines_count].to_i
+            update_snippet_script = "updateDuplicationLines('#{url_for :action => :show_duplication_snippet, :params => {:id => resource.id, :original_resource_id => @resource.id}}',#{group_index}, #{index}, #{lines_count}, #{from_line}, #{to_line});"
           %>
-          <div class="<%= group_class -%> <%= group_row_class -%> clickable nowrap <%= 'selected' if index==0 -%>" 
-               onclick="<%= update_snippet_script -%>" style="padding-right: 20px; border-right-width: 0px;border-left-width: 0px;">
-            <%= cell_content -%>
-            <% if external %>
-              <%= image_tag "links/external.png" -%>
-            <% end %>
-          </div>
+            <p id="duplName-<%= group_index -%>-<%= index -%>" class="<%= 'selected' if index==0 -%>">
+              <a href="#" onclick="<%= update_snippet_script -%>"><%= resource.name -%></a>
+              <%= image_tag "links/external.png" if external -%>
+            </p>
+          <% end %>
+
         </td>
-        
-        <% if index==0 %>
-        <td rowspan="<%= group_size+1 -%>" class="source-snippet">
-          <div id="<%= source_div -%>">
-            <%= render :partial => 'duplications_source_snippet', :locals => {:resource => resource, :original_resource => @resource, :from_line => from_line, :to_line => to_line, :lines_count => lines_count, :source_div => source_div, :external => external} -%>
+
+        <td class="sourceItem">
+          <%
+            duplication = group[0]
+            resource = duplication[:resource]
+            from_line = duplication[:from_line].to_i
+            lines_count = duplication[:lines_count].to_i
+            external = resource.root_id != @resource.root_id
+            to_line = from_line + (lines_count > 5 ? 5 : lines_count)
+          %>
+          <div id="source-<%= group_index -%>">
+            <%= render :partial => 'duplications_source_snippet', :locals => {:resource => resource, :original_resource => @resource, :from_line => from_line, :to_line => to_line, :lines_count => lines_count, :external => external, :group_index => group_index} -%>
           </div>
         </td>
-        <% end %>
-      </tr>
-    <% 
-        end
-    %>
-      <tr class="<%= row_style -%>" style="padding-bottom:100px">
-        <td colspan="3"></td>
       </tr>
-      <tr class="<%= row_style -%>">
-        <td colspan="6" style="height:4px"></td>
+
+
+      <tr>
+        <td colspan="5" style="border-bottom: 1px solid #DDD;height: 10px"></td>
       </tr>
     <%
-      end 
+        end
     %>
     </tbody>
-  </table>  
+
+  </table>
 
 <% end %>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications_source_snippet.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications_source_snippet.html.erb
index 511cc1c1f3c..eb3d0cc4b89 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications_source_snippet.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/resource/_duplications_source_snippet.html.erb
@@ -1,22 +1,30 @@
 <div class="<%= 'expanded' if to_line == from_line + lines_count -%>">
-  <div style="line-height:20px; margin-left:24px;">
-    <% 
-      if external 
-        parent_project = resource.project 
+    <%
+      if external
+        parent_project = resource.project
     %>
-      <%= link_to_resource(parent_project, parent_project.path_name, {:dashboard => true}) -%>
-      <%= image_tag "links/external.png" -%>
-      <br/>
-    <% 
-      end 
+      <p>
+        <%= qualifier_icon(parent_project) -%>
+        <%= link_to_resource(parent_project, parent_project.path_name, {:dashboard => true}) -%>
+        &nbsp;&nbsp;
+        <%= qualifier_icon(resource) -%>
+        <%= link_to_resource(resource, resource.name(true), {:line => from_line}) -%>
+        <span id="duplLoading-<%= group_index -%>"></span>
+      </p>
+    <%
+      else
     %>
-    <b><%= resource.name(true) -%></b>
-  </div>
-  
+     <p>
+       <%= qualifier_icon(resource) -%>
+       <%= link_to_resource(resource, resource.name(true), {:line => from_line}) -%>
+       <span id="duplLoading-<%= group_index -%>"></span>
+     </p>
+    <% end %>
+
   <%= snapshot_source_to_html(resource.last_snapshot, {:line_range => (from_line)..(to_line)}) -%>
   
   <% if lines_count > 5 %>
-  <div class="small" style="line-height:20px; margin-left:24px;">
+  <p class="small">
     <% 
       if to_line < from_line + lines_count
         link_text =  message('duplications.expand')
@@ -25,12 +33,12 @@
         link_text =  message('duplications.collapse')
         to_line = from_line + 5
       end 
-    %> 
+    %>
     <%= link_to_remote link_text, 
-                       :url => {:action => :show_duplication_snippet, :params => {:id => resource.id, :original_resource_id => original_resource.id, :from_line => from_line, :to_line => to_line, :lines_count => lines_count, :source_div => source_div}},
-                       :update => source_div,
-                       :before => "$('#{source_div}').addClassName('loading');",
-                       :complete => "$('#{source_div}').removeClassName('loading');" -%>
-  </div>
+                       :url => {:action => :show_duplication_snippet, :params => {:id => resource.id, :original_resource_id => original_resource.id, :from_line => from_line, :to_line => to_line, :lines_count => lines_count, :group_index => group_index}},
+                       :update => "source-#{group_index}",
+                       :before => "$('expanding-#{group_index}').addClassName('loading')" -%>
+    <span id="expanding-<%= group_index -%>"></span>
+  </p>
   <% end %>
 </div>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/javascripts/duplications.js b/sonar-server/src/main/webapp/javascripts/duplications.js
index 642ca55f5d4..94f122f2fd7 100644
--- a/sonar-server/src/main/webapp/javascripts/duplications.js
+++ b/sonar-server/src/main/webapp/javascripts/duplications.js
@@ -1,25 +1,16 @@
 // JS scripts used in the duplication tab of the resource viewer
 
-function updateDuplicationLines(url, groupClass, groupRowClass, sourceDivId, linesCount, fromLine, toLine) {
-  // handle first the style of the selectable rows
-  divs = $$('.'+groupClass);
-  for ( i = 0; i < divs.size(); i++) {
-	  divs[i].removeClassName('selected');
-  }
-  divs = $$('.'+groupRowClass);
-  for ( i = 0; i < divs.size(); i++) {
-	  divs[i].addClassName('selected');
-  }
-  
-  // then show that a request is pending
-  $(sourceDivId).addClassName('loading');
-  
-  // and send the Ajax request
-  if ($(sourceDivId).childElements()[0].hasClassName('expanded')) {
-	toLine = fromLine + linesCount;
+function updateDuplicationLines(url, groupId, itemId, linesCount, fromLine, toLine) {
+  $$('#duplGroup_' + groupId + ' p.selected').invoke('removeClassName', 'selected');
+  $('duplCount-' + groupId + '-' + itemId).addClassName('selected');
+  $('duplFrom-' + groupId + '-' + itemId).addClassName('selected');
+  $('duplName-' + groupId + '-' + itemId).addClassName('selected');
+  $('duplLoading-' + groupId).addClassName('loading');
+
+  if ($('source-' + groupId).childElements()[0].hasClassName('expanded')) {
+	  toLine = fromLine + linesCount;
   }
   
-  new Ajax.Updater(sourceDivId, url + "&to_line=" + toLine, {asynchronous:true, evalScripts:true, onComplete:function(request){$(sourceDivId).removeClassName('loading');}});
-  
+  new Ajax.Updater('source-' + groupId, url + "&to_line=" + toLine + "&from_line=" + fromLine + "&lines_count=" + linesCount + "&group_index=" + groupId, {asynchronous:true, evalScripts:true});
   return false;
 }
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 598a30fc699..c7cf810ded2 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -724,6 +724,7 @@ ul.operations li img {
   border-top: 1px solid #DDD;
   border-bottom: 1px solid #DDD;
   margin: 0;
+  background-color: #FFF;
 }
 .sources2 td.lid {
   background-color: #ECECEC;
@@ -928,40 +929,46 @@ span.rulename a:hover {
 
 /* DUPLICATIONS */
 
-#duplicationsTable > tbody > tr {
-  padding-top: 2px;
+#duplications {
+  max-width: 100%;
 }
-
-#duplicationsTable td.group-item {
-  padding: 0px;
-  height: 1px;
+#duplications td.item {
+  text-align: right;
+  vertical-align: top;
+  padding: 0;
 }
-
-#duplicationsTable td.group-item > div {
-  padding: 3px;
-  margin: 2px 0px;
+#duplications td.item p {
+  padding: 3px 10px;
 }
 
-#duplicationsTable td.group-item > div.selected {
-  background-color: #fff;
-  border: 1px solid #DDDDDD;
+#duplications td.fileItem {
+  text-align: left;
+  vertical-align: top;
+  padding: 0;
+  white-space: nowrap;
 }
-
-#duplicationsTable td.source-snippet {
-  background-color: #ddd;
-  border: 1px solid #DDDDDD;
-  padding: 0px;
+#duplications td.fileItem p {
+  padding: 3px 10px;
 }
-
-#duplicationsTable td.source-snippet > div {
-  padding: 2px;
-  background-color: #fff;
+#duplications td.item p.selected, #duplications td.fileItem p.selected {
+  background-color: #EFEFEF;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  padding: 3px 10px;
 }
-
-.clickable {
-  cursor: pointer;
+#duplications td.fileItem p.selected a {
+  text-decoration: none;
 }
 
+#duplications td.sourceItem {
+  padding: 0 10px;
+  background-color: #EFEFEF;
+  border: 1px solid #DDD;
+  border-left: none;
+}
+#duplications td.sourceItem p {
+  padding: 3px;
+}
 
 
 /* REVIEWS */