SONAR-5460 Refactor out bubble popup component

15 files changed, 148 insertions, 149 deletions

diff --git a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee
index 4277d205433..52ece5db2a9 100644
--- a/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee
+++ b/server/sonar-web/src/main/coffee/coding-rules/views/coding-rules-parameter-popup-view.coffee
@@ -1,13 +1,11 @@
 define [
   'backbone.marionette'
   'templates/coding-rules'
-  'component-viewer/popup'
-#  'component-viewer/utils'
+  'common/popup'
 ], (
   Marionette
   Templates
   Popup
-#  utils
 ) ->
 
   $ = jQuery
diff --git a/server/sonar-web/src/main/coffee/component-viewer/popup.coffee b/server/sonar-web/src/main/coffee/common/popup.coffee
index 939180e37be..abf4e9e8c56 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/popup.coffee
+++ b/server/sonar-web/src/main/coffee/common/popup.coffee
@@ -7,20 +7,20 @@ define [
   $ = jQuery
 
 
-  class CoveragePopupView extends Marionette.ItemView
-    className: 'component-viewer-popup'
+  class PopupView extends Marionette.ItemView
+    className: 'bubble-popup'
 
 
     onRender: ->
       @$el.detach().appendTo $('body')
 
       if @options.bottom
-        @$el.addClass 'component-viewer-popup-bottom'
+        @$el.addClass 'bubble-popup-bottom'
         @$el.css
           top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight()
           left: @options.triggerEl.offset().left
       else if @options.bottomRight
-        @$el.addClass 'component-viewer-popup-bottom-right'
+        @$el.addClass 'bubble-popup-bottom-right'
         @$el.css
           top: @options.triggerEl.offset().top + @options.triggerEl.outerHeight()
           right: $(window).width() - @options.triggerEl.offset().left - @options.triggerEl.outerWidth()
@@ -30,6 +30,6 @@ define [
           left: @options.triggerEl.offset().left + @options.triggerEl.outerWidth()
 
 
-      $('body').on 'click.coverage-popup', =>
-        $('body').off 'click.coverage-popup'
-        @close()
\ No newline at end of file
+      $('body').on 'click.bubble-popup', =>
+        $('body').off 'click.bubble-popup'
+        @close()
diff --git a/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee
index bc9bf899ed6..9311fef5b1c 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/coverage-popup.coffee
@@ -1,7 +1,7 @@
 define [
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/popup'
+  'common/popup'
   'component-viewer/utils'
 ], (
   Marionette
diff --git a/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee
index ccf628a6434..2d6a37a135b 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/covered-files-popup.coffee
@@ -1,7 +1,7 @@
 define [
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/popup'
+  'common/popup'
   'component-viewer/utils'
 ], (
   Marionette
diff --git a/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee
index 1f975a2619e..108da019e95 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/duplication-popup.coffee
@@ -1,7 +1,7 @@
 define [
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/popup'
+  'common/popup'
   'component-viewer/utils'
 ], (
   Marionette
diff --git a/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee
index 303fe28b1e5..f0de0ac50c5 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/line-actions-popup.coffee
@@ -1,7 +1,7 @@
 define [
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/popup'
+  'common/popup'
   'issues/manual-issue-view'
 ], (
   Marionette
diff --git a/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee b/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee
index 2e1cad33c72..0854f1b91e6 100644
--- a/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee
+++ b/server/sonar-web/src/main/coffee/component-viewer/time-changes-popup.coffee
@@ -1,7 +1,7 @@
 define [
   'backbone.marionette'
   'templates/component-viewer'
-  'component-viewer/popup'
+  'common/popup'
 ], (
   Marionette
   Templates
diff --git a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs
index 9bd75541615..0299cedabc2 100644
--- a/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs
+++ b/server/sonar-web/src/main/hbs/coding-rules/coding-rules-parameter-popup.hbs
@@ -1,5 +1,5 @@
-<div class="coding-rules-parameter-full-description component-viewer-popup-container">
-  <div class="component-viewer-popup-title">{{key}}</div>
+<div class="coding-rules-parameter-full-description bubble-popup-container">
+  <div class="bubble-popup-title">{{key}}</div>
 
     {{{htmlDesc}}}
     {{#if defaultValue}}
@@ -9,4 +9,4 @@
     {{/if}}
 </div>
 
-<div class="component-viewer-popup-arrow"></div>
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs b/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs
index dc559ea3edd..be7d99c755a 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/coveragePopup.hbs
@@ -1,12 +1,12 @@
-<div class="component-viewer-popup-container">
-  <div class="component-viewer-popup-title">{{t 'component_viewer.transition.coverage'}}</div>
+<div class="bubble-popup-container">
+  <div class="bubble-popup-title">{{t 'component_viewer.transition.coverage'}}</div>
 
   {{#each testFiles}}
-    <div class="component-viewer-popup-section">
+    <div class="bubble-popup-section">
       <a class="component-viewer-popup-test-file link-action" data-key="{{file.key}}" title="{{file.longName}}">
         {{file.longName}}
       </a>
-      <ul class="component-viewer-popup-list">
+      <ul class="bubble-popup-list">
         {{#each tests}}
           <li class="component-viewer-popup-test" title="{{name}}">
             <i class="component-viewer-popup-test-status {{testStatusIconClass status}}"></i>
@@ -24,4 +24,4 @@
   {{/each}}
 </div>
 
-<div class="component-viewer-popup-arrow"></div>
\ No newline at end of file
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs b/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs
index 4444ac429c2..8161966f29b 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/duplicationPopup.hbs
@@ -1,7 +1,7 @@
-<div class="component-viewer-popup-container">
-  <div class="component-viewer-popup-title">{{t 'component_viewer.transition.duplication'}}</div>
+<div class="bubble-popup-container">
+  <div class="bubble-popup-title">{{t 'component_viewer.transition.duplication'}}</div>
   {{#each duplications}}
-    <div class="component-viewer-popup-section">
+    <div class="bubble-popup-section">
       {{#notEq file.projectName ../component.projectName}}
         <span class="component-viewer-popup-label">{{file.projectName}}</span>
       {{/notEq}}
@@ -23,4 +23,4 @@
   {{/each}}
 </div>
 
-<div class="component-viewer-popup-arrow"></div>
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs
index 0c9ca5b2b05..4d72fef6c15 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/header/covered-files-popup.hbs
@@ -1,9 +1,9 @@
-<div class="component-viewer-popup-container">
+<div class="bubble-popup-container">
   {{#notEq test.status 'ERROR'}}
     {{#notEq test.status 'FAILURE'}}
-      <div class="component-viewer-popup-title">{{t 'component_viewer.transition.covers'}}</div>
+      <div class="bubble-popup-title">{{t 'component_viewer.transition.covers'}}</div>
       {{#each items}}
-        <div class="component-viewer-popup-section">
+        <div class="bubble-popup-section">
           <a class="component-viewer-popup-test-file link-action" data-key="{{key}}" title="{{name}}">{{name}}</a>
           <span class="subtitle">{{tp 'component_viewer.x_lines_are_covered' coveredLines}}</span>
           <br><span class="subtitle" title="{{dir}}">{{dir}}</span>
@@ -15,7 +15,7 @@
   {{/notEq}}
 
   {{#notEq test.status 'OK'}}
-    <div class="component-viewer-popup-title">{{t 'component_viewer.details'}}</div>
+    <div class="bubble-popup-title">{{t 'component_viewer.details'}}</div>
     {{#if test.message}}
       <pre>{{test.message}}</pre>
     {{/if}}
@@ -24,4 +24,4 @@
 
 </div>
 
-<div class="component-viewer-popup-arrow"></div>
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs
index 04e4e6c6457..fa9aae478d7 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/line-options-popup.hbs
@@ -1,15 +1,15 @@
-<div class="component-viewer-popup-container">
-  <div class="component-viewer-popup-title">{{t 'component_viewer.line_actions'}}</div>
+<div class="bubble-popup-container">
+  <div class="bubble-popup-title">{{t 'component_viewer.line_actions'}}</div>
 
-  <div class="component-viewer-popup-section">
+  <div class="bubble-popup-section">
     <a href="#" class="js-get-permalink link-action">{{t 'component_viewer.get_permalink'}}</a>
   </div>
 
   {{#if state.canCreateManualIssue}}
-    <div class="component-viewer-popup-section">
+    <div class="bubble-popup-section">
       <a href="#" class="js-add-manual-issue link-action">{{t 'component_viewer.add_manual_issue'}}</a>
     </div>
   {{/if}}
 </div>
 
-<div class="component-viewer-popup-arrow"></div>
\ No newline at end of file
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs b/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs
index 615164e48cf..f7dc2c30857 100644
--- a/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs
+++ b/server/sonar-web/src/main/hbs/component-viewer/time-changes-popup.hbs
@@ -1,9 +1,9 @@
-<div class="component-viewer-popup-title">Time Changes</div>
+<div class="bubble-popup-title">Time Changes</div>
 
-<ul class="component-viewer-popup-list">
+<ul class="bubble-popup-list">
   {{#each periods}}
     <li><a class="link-action" data-period="{{key}}">{{#if key}}{{../../prefix}}{{/if}} {{label}}</a></li>
   {{/each}}
 </ul>
 
-<div class="component-viewer-popup-arrow"></div>
\ No newline at end of file
+<div class="bubble-popup-arrow"></div>
diff --git a/server/sonar-web/src/main/less/component-viewer.less b/server/sonar-web/src/main/less/component-viewer.less
index 22ae66ac1f7..cba1948e97f 100644
--- a/server/sonar-web/src/main/less/component-viewer.less
+++ b/server/sonar-web/src/main/less/component-viewer.less
@@ -583,115 +583,6 @@
   padding: 10px;
 }
 
-
-
-@popupArrowSize: 8px;
-
-.component-viewer-popup {
-  position: absolute;
-  z-index: 100;
-  margin-top: -16px;
-  margin-left: @popupArrowSize;
-  padding: 10px;
-  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-bottom {
-  margin-top: @popupArrowSize;
-  margin-left: -16px;
-
-  .component-viewer-popup-arrow {
-    top: -@popupArrowSize;
-    left: 15px;
-    border-left-width: @popupArrowSize;
-    border-top-width: 0;
-    border-right-color: transparent;
-    border-bottom-color: @barBorderColor;
-
-    &:after {
-      left: -@popupArrowSize;
-      bottom: -@popupArrowSize - 1px;
-      border-left-width: @popupArrowSize;
-      border-top-width: 0;
-      border-right-color: transparent;
-      border-bottom-color: @white;
-    }
-  }
-}
-
-.component-viewer-popup-bottom-right {
-  .component-viewer-popup-bottom;
-  margin-left: 0;
-  margin-right: -8px;
-
-  .component-viewer-popup-arrow {
-    left: auto;
-    right: 15px;
-  }
-}
-
-.component-viewer-popup-container {
-  max-width: 560px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-.component-viewer-popup-title {
-  margin-bottom: 5px;
-  font-weight: 600;
-}
-
-.component-viewer-popup-section {
-  width: 450px;
-  padding-bottom: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &.fluid {
-    width: auto;
-    max-width: 450px;
-  }
-}
-
-.component-viewer-popup-section + .component-viewer-popup-section,
-.component-viewer-popup-section + .component-viewer-popup-title {
-  margin-top: 10px;
-}
-
-.component-viewer-popup-list {
-  margin-top: 5px;
-
-  & > li { padding: 2px 0; }
-}
-
 .component-viewer-popup-test {
   position: relative;
   display: block;
diff --git a/server/sonar-web/src/main/less/style.less b/server/sonar-web/src/main/less/style.less
index 76bc189793b..adfb0457975 100644
--- a/server/sonar-web/src/main/less/style.less
+++ b/server/sonar-web/src/main/less/style.less
@@ -2900,3 +2900,113 @@ div.rule-title {
   font-weight: normal;
   margin-bottom: 25px;
 }
+
+
+/* ------------------- Bubble popups ----------------- */
+
+@popupArrowSize: 8px;
+
+.bubble-popup {
+  position: absolute;
+  z-index: 100;
+  margin-top: -16px;
+  margin-left: @popupArrowSize;
+  padding: 10px;
+  border: 1px solid @barBorderColor;
+  border-radius: 3px;
+  .box-sizing(border-box);
+  background-color: @white;
+  box-shadow: @defaultShadow;
+}
+
+.bubble-popup-arrow,
+.bubble-popup-arrow:after {
+  position: absolute;
+  display: block;
+  .size(0, 0);
+  border: @popupArrowSize solid transparent;
+}
+
+.bubble-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;
+  }
+}
+
+.bubble-popup-bottom {
+  margin-top: @popupArrowSize;
+  margin-left: -16px;
+
+  .bubble-popup-arrow {
+    top: -@popupArrowSize;
+    left: 15px;
+    border-left-width: @popupArrowSize;
+    border-top-width: 0;
+    border-right-color: transparent;
+    border-bottom-color: @barBorderColor;
+
+    &:after {
+      left: -@popupArrowSize;
+      bottom: -@popupArrowSize - 1px;
+      border-left-width: @popupArrowSize;
+      border-top-width: 0;
+      border-right-color: transparent;
+      border-bottom-color: @white;
+    }
+  }
+}
+
+.bubble-popup-bottom-right {
+  .bubble-popup-bottom;
+  margin-left: 0;
+  margin-right: -8px;
+
+  .bubble-popup-arrow {
+    left: auto;
+    right: 15px;
+  }
+}
+
+.bubble-popup-container {
+  max-width: 560px;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.bubble-popup-title {
+  margin-bottom: 5px;
+  font-weight: 600;
+}
+
+.bubble-popup-section {
+  width: 450px;
+  padding-bottom: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.fluid {
+    width: auto;
+    max-width: 450px;
+  }
+}
+
+.bubble-popup-section + .bubble-popup-section,
+.bubble-popup-section + .bubble-popup-title {
+  margin-top: 10px;
+}
+
+.bubble-popup-list {
+  margin-top: 5px;
+
+  & > li { padding: 2px 0; }
+}