SONAR-9690 Improve positioning of secondary locations markers

3 files changed, 27 insertions, 5 deletions

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.js b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.js
index ad71197cf9c..4cedfd753c4 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.js
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineCode.js
@@ -136,12 +136,16 @@ export default class LineCode extends React.PureComponent {
     }
   };
 
-  renderMarker(index /*: number */, message /*: ?string */) {
+  renderMarker(index /*: number */, message /*: ?string */, leading /*: boolean */ = false) {
     const { onLocationSelect } = this.props;
     const onClick = onLocationSelect ? () => onLocationSelect(index) : undefined;
     const ref = message != null ? node => (this.activeMarkerNode = node) : undefined;
     return (
-      <LocationIndex key={`marker-${index}`} onClick={onClick} selected={message != null}>
+      <LocationIndex
+        key={`marker-${index}`}
+        leading={leading}
+        onClick={onClick}
+        selected={message != null}>
         <span href="#" ref={ref}>
           {index + 1}
         </span>
@@ -193,6 +197,11 @@ export default class LineCode extends React.PureComponent {
     });
 
     const renderedTokens = [];
+
+    // track if the first marker is displayed before the source code
+    // set `false` for the first token in a row
+    let leadingMarker = false;
+
     tokens.forEach((token, index) => {
       if (token.markers.length > 0) {
         token.markers.forEach(marker => {
@@ -200,7 +209,7 @@ export default class LineCode extends React.PureComponent {
             highlightedLocationMessage != null && highlightedLocationMessage.index === marker
               ? highlightedLocationMessage.text
               : null;
-          renderedTokens.push(this.renderMarker(marker, message));
+          renderedTokens.push(this.renderMarker(marker, message, leadingMarker));
         });
       }
       renderedTokens.push(
@@ -208,6 +217,9 @@ export default class LineCode extends React.PureComponent {
           {token.text}
         </span>
       );
+
+      // keep leadingMarker truthy if previous token has only whitespaces
+      leadingMarker = (index === 0 ? true : leadingMarker) && !token.text.trim().length;
     });
 
     return (
diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.css b/server/sonar-web/src/main/js/components/common/LocationIndex.css
index 73b5cd8986e..a1da0ffdefd 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.css
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.css
@@ -21,6 +21,12 @@
   background-color: #ccc;
 }
 
+.location-index.is-leading {
+  position: absolute;
+  margin: 1px 0 0 -4px !important;
+  transform: translateX(-100%);
+}
+
 .location-index[tabindex] {
   cursor: pointer;
 }
diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.js b/server/sonar-web/src/main/js/components/common/LocationIndex.js
index 2effb6e44ca..43ddc0de0bf 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.js
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.js
@@ -25,18 +25,22 @@ import './LocationIndex.css';
 /*::
 type Props = {
   children?: React.Element<*>,
+  leading?: boolean,
   onClick?: () => void,
   selected?: boolean
 };
 */
 
 export default function LocationIndex(props /*: Props */) {
-  const { children, onClick, selected, ...other } = props;
+  const { children, leading, onClick, selected, ...other } = props;
   const clickAttributes = onClick ? { onClick, role: 'button', tabIndex: 0 } : {};
 
   // put {...others} because Tooltip sets some event handlers
   return (
-    <div className={classNames('location-index', { selected })} {...clickAttributes} {...other}>
+    <div
+      className={classNames('location-index', { 'is-leading': leading, selected })}
+      {...clickAttributes}
+      {...other}>
       {children}
     </div>
   );