Highlight deep-linked log line (#833)

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLine.tsx

@@ -35,18 +35,14 @@ export const ConsoleLine = memo(function ConsoleLine(props: ConsoleLineProps) {
       className="console-output-line"
       key={`console-line-pre${props.lineNumber}`}
     >
-      <div
-        className="console-output-line-anchor"
-        id={`log-${props.lineNumber}`}
-        key={`${props.lineNumber}-anchor`}
-      />
       <div
         className="console-output-line"
         key={`${props.lineNumber}-body`}
         ref={ref}
       >
         <a
           className="console-line-number"
+          id={`log-${props.lineNumber}`}
           href={`?start-byte=${props.startByte}&selected-node=${props.stepId}#log-${props.lineNumber}`}
           style={{
             width: Math.max(9 * String(props.lineNumber).length, 30) + "px",

src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogStream.tsx

@@ -81,6 +81,9 @@ export default function ConsoleLogStream(props: ConsoleLogStreamProps) {
       const element = document.getElementById(`log-${lineNumber}`);
       if (element) {
         element.scrollIntoView({ behavior: "smooth", block: "center" });
+        const hash = location.hash;
+        location.hash = "";
+        location.hash = hash;
       }
     }
   }, []);

src/main/frontend/pipeline-console-view/pipeline-console/main/console-log-card.scss

@@ -124,25 +124,39 @@ pre.console-output-line {
 
 a.console-line-number {
   text-align: right;
-  margin-right: 14px;
+  margin-right: 0.875rem;
   color: var(--text-color-secondary);
   white-space: nowrap;
   display: inline-block;
   flex-shrink: 0;
   user-select: none;
-}
+  outline: none;
 
-div.console-output-line-anchor {
-  position: relative;
-  // This is the width of the '.jenkins-breadcrumbs' div + a little extra.
-  top: -50px;
-  visibility: hidden;
+  &:target {
+    text-decoration: none;
+    scroll-margin-top: calc(var(--pgv-header-height) + 3.4375rem);
+  }
 }
 
 div.console-output-line {
   position: relative;
   display: flex;
   padding-block: 2px;
+  z-index: 0;
+
+  &:has(:target) {
+    &::before {
+      background-color: color-mix(
+        in srgb,
+        var(--blue) 15%,
+        transparent
+      ) !important;
+      // TODO - var fallback can removed after baseline is moved >= 2.496
+      border: var(--jenkins-border-width, 2px) solid
+        color-mix(in srgb, var(--blue) 10%, transparent);
+      opacity: 1;
+    }
+  }
 
   &::before {
     content: "";
@@ -160,6 +174,7 @@ div.console-output-line {
     opacity: 0;
     transition: opacity var(--standard-transition);
     pointer-events: none;
+    z-index: -1;
   }
 
   &:hover {