Component Viewer: ui improvements

7 files changed, 52 insertions, 34 deletions

diff --git a/sonar-server/src/main/coffee/coding-rules/app.coffee b/sonar-server/src/main/coffee/coding-rules/app.coffee
index 9d1393c46b2..149e9f44838 100644
--- a/sonar-server/src/main/coffee/coding-rules/app.coffee
+++ b/sonar-server/src/main/coffee/coding-rules/app.coffee
@@ -180,7 +180,7 @@ requirejs [
   # Construct header
   App.addInitializer ->
     @codingRulesHeaderView = new CodingRulesHeaderView app: @
-    @layout.headerRegion.show @codingRulesHeaderView
+    @layout.workspaceRegion.show @codingRulesHeaderView
 
 
   # Define coding rules
diff --git a/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee b/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee
index c225a07b428..cc5ba87677c 100644
--- a/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee
@@ -20,9 +20,7 @@ define [
 
     onRender: ->
       @$el.detach().appendTo $('body')
-      @$el.css
-        top: @options.triggerEl.offset().top
-        left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth()
+      @$el.css 'top', @options.triggerEl.offset().top
 
       $('body').on 'click.coverage-popup', =>
         $('body').off 'click.coverage-popup'
diff --git a/sonar-server/src/main/coffee/component-viewer/main.coffee b/sonar-server/src/main/coffee/component-viewer/main.coffee
index c207d8c3f87..2471f3fa1ea 100644
--- a/sonar-server/src/main/coffee/component-viewer/main.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/main.coffee
@@ -2,13 +2,13 @@ define [
   'backbone'
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/header'
+  'component-viewer/workspace'
   'component-viewer/source'
 ], (
   Backbone
   Marionette
   Templates
-  HeaderView
+  WorkspaceView
   SourceView
 ) ->
 
@@ -24,25 +24,27 @@ define [
 
 
     regions:
-      headerRegion: '.component-viewer-header'
+      workspaceRegion: '.component-viewer-workspace'
       sourceRegion: '.component-viewer-source'
 
 
     initialize: ->
       @workspace = new Backbone.Collection()
       @component = new Backbone.Model()
-      @headerView = new HeaderView
-        model: @component
+      @workspaceView = new WorkspaceView
+        collection: @workspace
         main: @
 
       @source = new Backbone.Model()
-      @sourceView = new SourceView model: @source, main: @
+      @sourceView = new SourceView
+        model: @source
+        main: @
 
       @settings = new Backbone.Model issues: false, coverage: true, duplications: false
 
 
     onRender: ->
-      @headerRegion.show @headerView
+      @workspaceRegion.show @workspaceView
       @sourceRegion.show @sourceView
 
 
@@ -92,6 +94,7 @@ define [
 
 
     showCoverage: ->
+      @settings.set 'coverage', true
       unless @source.has 'coverage'
         metrics = 'coverage_line_hits_data,covered_conditions_by_line,conditions_by_line'
         @requestComponent(@key, metrics).done (data) =>
@@ -102,7 +105,8 @@ define [
 
 
     hideCoverage: ->
-      @sourceView.hideCoverage()
+      @settings.set 'coverage', false
+      @sourceView.render()
 
 
     addTransition: (key, transition) ->
diff --git a/sonar-server/src/main/coffee/component-viewer/source.coffee b/sonar-server/src/main/coffee/component-viewer/source.coffee
index e4ea8c7502a..27f72f9da40 100644
--- a/sonar-server/src/main/coffee/component-viewer/source.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/source.coffee
@@ -17,42 +17,61 @@ define [
 
 
     events:
-      'click .coverage a': 'showCoveragePopup'
+      'click .settings-toggle button': 'toggleSettings'
+      'change #source-coverage': 'toggleCoverage'
+      'click .coverage-tests': 'showCoveragePopup'
 
 
     onRender: ->
       @delegateEvents()
+      @showSettings = false
 
 
     showSpinner: ->
       @$el.html '<div style="padding: 10px;"><i class="spinner"></i></div>'
 
 
-    hideCoverage: ->
-      @$('.coverage').hide()
+
+    toggleSettings: ->
+      @$('.settings-toggle button').toggleClass 'open'
+      @$('.component-viewer-source-settings').toggleClass 'open'
+
+
+    toggleCoverage: (e) ->
+      active = $(e.currentTarget).is ':checked'
+      @showSettings = true
+      if active then @options.main.showCoverage() else @options.main.hideCoverage()
 
 
     showCoveragePopup: (e) ->
       e.stopPropagation()
       $('body').click()
       popup = new CoveragePopupView
-        triggerEl: $(e.currentTarget).closest('td')
+        triggerEl: $(e.currentTarget)
         main: @options.main
       popup.render()
 
 
-    serializeData: ->
+    prepareSource: ->
       source = @model.get 'source'
       coverage = @model.get 'coverage'
       coverageConditions = @model.get 'coverageConditions'
       conditions = @model.get 'conditions'
-      source = _.map source, (code, line) ->
+      _.map source, (code, line) ->
         lineCoverage = coverage? && coverage[line]? && coverage[line]
+        lineCoverage = +lineCoverage if _.isString lineCoverage
         lineCoverageConditions = coverageConditions? && coverageConditions[line]? && coverageConditions[line]
+        lineCoverageConditions = +lineCoverageConditions if _.isString lineCoverageConditions
         lineConditions = conditions? && conditions[line]? && conditions[line]
-        lineCoverageStatus = lineCoverage? &&  if lineCoverage > 0 then 'green' else 'red'
+        lineConditions = +lineConditions if _.isString lineConditions
+
+        lineCoverageStatus = null
+        if _.isNumber lineCoverage
+          lineCoverageStatus = 'red' if lineCoverage == 0
+          lineCoverageStatus = 'green' if lineCoverage > 0
+
         lineCoverageConditionsStatus = null
-        if lineCoverageConditions? && conditions?
+        if _.isNumber(lineCoverageConditions) && _.isNumber(conditions)
           lineCoverageConditionsStatus = 'red' if lineCoverageConditions == 0
           lineCoverageConditionsStatus = 'orange' if lineCoverageConditions > 0 && lineCoverageConditions < lineConditions
           lineCoverageConditionsStatus = 'green' if lineCoverageConditions == lineConditions
@@ -63,5 +82,10 @@ define [
         coverageStatus: lineCoverageStatus
         coverageConditions: lineCoverageConditions
         conditions: lineConditions
-        coverageConditionsStatus: lineCoverageConditionsStatus
-      source: source
\ No newline at end of file
+        coverageConditionsStatus: lineCoverageConditionsStatus || lineCoverageStatus
+
+
+    serializeData: ->
+      source: @prepareSource()
+      settings: @options.main.settings.toJSON()
+      showSettings: @showSettings
\ No newline at end of file
diff --git a/sonar-server/src/main/coffee/component-viewer/header.coffee b/sonar-server/src/main/coffee/component-viewer/workspace.coffee
index e64f546d43e..4eaf851fa72 100644
--- a/sonar-server/src/main/coffee/component-viewer/header.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/workspace.coffee
@@ -9,13 +9,12 @@ define [
   $ = jQuery
 
 
-  class HeaderView extends Marionette.ItemView
-    template: Templates['header']
+  class WorkspaceView extends Marionette.ItemView
+    template: Templates['workspace']
 
 
     events:
       'click .component-viewer-workspace-item [data-key]': 'goToWorkspaceItem'
-      'click [data-option=coverage]': 'toggleCoverage'
 
 
     onRender: ->
@@ -31,13 +30,6 @@ define [
       @options.main.addTransition workspaceItem.get('key'), workspaceItem.get('transition')
 
 
-    toggleCoverage: (e) ->
-      el = $(e.currentTarget)
-      active = el.is '.active'
-      el.toggleClass 'active'
-      if active then @options.main.hideCoverage() else @options.main.showCoverage()
-
-
     serializeData: ->
       _.extend super,
         workspace: @options.main.workspace.toJSON()
diff --git a/sonar-server/src/main/coffee/quality-gate/layout.coffee b/sonar-server/src/main/coffee/quality-gate/layout.coffee
index 0b5941655d5..0edc32c223e 100644
--- a/sonar-server/src/main/coffee/quality-gate/layout.coffee
+++ b/sonar-server/src/main/coffee/quality-gate/layout.coffee
@@ -25,7 +25,7 @@ define [
 
     updateLayout: ->
       empty = @options.app.qualityGates.length == 0
-      @$(@headerRegion.el).toggle !empty
+      @$(@workspaceRegion.el).toggle !empty
       @$(@detailsRegion.el).toggle !empty
 
 
diff --git a/sonar-server/src/main/coffee/quality-gate/router.coffee b/sonar-server/src/main/coffee/quality-gate/router.coffee
index f21161a97bf..834da1bf9ca 100644
--- a/sonar-server/src/main/coffee/quality-gate/router.coffee
+++ b/sonar-server/src/main/coffee/quality-gate/router.coffee
@@ -28,7 +28,7 @@ define [
         qualityGateDetailHeaderView = new QualityGateDetailHeaderView
           app: @app
           model: qualityGate
-        @app.layout.headerRegion.show qualityGateDetailHeaderView
+        @app.layout.workspaceRegion.show qualityGateDetailHeaderView
 
         qualityGateDetailView = new QualityGateDetailView
           app: @app