SONAR-2218 improve CSS

13 files changed, 348 insertions, 357 deletions

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/controllers/browse_controller.rb b/sonar-server/src/main/webapp/WEB-INF/app/controllers/browse_controller.rb
index 9ad42255695..18809ca4221 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/controllers/browse_controller.rb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/controllers/browse_controller.rb
@@ -78,9 +78,8 @@ class BrowseController < ApplicationController
     @display_scm=(params[:scm]=='true')
     @expanded=(params[:expand]=='true')
 
-    @source = @snapshot.source
-    if @source
-      source_lines=Java::OrgSonarServerUi::JRubyFacade.new.colorizeCode(@source.data, @snapshot.project.language).split("\n")
+    if @snapshot.source
+      source_lines=Java::OrgSonarServerUi::JRubyFacade.new.colorizeCode(@snapshot.source.data, @snapshot.project.language).split("\n")
       init_scm((@period && use_scm_for_periods) || @display_scm)
 
       @lines=[]
@@ -94,7 +93,7 @@ class BrowseController < ApplicationController
         date_string=@dates_by_line[index+1]
         line.datetime=(date_string ? DateTime::strptime(date_string): nil)
       end
-     end
+    end
   end
 
   def init_scm(scm)
@@ -179,14 +178,14 @@ class BrowseController < ApplicationController
 
     RuleFailure.find(:all, :include => 'rule', :conditions => [conditions] + values, :order => 'failure_level DESC').each do |violation|
       # sorted by severity => from blocker to info
-      if violation.line && violation.line>0
+      if violation.line && violation.line>0 && @lines
         @lines[violation.line-1].add_violation(violation)
       else
         @global_violations<<violation
       end
     end
 
-    unless @expanded
+    if !@expanded && @lines
       @lines.each_with_index do |line,index|
         if line.violations?
           for i in index-4..index+4
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_coverage.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_coverage.html.erb
index 823295ed955..7590306ac0f 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_coverage.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_coverage.html.erb
@@ -1,5 +1,4 @@
 <div id="coverage_header" class="tab_header">
-  <%= render :partial => 'options' -%>
   <table class="col">
     <tr>
       <td class="big"><%= format_measure('coverage', :default => '-') -%></td>
@@ -36,6 +35,7 @@
     <% end %>
   </table>
 
+  <%= render :partial => 'options' -%>
   <div class="clear"></div>
 </div>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_source.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_source.html.erb
index 4bcc974e130..2a4d1851f78 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_source.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_source.html.erb
@@ -1,142 +1,139 @@
 <div id="source_header" class="tab_header">
-
-  <%= render :partial => 'options' -%>
-  
   <table class="col">
-      <% if m=measure('lines') %>
+    <% if m=measure('lines') %>
       <tr>
-        <td class="name">Lines: </td>
+        <td class="name">Lines:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('ncloc') %>
+    <% end %>
+    <% if m=measure('ncloc') %>
       <tr>
-        <td class="name">Lines of code: </td>
+        <td class="name">Lines of code:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('functions') %>
+    <% end %>
+    <% if m=measure('functions') %>
       <tr>
-        <td class="name">Methods: </td>
+        <td class="name">Methods:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('accessors') %>
+    <% end %>
+    <% if m=measure('accessors') %>
       <tr>
-        <td class="name">Accessors: </td>
+        <td class="name">Accessors:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('paragraphs') %>
+    <% end %>
+    <% if m=measure('paragraphs') %>
       <tr>
-        <td class="name">Paragraphs: </td>
+        <td class="name">Paragraphs:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-    </table>
+    <% end %>
+  </table>
 
   <table class="col">
-     <% if m=measure('statements') %>
+    <% if m=measure('statements') %>
       <tr>
-        <td class="name">Statements: </td>
+        <td class="name">Statements:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('complexity') %>
+    <% end %>
+    <% if m=measure('complexity') %>
       <tr>
-        <td class="name">Complexity: </td>
+        <td class="name">Complexity:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('function_complexity') %>
+    <% end %>
+    <% if m=measure('function_complexity') %>
       <tr>
-        <td class="name">Complexity/method: </td>
+        <td class="name">Complexity/method:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('paragraph_complexity') %>
+    <% end %>
+    <% if m=measure('paragraph_complexity') %>
       <tr>
-        <td class="name">Complexity/paragraph: </td>
+        <td class="name">Complexity/paragraph:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-    </table>
-  
+    <% end %>
+  </table>
+
   <table class="col">
-     <% if m=measure('comment_lines_density') %>
+    <% if m=measure('comment_lines_density') %>
       <tr>
-        <td class="name">Comments: </td>
+        <td class="name">Comments:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('comment_lines') %>
+    <% end %>
+    <% if m=measure('comment_lines') %>
       <tr>
-        <td class="name">Comment lines: </td>
+        <td class="name">Comment lines:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('commented_out_code_lines') %>
+    <% end %>
+    <% if m=measure('commented_out_code_lines') %>
       <tr>
-        <td class="name">Commented-out LOC: </td>
+        <td class="name">Commented-out LOC:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('comment_blank_lines') %>
+    <% end %>
+    <% if m=measure('comment_blank_lines') %>
       <tr>
-        <td class="name">Blank comments: </td>
+        <td class="name">Blank comments:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-    </table>
+    <% end %>
+  </table>
 
   <table class="col">
-     <% if m=measure('public_documented_api_density') %>
+    <% if m=measure('public_documented_api_density') %>
       <tr>
-        <td class="name">Public documented API: </td>
+        <td class="name">Public documented API:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('public_undocumented_api') %>
+    <% end %>
+    <% if m=measure('public_undocumented_api') %>
       <tr>
-        <td class="name">Public undocumented API: </td>
+        <td class="name">Public undocumented API:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('public_api') %>
+    <% end %>
+    <% if m=measure('public_api') %>
       <tr>
-        <td class="name">Public API: </td>
+        <td class="name">Public API:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-    </table>
+    <% end %>
+  </table>
 
   <table class="col">
-     <% if m=measure('classes') %>
+    <% if m=measure('classes') %>
       <tr>
-        <td class="name">Classes: </td>
+        <td class="name">Classes:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('noc') %>
+    <% end %>
+    <% if m=measure('noc') %>
       <tr>
-        <td class="name">Number of Children: </td>
+        <td class="name">Number of Children:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('dit') %>
+    <% end %>
+    <% if m=measure('dit') %>
       <tr>
-        <td class="name">Depth in Tree: </td>
+        <td class="name">Depth in Tree:</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-      <% if m=measure('rfc') %>
+    <% end %>
+    <% if m=measure('rfc') %>
       <tr>
-        <td class="name">Response for Class (RFC): </td>
+        <td class="name">Response for Class (RFC):</td>
         <td class="value"><%= format_measure(m) -%></td>
       </tr>
-      <% end %>
-    </table>
-  
-  <div class="clear"></div>
+    <% end %>
+  </table>
+
+  <%= render :partial => 'options' -%>
 </div>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_violations.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_violations.html.erb
index b3d9872885d..797f6457311 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_violations.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_header_violations.html.erb
@@ -1,42 +1,40 @@
 <div id="violations_header" class="tab_header">
 
-  <%= render :partial => 'options' -%>
-
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><span class="big"><%= format_measure('violations', :default => '-') -%></span> violations</td>
     </tr>
   </table>
 
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><%= image_tag 'priority/BLOCKER.png' -%></td>
       <td class="name">Blocker:</td>
       <td class="value"><%= format_measure('blocker_violations', :default => 0) -%></td>
     </tr>
   </table>
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><%= image_tag 'priority/CRITICAL.png' -%></td>
       <td class="name">Critical:</td>
       <td class="value"><%= format_measure('critical_violations', :default => 0) -%></td>
     </tr>
   </table>
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><%= image_tag 'priority/MAJOR.png' -%></td>
       <td class="name">Major:</td>
       <td class="value"><%= format_measure('major_violations', :default => 0) -%></td>
     </tr>
   </table>
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><%= image_tag 'priority/MINOR.png' -%></td>
       <td class="name">Minor:</td>
       <td class="value"><%= format_measure('minor_violations', :default => 0) -%></td>
     </tr>
   </table>
-  <table class="col">
+  <table class="bottomcol">
     <tr>
       <td><%= image_tag 'priority/INFO.png' -%></td>
       <td class="name">Info:</td>
@@ -44,6 +42,7 @@
     </tr>
   </table>
 
+  <%= render :partial => 'options' -%>
   <div class="clear"></div>
 </div>
 
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_options.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_options.html.erb
index 030231d8570..db84ebf798a 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_options.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_options.html.erb
@@ -17,29 +17,44 @@
     <input type="hidden" name="metric" value="<%= params[:metric] -%>"/>
     <input type="hidden" name="period" value="<%= params[:period] -%>"/>
 
-    <% if @scm_available %>
-      <input type="checkbox" value="true" name="scm" id="scm" <%= 'checked' if @display_scm -%> onclick="applyOptions()"/>
-      <label for="scm">Show commits</label><br/>
-    <% end %>
+    <table>
+      <tr>
+        <% first=true %>
+      <% if @scm_available %>
+        <td class="<%= 'first' if first -%>">
+          <input type="checkbox" value="true" name="scm" id="scm" <%= 'checked' if @display_scm -%> onclick="applyOptions()"/>
+          <label for="scm">Show commits</label>
+        </td>
+      <%   first=false
+         end %>
 
-    <% if @snapshot.project_snapshot.periods? %>
-      <select id="period" name="period" class="small" onchange="applyOptions()">
-        <option value="">Time changes...</option>
-        <%= period_select_options(@snapshot, 1) -%>
-        <%= period_select_options(@snapshot, 2) -%>
-        <%= period_select_options(@snapshot, 3) -%>
-        <%= period_select_options(@snapshot, 4) -%>
-        <%= period_select_options(@snapshot, 5) -%>
-      </select>
-      <br/>
-    <% end %>
+      <% if @expandable %>
+        <td class="<%= 'first' if first -%>">
+          <input type="checkbox" value="true" name="expand" id="expand" <%= 'checked' if @expanded -%> onclick="applyOptions()"/>
+          <label for="expand">Show full source</label>
+        </td>
+      <%   first=false
+         end %>
+      
+      <% if @snapshot.project_snapshot.periods? %>
+        <td class="<%= 'first' if first -%>">
+          <select id="period" name="period" onchange="applyOptions()">
+            <option value="">Time changes...</option>
+            <%= period_select_options(@snapshot, 1) -%>
+            <%= period_select_options(@snapshot, 2) -%>
+            <%= period_select_options(@snapshot, 3) -%>
+            <%= period_select_options(@snapshot, 4) -%>
+            <%= period_select_options(@snapshot, 5) -%>
+          </select>
+        </td>
+      <%
+           first=false
+         end %>
 
-    <% if @expandable %>
-      <input type="checkbox" value="true" name="expand" id="expand" <%= 'checked' if @expanded -%> onclick="applyOptions()"/>
-      <label for="expand">Expand</label>
-      <br/>
-    <% end %>
-
-    <%= render :partial => 'rules_filter' if @display_violations -%>
+      <% if @display_violations %>
+        <td class="<%= 'first' if first -%>"><%= render :partial => 'rules_filter' -%></td>
+      <% end %>
+      </tr>
+    </table>
   </form>
 </div>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_rules_filter.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_rules_filter.html.erb
index 8741fa98190..900711898b0 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_rules_filter.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_rules_filter.html.erb
@@ -18,7 +18,7 @@
      rule_options<<["#{h rule.name} (#{rule_counts[rule.id]})", rule.id]
    end
 %>
-<select id="rule" name="rule" class="small" onchange="applyOptions()">
+<select id="rule" name="rule" onchange="applyOptions()">
   <option value="">No filters</option>
   <optgroup label="Severity">
     <% if blocker_violations && blocker_violations.value>0 %>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_tabs.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_tabs.html.erb
index 576ded540dd..8627dc49ca7 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_tabs.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/_tabs.html.erb
@@ -1,159 +1,5 @@
 <style>
-#source_metrics {
-  width: 100%;
-}
-#source_metrics {
-  width: 100%;
-}
-.sources2 {
-  width: 100%;
-  border-top: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-  margin: 0;
-}
-.sources2 td.lid {
-  background-color: #ECECEC;
-  border-right: 1px solid #DDDDDD;
-  border-left: 1px solid #DDDDDD;
-  text-align: right;
-  padding: 2px 0.5em 0 0.5em;
-  vertical-align: top;
-  font-size: 11px;
-}
-.sources2 td.lid a {
-  text-decoration: none;
-  color: #AAA;
-}
-.sources2 td.scm {
-  border-right: 1px solid #DDD;
-  border-left: 1px solid #DDD;
-  background-color: #ECECEC;
-}
-.sources2 td.revision {
-  border-top: 1px solid #DDD;
-  vertical-align: top;
-  padding: 2px 0.3em;
-  white-space: nowrap;
-}
-.sources2 span.date, .sources2 span.date a {
-  color: #AAA;
-  font-size: 11px;
-  text-decoration: none;
-}
-.sources2 span.author, .sources2 span.author a {
-  font-size: 11px;
-}
-.sources2 td.rule {
-  padding: 1px 0.5em;
-  border-left: 1px solid #DDDDDD;
-}
-.sources2 td.violations {
-  background-color: #ECECEC;
-  min-width: 450px;
-}
-span.rulename, span.rulename a {
-  color: #4183C4;
-  text-decoration: none;
-}
-span.violation_date {
-  color: #AAA;
-  font-size: 11px;
-}
-span.rulename a:hover {
-  text-decoration: underline;
-}
-.sources2 td.violations img {
-  vertical-align: sub;
-}
-.sources2 td.line {
-  padding-left: 1em;
-  width: 100%;
-  white-space: pre;
-  font-size: 12px;
-  font-family: monospace;
-  border-right: 1px solid #DDD;
-}
-.sources2 td.section {
-  border-top: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-}
-.sources2 td.ind {
-  border-right: 1px solid #DDD;
-  min-width: 1.5em;
-  padding: 0 0.3em;
-  text-align: center;
-  vertical-align: middle;
-}
-.sources2 td.ok {
-  background-color: #ACE97C;
-  border-top: 1px solid #6EC563;
-  border-bottom: 1px solid #6EC563;
-}
-.sources2 td.sev0, .sources2 td.sev1, .sources2 td.warn {
-  /* info, minor */
-  background-color: #FFF6BF;
-  border-top: 1px solid #FFD324;
-  border-bottom: 1px solid #FFD324;
-}
-.sources2 td.sev2, .sources2 td.sev3, .sources2 td.sev4, .sources2 td.ko {
-  /* major, critical, blocker */
-  background-color: #FF9090;
-  border-top: 1px solid #FF5252;
-  border-bottom: 1px solid #FF5252;
-}
-.sources2 td.new_section {
-  border-top: 1px solid #DDD;
-  border-bottom: 1px solid #DDD;
-  height: 40px;
-}
-#source_title {
-  padding: 10px 0;
-}
-#source_title span.h1 {
-  font-size: 16px;
-  margin-right: 10px;
-}
-.source_links {
-  font-size: 11px;
-}
-#global_violations {
-  width: 100%;
-  border: 1px solid #DDD;
-  margin-bottom: 10px;
-}
-#global_violations td {
-  background-color: #ECECEC;
-  padding: 3px 0.5em;
-}
-#global_violations td img, #source_title img {
-  vertical-align: sub;
-}
-.tab_header {
-  border: 1px solid #DDD;
-  border-top-width: 0;
-  background-color: #ECECEC;
-  padding: 5px 10px;
-  margin-bottom: 10px;
-  color: #555555;
-}
 
-.tab_header table.col {
-  margin-right: 30px;
-  float: left;
-}
-.tab_header td {
-  padding-right: 7px;
-}
-.tab_header td.name {
-  font-weight: bold;
-  text-align: left;
-}
-.tab_header td.value {
-  text-align: right;
-}
-#source_options {
-  float: right;
-}
 </style>
 
 <div id="source_title">
@@ -163,15 +9,15 @@ span.rulename a:hover {
 <div id="source_tabs">
   <ul class="tablinks">
     <%
-       sep=false
-       if @lines
-         sep=true
+       first=true
+       if @snapshot.source
     %>
-      <li><a href="<%= ApplicationController.root_context -%>/api/sources?resource=<%= @resource.key -%>&format=txt">Raw</a></li>
-    <% if request.xhr? %>
-      <li class="<%= 'withsep' if sep -%>"><a href="<%= ApplicationController.root_context -%>/browse/<%= @resource.key -%>" target="sonar">New Window</a></li>
+      <li class="<%= 'first' if first -%>"><a href="<%= ApplicationController.root_context -%>/api/sources?resource=<%= @resource.key -%>&format=txt">Raw</a></li>
+    <%   first=false
+       end
+       if request.xhr? %>
+      <li class="<%= 'first' if first -%>"><a href="<%= ApplicationController.root_context -%>/browse/<%= @resource.key -%>" target="sonar">New Window</a></li>
     <% end %>
-  <% end %>
   </ul>
   <ul class="tabs" >
   <% if request.xhr? %>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/extension.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/extension.html.erb
index d11593d2d81..b61e6259fc4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/extension.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/extension.html.erb
@@ -4,16 +4,18 @@
 
   <% if request.xhr? %>
     <div id="gwtpage"> </div>
-    <script>loadGWT('<%= @extension.getId() -%>',<%= @resource.id -%>,'<%= @resource.key -%>', '<%= @resource.name -%>', '<%= @resource.scope -%>', '<%= @resource.qualifier -%>', '<%= @resource.language -%>');</script>
+    <script>loadGWT('<%= @extension.getId() -%>', <%= @resource.id -%>,'<%= @resource.key -%>', '<%= @resource.name -%>', '<%= @resource.scope -%>', '<%= @resource.qualifier -%>', '<%= @resource.language -%>');</script>
 
   <% else %>
-    <%= render :partial => 'gwt/base', :locals => {:resource => @resource, :popup => false, :metric => nil} -%>
-    <%= render :partial => 'gwt/resource_viewers' -%>
+
 
     <div id="gwtpage"> </div>
     <!-- for SmartGWT -->
     <script>var isomorphicDir = "<%= "#{ApplicationController.root_context}/deploy/gwt/#{@extension.getId()}" -%>/sc/";</script>
+
+    <%= render :partial => 'gwt/base', :locals => {:resource => @resource, :popup => false, :metric => params[:metric]} -%>
     <script src="<%= ApplicationController.root_context -%>/deploy/gwt/<%= @extension.getId() -%>/<%= @extension.getId() -%>.nocache.js?<%= sonar_version -%>"></script>
+    
   <% end %>
   
 <% else # ruby on rails page %>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/index.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/index.html.erb
index 7d277da8b3a..afeba9ea647 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/browse/index.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/browse/index.html.erb
@@ -96,7 +96,7 @@
         <% end %>
       </td>
     <% end %>
-    <td class="line <%= status -%>"><%= line.source -%></td>
+    <td class="line <%= status -%>"><pre><%= line.source -%></pre></td>
   </tr>
   <% end %>
 </table>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/_header.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/_header.html.erb
index ce638773e8d..dd7e3ecd092 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/_header.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/_header.html.erb
@@ -1,4 +1,4 @@
-<%= render :partial => 'gwt/base', :locals => {:popup => false, :metric => @metric.key} -%>
+<%= render :partial => 'gwt/base', :locals => {:resource => nil, :popup => false, :metric => @metric.key} -%>
 <%= render :partial => 'gwt/resource_viewers' -%>
 
 <script>
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/violations.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/violations.html.erb
index 46e63d4213a..434bf469bb4 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/violations.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/drilldown/violations.html.erb
@@ -178,7 +178,7 @@
 </tr>
 </table>
 <br/>
-<div style="font-size: 90%;background-color: #eee;color: #777;padding: 4px 5px;border: 1px solid #ccc;">
+<div style="font-size: 85%;background-color: #eee;color: #777;padding: 4px 5px;border: 1px solid #ddd;margin-bottom: 20px;">
 <b>Path:</b>
 <% if @priority_id %>
 <%= Sonar::RulePriority.to_s(@priority_id) %> <%= link_to 'clear', {:overwrite_params => {:priority => nil}} %>
@@ -199,6 +199,11 @@ $$('#col_rules tr.selected').each(function(item) {item.scrollIntoView(true);});
 <% @drilldown.columns.each do |column| %>
 $$('#col_<%= column.scope -%> tr.selected').each(function(item) {item.scrollIntoView(true);});
 <% end %>
+
+<% if @drilldown.highlighted_resource %>
+    d(<%= @drilldown.highlighted_resource.id -%>);
+<% end %>
+
 </script>
 
 <%= render :partial => 'footer' -%>
\ No newline at end of file
diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/gwt/_base.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/gwt/_base.html.erb
index d859f69708a..efb0a92af02 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/gwt/_base.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/gwt/_base.html.erb
@@ -6,6 +6,13 @@
 <% if metric %>
     ,"metric": "<%= metric -%>"
 <% end %>
+
+<%
+  if resource
+%>
+    ,"resource_key": "<%= resource.id -%>",
+    "resource":[{"id": <%= resource.id -%>, "key":"<%= resource.key -%>","scope": "<%= resource.scope -%>", "qualifier": "<%= resource.qualifier -%>", "name": "<%= resource.name -%>", "lang":"<%= resource.language -%>"}]
+<% end %>
   };
 
   var rp = {
diff --git a/sonar-server/src/main/webapp/stylesheets/style.css b/sonar-server/src/main/webapp/stylesheets/style.css
index 1341a32e98e..f0a60d8dda3 100644
--- a/sonar-server/src/main/webapp/stylesheets/style.css
+++ b/sonar-server/src/main/webapp/stylesheets/style.css
@@ -171,8 +171,8 @@ a {
   display: block;
 }
 #sidebarconf {
-  background-color: #eee;
-  border: 2px solid #ccc;
+  background-color: #ECECEC;
+  border: 2px solid #DDD;
   color: #666;
   line-height: 1.1em;
   margin-top: 10px;
@@ -344,7 +344,7 @@ h4, .h4 {
   color: #777;
   font-size: 85%;
   margin-bottom: 10px;
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   border: 1px solid #cdcdcd;
   padding: 4px;
 }
@@ -415,7 +415,7 @@ h4, .h4 {
 }
 .doc pre, pre.code {
 	color: #777;
-	background-color: #f4f4f4;
+	background-color: #ECECEC;
 	padding: 10px;
 	margin: 10px 0;
 	border: 1px dashed #777;
@@ -454,9 +454,9 @@ table.data th img, table.data td img {
   vertical-align: top;
 }
 .data thead tr.total {
-  background-color: #eee;
+  background-color: #ECECEC;
   font-weight: normal;
-  border: 1px solid #ddd;
+  border: 1px solid #DDD;
 }
 .data thead tr.total th {
   font-weight: normal;
@@ -581,7 +581,7 @@ ul.operations {
   float: right;
   list-style-type: none;
   margin: 0;
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   border: 1px solid #cdcdcd;
   border-radius: 3px;
   -moz-border-radius: 3px;
@@ -608,67 +608,185 @@ ul.operations li a {
 .resourceName h1 {
 	margin: 5px 0;
 }
-#source {
-  margin: 1px;
-  padding: 15px 2px 2px;
-}
 
-#source h2 {
-  border-bottom: 1px solid #dedede;
-  margin-bottom: 5px;
-  font-size: 100%;
-  font-weight: bold;
-  padding: 0 0 5px 5px;
-}
 
-#source pre {
-  font-size: 93%;
-  text-align: left;
-  margin-top: 10px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-}
 
-#source span {
-  padding-left: 4px;
+/* SOURCE */
+#source_metrics {
+  width: 100%;
 }
-
-#source .error {
-  background-color: #FF9090;
-  border: 0;
-  color: #000;
-  margin: 0;
-  padding: 0;
+#source_metrics {
+  width: 100%;
 }
-
-#source .warning {
-  background-color: #FFFFAF;
-  border: 0;
-  color: #000;
+.sources2 {
+  width: 100%;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
   margin: 0;
-  padding: 0;
 }
-
-#source .info {
-  background-color: #80FF80;
-  border: 0;
-  color: #000;
-  margin: 0;
-  padding: 0;
+.sources2 td.lid {
+  background-color: #ECECEC;
+  border-right: 1px solid #DDDDDD;
+  border-left: 1px solid #DDDDDD;
+  text-align: right;
+  padding: 2px 0.5em 0 0.5em;
+  vertical-align: top;
+  font-size: 85%;
 }
-
-#source .ln {
-  color: #666;
-  padding-right: 4px;
-  border-right: solid 1px #ccc;
-  margin-right: 4px;
-  background-color: #eee;
+.sources2 td.lid a {
+  text-decoration: none;
+  color: #AAA;
 }
-
-#source .big {
-  font-size: 100%;
+.sources2 td.scm {
+  border-right: 1px solid #DDD;
+  border-left: 1px solid #DDD;
+  background-color: #ECECEC;
+}
+.sources2 td.revision {
+  border-top: 1px solid #DDD;
+  vertical-align: top;
+  padding: 2px 0.3em;
+  white-space: nowrap;
+}
+.sources2 span.date, .sources2 span.date a {
+  color: #AAA;
+  font-size: 85%;
+  text-decoration: none;
+}
+.sources2 span.author, .sources2 span.author a {
+  font-size: 85%;
+}
+.sources2 td.rule {
+  padding: 1px 0.5em;
+  border-left: 1px solid #DDDDDD;
+}
+.sources2 td.violations {
+  background-color: #ECECEC;
+  min-width: 450px;
+}
+span.rulename, span.rulename a {
+  color: #4183C4;
+  text-decoration: none;
+}
+span.violation_date {
+  color: #AAA;
+  font-size: 85%;
+}
+span.rulename a:hover {
+  text-decoration: underline;
+}
+.sources2 td.violations img {
+  vertical-align: sub;
+}
+.sources2 td.line {
+  padding-left: 1em;
+  width: 100%;
+  font-size: 12px;
+  font-family: monospace;
+  border-right: 1px solid #DDD;
+}
+.sources2 td.section {
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+}
+.sources2 td.ind {
+  border-right: 1px solid #DDD;
+  min-width: 1.5em;
+  padding: 0 0.3em;
+  text-align: center;
+  vertical-align: middle;
+}
+.sources2 td.ok {
+  background-color: #ACE97C;
+  border-top: 1px solid #6EC563;
+  border-bottom: 1px solid #6EC563;
+}
+.sources2 td.sev0, .sources2 td.sev1, .sources2 td.warn {
+  /* info, minor */
+  background-color: #FFF6BF;
+  border-top: 1px solid #FFD324;
+  border-bottom: 1px solid #FFD324;
+}
+.sources2 td.sev2, .sources2 td.sev3, .sources2 td.sev4, .sources2 td.ko {
+  /* major, critical, blocker */
+  background-color: #FF9090;
+  border-top: 1px solid #FF5252;
+  border-bottom: 1px solid #FF5252;
+}
+.sources2 td.new_section {
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  height: 40px;
+}
+#source_title {
+  padding: 10px 0;
+}
+#source_title span.h1 {
+  font-size: 16px;
+  margin-right: 10px;
+}
+.source_links {
+  font-size: 11px;
+}
+#global_violations {
+  width: 100%;
+  border: 1px solid #DDD;
+  margin-bottom: 10px;
+}
+#global_violations td {
+  background-color: #ECECEC;
+  padding: 3px 0.5em;
+}
+#global_violations td img, #source_title img {
+  vertical-align: sub;
+}
+.tab_header {
+  border: 1px solid #DDD;
+  border-top-width: 0;
+  background-color: #ECECEC;
+  padding: 5px 10px;
+  margin-bottom: 10px;
+  color: #444;
+}
+.tab_header table.col {
+  margin-right: 20px;
+  display: inline-block;
+  vertical-align: top;
+}
+.tab_header table.bottomcol {
+  margin-right: 20px;
+  display: inline-block;
+  vertical-align: bottom;
+}
+.tab_header table.col td, .tab_header table.bottomcol td {
+  padding-right: 7px;
+}
+.tab_header td.name {
+  font-weight: bold;
   text-align: left;
 }
+.tab_header td.value {
+  text-align: right;
+}
+#source_options {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid #ddd;
+  font-size: 85%;
+}
+#source_options td {
+  background: url("../images/sep12.png") no-repeat scroll 0 50% transparent;
+  padding: 0 10px;
+}
+#source_options td.first {
+  background: none;
+  padding: 0 10px 0 0;
+}
+
+
+
+
+
 #gwtpage {
 	width: 100%;
 	clear: both;
@@ -682,11 +800,11 @@ ul.operations li a {
 }
 
 .gwt-SourcePanel .ln {
-  background-color: #eee;
+  background-color: #ECECEC;
   white-space: nowrap;
   text-align: right;
   color: #777;
-  border-right: 1px solid silver;
+  border-right: 1px solid #DDD;
   padding: 0 3px;
   height: 14px;
 }
@@ -697,8 +815,8 @@ ul.operations li a {
 }
 
 .gwt-SourcePanel .val {
-  background-color: #eee;
-  border-right: 1px solid silver;
+  background-color: #ECECEC;
+  border-right: 1px solid #DDD;
   text-align: right;
   color: #777;
   padding: 0 3px;
@@ -734,7 +852,7 @@ ul.operations li a {
   height: 1.6em;
   background-position: 5px 1px;
   background-repeat: no-repeat;
-  background-color: #eee;
+  background-color: #ECECEC;
 }
 
 .gwt-SourcePanel .warn {
@@ -806,8 +924,9 @@ ul.operations li a {
 }
 
 .gwt-ViewerHeader {
-  background-color: #eee;
-  border-bottom: 1px solid silver;
+  background-color: #ECECEC;
+  border: 1px solid #DDD;
+  border-top: none;
   margin-bottom: 8px;
   color: #333;
   vertical-align: bottom;
@@ -899,8 +1018,8 @@ ul.operations li a {
 
 /* ------------------- HELP ------------------- */
 .help {
-  border: 1px solid #ccc;
-  background-color: #eee;
+  border: 1px solid #DDD;
+  background-color: #ECECEC;
   color: #444;
   padding: 5px;
 }
@@ -936,7 +1055,7 @@ ul.operations li a {
 /* ------------------- BOXES ------------------- */
 .box {
   border: 1px solid #ccc;
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   margin-bottom: 5px;
   color: #444;
   padding: 10px;
@@ -1020,16 +1139,18 @@ ul.bullet li {
 }
 .tablinks li {
   float:left;
-  padding: 0 7px;
   text-align: right;
-}
-.tablinks li.withsep {
   background: url("../images/sep12.png") no-repeat scroll 0 50% transparent;
+  margin-left: 7px;
+  padding: 0 0 0 7px;
+}
+.tablinks li.first {
+  background: none;
 }
-
 .tablinks a {
   text-decoration: underline;
-  color: #555;
+  color: #777;
+  font-size: 85%;
 }
 .tabs li {
   display: inline;
@@ -1045,7 +1166,7 @@ ul.bullet li {
 }
 .tabs li a:link, .tabs li a:visited {
   float: left;
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   color: #555;
   vertical-align: bottom;
   height: 17px;
@@ -1082,7 +1203,7 @@ ul.bullet li {
   text-decoration: none;
   color: #777;
   background-color: #FFF;
-  border: 1px solid silver;
+  border: 1px solid #DDD;
   border-bottom: 0;
   vertical-align: middle;
   white-space: nowrap;
@@ -1092,12 +1213,12 @@ ul.bullet li {
 
 .smalltabs .tab.selected {
   font-weight: bold;
-  background-color: #EEE;
+  background-color: #ECECEC;
 }
 
 .smalltabs .tab.selected a {
   text-decoration: none;
-  background-color: #EEE;
+  background-color: #ECECEC;
   color: #777;
 }
 
@@ -1143,8 +1264,8 @@ ul.bullet li {
 }
 
 #time_machine #selector {
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: #ECECEC;
+  border: 1px solid #DDD;
 }
 .comments {
   color: #777;
@@ -1224,7 +1345,7 @@ ul.bullet li {
   font-weight: normal;
   text-decoration: underline;
   color: #555;
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   vertical-align: middle;
   white-space: nowrap;
   padding: 0.3em 0.6em;
@@ -1378,7 +1499,7 @@ h4 a, h4 a:visited, .gray, table.data tfoot a, table.data tfoot a:visited {
 }
 
 .even, table.sortable tr.rowodd {
-  background-color: #f4f4f4;
+  background-color: #F4F4F4;
 }
 
 .bordered, table.data > thead {
@@ -1454,7 +1575,7 @@ table.nowrap td, td.nowrap {
   white-space: nowrap;
 }
 .background-gray {
-  background-color: #f4f4f4;
+  background-color: #ECECEC;
   color: #444;
 }