Component Viewer: new tooltips, workspace improvements

8 files changed, 209 insertions, 40 deletions

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 cc5ba87677c..7623eebcd57 100644
--- a/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/coverage-popup.coffee
@@ -20,7 +20,9 @@ define [
 
     onRender: ->
       @$el.detach().appendTo $('body')
-      @$el.css 'top', @options.triggerEl.offset().top
+      @$el.css
+        top: @options.triggerEl.offset().top
+        left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth()
 
       $('body').on 'click.coverage-popup', =>
         $('body').off 'click.coverage-popup'
@@ -29,5 +31,29 @@ define [
 
     goToFile: (e) ->
       key = $(e.currentTarget).data 'key'
-      console.log key
-      @options.main.addTransition key, 'coverage'
+      test = $(e.currentTarget).data 'test'
+      @options.main.addTransition key, 'coverage', [
+        {
+          key: 'org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTreeTest.java'
+          name: 'forbidDuplicatedType'
+          subname: 'ResourceTypeTreeTest.java'
+          active: test == 'forbidDuplicatedType'
+        }
+        {
+          key: 'org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTreeTest.java'
+          name: 'forbidNullRelation'
+          subname: 'ResourceTypeTreeTest.java'
+          active: test == 'forbidNullRelation'
+        }
+        {
+          key: 'org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTest.java'
+          name: 'fail_on_duplicated_qualifier'
+          subname: 'ResourceTypeTest.java'
+          active: test == 'fail_on_duplicated_qualifier'
+        }
+      ], [
+        {
+          key: key,
+          name: test
+        }
+      ]
diff --git a/sonar-server/src/main/coffee/component-viewer/main.coffee b/sonar-server/src/main/coffee/component-viewer/main.coffee
index 2471f3fa1ea..c92b1c74c36 100644
--- a/sonar-server/src/main/coffee/component-viewer/main.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/main.coffee
@@ -40,7 +40,7 @@ define [
         model: @source
         main: @
 
-      @settings = new Backbone.Model issues: false, coverage: true, duplications: false
+      @settings = new Backbone.Model issues: false, coverage: true, duplications: false, scm: false
 
 
     onRender: ->
@@ -109,6 +109,16 @@ define [
       @sourceView.render()
 
 
-    addTransition: (key, transition) ->
-      @workspace.add key: key, transition: transition
+    addTransition: (key, transition, optionsForCurrent, options) ->
+      if optionsForCurrent?
+        last = @workspace.at(@workspace.length - 1)
+        last.set 'options', optionsForCurrent if last
+
+#      workspaceItem = @workspace.findWhere key: key
+#      if workspaceItem?
+#        @workspace.remove workspaceItem
+#        @workspace.add workspaceItem
+#      else
+      @workspace.add key: key, transition: transition, options: options
+
       @_open key
\ No newline at end of file
diff --git a/sonar-server/src/main/coffee/component-viewer/workspace.coffee b/sonar-server/src/main/coffee/component-viewer/workspace.coffee
index 4eaf851fa72..ab7662452df 100644
--- a/sonar-server/src/main/coffee/component-viewer/workspace.coffee
+++ b/sonar-server/src/main/coffee/component-viewer/workspace.coffee
@@ -14,7 +14,8 @@ define [
 
 
     events:
-      'click .component-viewer-workspace-item [data-key]': 'goToWorkspaceItem'
+      'click .component-viewer-workspace-item > a[data-key]': 'goToWorkspaceItem'
+      'click .component-viewer-workspace-option > a[data-key]': 'goToWorkspaceOption'
 
 
     onRender: ->
@@ -30,6 +31,21 @@ define [
       @options.main.addTransition workspaceItem.get('key'), workspaceItem.get('transition')
 
 
+    goToWorkspaceOption: (e) ->
+      workspaceKey = $(e.currentTarget).data 'workspace-key'
+      key = $(e.currentTarget).data 'key'
+      name = $(e.currentTarget).text()
+
+      workspace = @options.main.workspace
+      workspaceItem = workspace.findWhere key: workspaceKey
+      workspaceItemOptions = workspaceItem.get 'options'
+      workspaceItemOptions.forEach (option) -> option.active = option.name == name
+
+      @options.main.addTransition workspaceItem.get('key'), workspaceItem.get('transition'), null, [
+        { key: key, name: name }
+      ]
+
+
     serializeData: ->
       _.extend super,
         workspace: @options.main.workspace.toJSON()
diff --git a/sonar-server/src/main/hbs/component-viewer/coveragePopup.hbs b/sonar-server/src/main/hbs/component-viewer/coveragePopup.hbs
index d11d2221090..e6058cb6abd 100644
--- a/sonar-server/src/main/hbs/component-viewer/coveragePopup.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/coveragePopup.hbs
@@ -1,20 +1,44 @@
 <div class="component-viewer-popup-section">
-  <a data-key="org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTreeTest.java"
-     class="component-viewer-popup-section-title">
+  <div class="component-viewer-popup-section-title">
     ResourceTypeTreeTest.java
-  </a>
+  </div>
   <ul class="component-viewer-popup-list">
-    <li><i class="icon-alert-ok"></i> 216ms forbidDuplicatedType</li>
-    <li><i class="icon-alert-ok"></i> 216ms forbidNullRelation</li>
+    <li>
+      <a class="component-viewer-popup-test"
+         data-key="org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTreeTest.java"
+         data-test="forbidDuplicatedType">
+        <i class="component-viewer-popup-test-status icon-alert-ok"></i>
+        <span class="component-viewer-popup-test-name">forbidDuplicatedType</span>
+        <span class="component-viewer-popup-test-duration">216ms</span>
+      </a>
+    </li>
+    <li>
+      <a class="component-viewer-popup-test"
+         data-key="org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTreeTest.java"
+         data-test="forbidNullRelation">
+        <i class="component-viewer-popup-test-status icon-alert-ok"></i>
+        <span class="component-viewer-popup-test-name">forbidNullRelation</span>
+        <span class="component-viewer-popup-test-duration">216ms</span>
+      </a>
+    </li>
   </ul>
 </div>
 
 <div class="component-viewer-popup-section">
-  <a data-key="org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypesTest.java"
-     class="component-viewer-popup-section-title">
+  <div class="component-viewer-popup-section-title">
     ResourceTypesTest.java
-  </a>
+  </div>
   <ul class="component-viewer-popup-list">
-    <li><i class="icon-alert-ok"></i> 115ms fail_on_duplicated_qualifier</li>
+    <li>
+      <a class="component-viewer-popup-test"
+         data-key="org.codehaus.sonar:sonar-plugin-api:src/test/java/org/sonar/api/resources/ResourceTypeTest.java"
+         data-test="fail_on_duplicated_qualifier">
+        <i class="component-viewer-popup-test-status icon-alert-ok"></i>
+        <span class="component-viewer-popup-test-name">fail_on_duplicated_qualifier</span>
+        <span class="component-viewer-popup-test-duration">115ms</span>
+      </a>
+    </li>
   </ul>
-</div>
\ No newline at end of file
+</div>
+
+<div class="component-viewer-popup-arrow"></div>
\ No newline at end of file
diff --git a/sonar-server/src/main/hbs/component-viewer/source.hbs b/sonar-server/src/main/hbs/component-viewer/source.hbs
index 151109a45b4..66a08b3844e 100644
--- a/sonar-server/src/main/hbs/component-viewer/source.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/source.hbs
@@ -24,6 +24,10 @@
           <input id="source-duplications" type="checkbox" {{#if settings.duplications}}checked{{/if}}>
           <label for="source-duplications">Duplications</label>
         </li>
+        <li>
+          <input id="source-scm" type="checkbox" {{#if settings.scm}}checked{{/if}}>
+          <label for="source-scm">SCM</label>
+        </li>
       </ul>
     </th>
   </tr>
diff --git a/sonar-server/src/main/hbs/component-viewer/workspace.hbs b/sonar-server/src/main/hbs/component-viewer/workspace.hbs
index f25d693d3ac..f1a83c56881 100644
--- a/sonar-server/src/main/hbs/component-viewer/workspace.hbs
+++ b/sonar-server/src/main/hbs/component-viewer/workspace.hbs
@@ -1,12 +1,17 @@
 <ul class="component-viewer-workspace-list">
-  {{#each workspace}}
+  {{#eachReverse workspace}}
     <li class="component-viewer-workspace-item">
-      {{#if transition}}
-        <span>
-            <i class="icon-move-right"></i>
-          </span>
+      {{qualifierIcon component.qualifier}} <a data-key="{{key}}">{{component.name}}</a>
+      {{#if options}}
+        <ul class="component-viewer-workspace-options">
+          {{#each options}}
+            <li class="component-viewer-workspace-option {{#if active}}active{{/if}}">
+              <a data-workspace-key="{{../key}}" data-key="{{key}}">{{name}}</a>
+              {{#if subname}}<div class="subtitle">{{subname}}</div>{{/if}}
+            </li>
+          {{/each}}
+        </ul>
       {{/if}}
-      <a data-key="{{key}}">{{qualifierIcon component.qualifier}} {{component.name}}</a>
     </li>
-  {{/each}}
+  {{/eachReverse}}
 </ul>
\ No newline at end of file
diff --git a/sonar-server/src/main/js/common/handlebars-extensions.js b/sonar-server/src/main/js/common/handlebars-extensions.js
index b1f27e57c59..3dde8c8ce1d 100644
--- a/sonar-server/src/main/js/common/handlebars-extensions.js
+++ b/sonar-server/src/main/js/common/handlebars-extensions.js
@@ -78,6 +78,20 @@ define(['handlebars'], function (Handlebars) {
     return array.join(separator);
   });
 
+  Handlebars.registerHelper('eachReverse', function(array, options) {
+    var ret = '';
+
+    if (array && array.length > 0) {
+      for (var i = array.length - 1; i >= 0; i--) {
+        ret += options.fn(array[i]);
+      }
+    } else {
+      ret = options.inverse(this);
+    }
+
+    return ret;
+  });
+
   Handlebars.registerHelper('dashboardUrl', function(componentKey, componentQualifier) {
     var url = '/dashboard/index/' + decodeURIComponent(componentKey);
     if (componentQualifier === 'FIL' || componentQualifier === 'CLA') {
diff --git a/sonar-server/src/main/less/component-viewer.less b/sonar-server/src/main/less/component-viewer.less
index 03adee5ec97..2fed3795c7a 100644
--- a/sonar-server/src/main/less/component-viewer.less
+++ b/sonar-server/src/main/less/component-viewer.less
@@ -16,29 +16,41 @@
   float: left;
   width: @workspaceWidth;
   .box-sizing(border-box);
+
+  a:hover { text-decoration: underline; }
+}
+
+.component-viewer-workspace-list {
+  margin: 8px 0;
 }
 
 .component-viewer-workspace-item {
-  height: 30px;
-  line-height: 30px;
   padding: 0 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 
-  &:first-child {
-    border-bottom: 1px solid @barBorderColor;
-  }
+  &:first-child > a { font-weight: bold; }
+}
 
-  &:last-child {
-    font-weight: bold;
-  }
+.component-viewer-workspace-item + .component-viewer-workspace-item {
+  margin-top: 10px;
 }
 
 .component-viewer-workspace-transition {
 
 }
 
+.component-viewer-workspace-options {
+  margin-top: 5px;
+  margin-left: 21px;
+  padding-left: 10px;
+  border-left: 3px solid darken(@barBorderColor, 10%);
+}
+
+.component-viewer-workspace-option {
+  padding: 3px 0;
+
+  &.active > a { font-weight: bold; }
+}
+
 
 .component-viewer-source {
   border-left: @workspaceWidth solid @barBackgroundColor;
@@ -153,16 +165,42 @@
 }
 
 
+@popupArrowSize: 8px;
+
 .component-viewer-popup {
   position: absolute;
   z-index: 100;
-  left: 0;
-  width: @workspaceWidth;
+  margin-top: -16px;
+  margin-left: @popupArrowSize;
   padding: 10px;
-  border-top: 1px solid @barBorderColor;
-  border-bottom: 1px solid @barBorderColor;
+  border: 1px solid @barBorderColor;
+  border-radius: 3px;
   .box-sizing(border-box);
   background-color: @white;
+  box-shadow: @defaultShadow;
+}
+
+.component-viewer-popup-arrow,
+.component-viewer-popup-arrow:after {
+  position: absolute;
+  display: block;
+  .size(0, 0);
+  border: @popupArrowSize solid transparent;
+}
+
+.component-viewer-popup-arrow {
+  top: 15px;
+  left: -@popupArrowSize;
+  border-left-width: 0;
+  border-right-color: @barBorderColor;
+
+  &:after {
+    content: " ";
+    left: 1px;
+    bottom: -@popupArrowSize;
+    border-left-width: 0;
+    border-right-color: @white;
+  }
 }
 
 .component-viewer-popup-section + .component-viewer-popup-section {
@@ -170,11 +208,43 @@
 }
 
 .component-viewer-popup-section-title {
-
+  color: #777;
+  font-size: @smallFontSize;
 }
 
 .component-viewer-popup-list {
   margin-top: 5px;
+}
+
+.component-viewer-popup-test {
+  position: relative;
+  display: block;
+  height: 24px;
+  line-height: 24px;
+
+  &:hover {
+    .component-viewer-popup-test-name { text-decoration: underline; }
+  }
+}
+
+.component-viewer-popup-test-name {
+  display: block;
+  width: 240px;
+  border-left: 20px solid transparent;
+  border-right: 44px solid transparent;
+  .box-sizing(border-box);
+}
+
+.component-viewer-popup-test-status {
+  position: absolute;
+  top: 0; left: 0;
+  line-height: 24px;
+}
+
+.component-viewer-popup-test-duration {
+  position: absolute;
+  top: 0; right: 0;
+  color: #777;
   font-size: @smallFontSize;
 }