SONAR-5209 Speed up issues rendering

6 files changed, 51 insertions, 38 deletions

diff --git a/sonar-server/src/main/coffee/component-viewer/source.coffee b/sonar-server/src/main/coffee/component-viewer/source.coffee
index 9b15f4e6276..50aa37282d5 100644
--- a/sonar-server/src/main/coffee/component-viewer/source.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/source.coffee
@@ -103,10 +103,10 @@ define [
       issues.forEach (issue) =>
         line = issue.line || 0
         line = 0 if issue.resolution == 'FIXED' || issue.resolution == 'REMOVED'
-        row = @$("[data-line-number=#{line}]")
+        row = @$("##{@cid}-#{line}")
         unless row.length > 0
           line = 0
-          row = @$("[data-line-number=#{line}]")
+          row = @$("##{@cid}-#{line}")
         if row.length > 0
           row.removeClass 'row-hidden'
           container = row.children('.line')
@@ -277,10 +277,11 @@ define [
 
 
     serializeData: ->
+      uid: @cid
       source: @prepareSource()
       settings: @options.main.settings.toJSON()
       state: @options.main.state.toJSON()
       showSettings: @showSettings
       component: @options.main.component.toJSON()
       columns: @getStatColumnsCount() + 1
-      showZeroLine: @showZeroLine()
\ No newline at end of file
+      showZeroLine: @showZeroLine()
diff --git a/sonar-server/src/main/coffee/issues/issue-view.coffee b/sonar-server/src/main/coffee/issues/issue-view.coffee
index 5e6ceb5e06e..e69aad37eec 100644
--- a/sonar-server/src/main/coffee/issues/issue-view.coffee
+++ b/sonar-server/src/main/coffee/issues/issue-view.coffee
@@ -57,8 +57,8 @@ define [
 
       'click .code-issue-toggle': 'toggleCollapsed',
 
-      'click [href=#tab-issue-rule]': 'fetchRule',
-      'click [href=#tab-issue-changelog]': 'fetchChangeLog',
+      'click [href=#tab-issue-rule]': 'showRuleTab',
+      'click [href=#tab-issue-changelog]': 'showChangeLogTab',
 
       'click #issue-comment': 'comment',
       'click .issue-comment-edit': 'editComment',
@@ -72,8 +72,6 @@ define [
 
 
     onRender: ->
-      @$('.code-issue-details').tabs()
-      @$('.code-issue-form').hide()
       @rule = new Rule key: this.model.get('rule')
       @ruleRegion.show new RuleView model: @rule, issue: @model
       @changeLog = new ChangeLog()
@@ -97,17 +95,34 @@ define [
 
     toggleCollapsed: ->
       @$('.code-issue').toggleClass 'code-issue-collapsed'
-      @fetchRule()
+      unless @$('.code-issue').is '.code-issue-collapsed'
+        @showRuleTab()
+
+
+    hideTabs: ->
+      @$('.js-tab-link').removeClass 'active-link'
+      @$('.js-tab').hide()
+
+
+    showTab: (tab) ->
+      @hideTabs()
+      s = "#tab-issue-#{tab}"
+      @$(s).show()
+      @$("[href=#{s}]").addClass 'active-link'
 
 
-    fetchRule: ->
+    showRuleTab: (e) ->
+      e?.preventDefault()
+      @showTab 'rule'
       unless @rule.has 'name'
         @$('#tab-issue-rule').addClass 'navigator-fetching'
         @rule.fetch
           success: => @$('#tab-issue-rule').removeClass 'navigator-fetching'
 
 
-    fetchChangeLog: ->
+    showChangeLogTab: (e) ->
+      e?.preventDefault()
+      @showTab 'changelog'
       unless @changeLog.length > 0
         @$('#tab-issue-changeLog').addClass 'navigator-fetching'
         @changeLog.fetch
diff --git a/sonar-server/src/main/hbs/component-viewer/source.hbs b/sonar-server/src/main/hbs/component-viewer/source.hbs
index 1e7a2b40766..87542a5e3d6 100644
--- a/sonar-server/src/main/hbs/component-viewer/source.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/source.hbs
@@ -10,7 +10,7 @@
 
   <table class="code">
     {{#if showZeroLine}}
-      <tr class="row row-hidden" data-line-number="0">
+      <tr class="row row-hidden" data-line-number="0" id="{{uid}}-0">
         {{#if settings.coverage}}
           <td class="stat coverage-tests"></td>
           <td class="stat coverage-conditions"></td>
@@ -28,8 +28,7 @@
 
     {{#each source}}
       {{#if show}}
-        <tr class="row"
-            data-line-number="{{lineNumber}}">
+        <tr class="row" data-line-number="{{lineNumber}}" id="{{uid}}-{{lineNumber}}">
 
           {{#if ../../settings.scm}}
             <td class="stat {{#if scm}}scm{{/if}}">
diff --git a/sonar-server/src/main/hbs/issues/issue.hbs b/sonar-server/src/main/hbs/issues/issue.hbs
index f59b2cae41b..cbdb2c11765 100644
--- a/sonar-server/src/main/hbs/issues/issue.hbs
+++ b/sonar-server/src/main/hbs/issues/issue.hbs
@@ -99,24 +99,24 @@
     {{#if author}}<li>{{t 'author'}}: {{author}}</li>{{/if}}
   </ul>
 
-  <div class="code-issue-form"></div>
+  <div class="code-issue-form" style="display: none;"></div>
 
 
   <div class="code-issue-details">
-    <ul class="tabs">
+    <ul class="code-issue-tabs">
       <li>
-        <a href="#tab-issue-rule">{{t 'rule'}}</a>
+        <a class="js-tab-link underlined-link" href="#tab-issue-rule">{{t 'rule'}}</a>
       </li>
       <li>
-        <a href="#tab-issue-changelog">{{t 'changelog'}}</a>
+        <a class="js-tab-link underlined-link" href="#tab-issue-changelog">{{t 'changelog'}}</a>
       </li>
     </ul>
 
-    <div id="tab-issue-rule">
+    <div id="tab-issue-rule" class="js-tab">
       <div class="rule-desc"></div>
     </div>
 
-    <div id="tab-issue-changelog"></div>
+    <div id="tab-issue-changelog" class="js-tab"></div>
   </div>
 
 
@@ -139,4 +139,4 @@
       </div>
     {{/each}}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/sonar-server/src/main/less/style.less b/sonar-server/src/main/less/style.less
index d23bfadf2c8..dc70d2aab1a 100644
--- a/sonar-server/src/main/less/style.less
+++ b/sonar-server/src/main/less/style.less
@@ -917,33 +917,26 @@ th.operations, td.operations {
 }
 
 .code-issue-details {
-  padding: 0 0 5px;
+  padding: 0 10px 5px;
   border-left: 1px solid #DDD;
   border-right: 1px solid #DDD;
   border-bottom: 1px solid #DDD;
   background-color: #EFEFEF;
-}
-
-.code-issue-details .ui-tabs-panel {
-  padding: 5px 10px 0;
   line-height: 1.3;
 }
 
-.code-issue-details .tabs {
-  height: auto;
-  padding: 5px 10px;
-  border-bottom: 1px solid #DDD;
-}
+.code-issue-tabs {
+  margin-bottom: 5px;
+  font-size: 0;
 
-.code-issue-details .tabs li + li {
-  margin-left: 10px;
-}
+  & > li {
+    display: inline-block;
+    padding: 4px 0;
+    color: @secondFontColor;
+    font-size: @smallFontSize;
+  }
 
-.code-issue-details .tabs li a:link,
-.code-issue-details .tabs li a:visited {
-  float: none;
-  margin: 0;
-  padding: 0;
+  & > li + li { margin-left: 15px; }
 }
 
 .code-issue-details-list {
diff --git a/sonar-server/src/main/less/ui.less b/sonar-server/src/main/less/ui.less
index 232e2395316..5feabf6cdf8 100644
--- a/sonar-server/src/main/less/ui.less
+++ b/sonar-server/src/main/less/ui.less
@@ -124,6 +124,11 @@ select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
   }
 }
 
+.active-link {
+  border-bottom: none;
+  font-weight: 500;
+}
+
 a {
   cursor: pointer;
   .highlighted-link;