Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-72072

Branch name crawls away from mouse pointer in MultiBranch pipeline

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Minor Minor
    • branch-api-plugin
    • None

      Hello 👋

       

      Here comes a funny UI bug:

      First, it is browser dependant. I cannot reproduce it on FireFox, but can reproduce on Chromium based browsers.

      In a MultiBranch pipeline, under certain circumstances, the job's name can crawl away from the mouse pointer, making it impossible to click it.

       

      Note that this bug totally depends on the browser's width. If you reduce it enough to have a "card layout" for mobile, the bug cannot be reproduced anymore.

       

      And if you go full screen on a wide monitor, the bug cannot be reproduced again.

       

      If you zoom out, the bug doesn't appear either, which is a workaround for that bug.

      And basically, there is a correlation between the browser's width and the length of the job name allowing to trigger the bug. The smaller the width, the smaller the required job name.

      While investigating, I found out that it is probably due to that small menu added on the right side of the job's name when hovering:

      Which comes from using the `model-link` CSS class.

      Going further in the analysis, I saw in the table that other elements had such links, but were not impacted by the bug, such as elements from the Last Success column.

      Having a look at more details, it looks like these elements have the following CSS classes for the a elements: jenkins-table_link jenkins-table_badge model-link inside. OTOH, the a elements in the name column only have the model-link inside classes.

      Using the Developer Tools in the browser, if you add the missing classes in the Name column, the bug cannot be triggered anymore.

      I have used

      ```

      org.kohsuke.stapler.jelly.JellyFacet.TRACE=trueorg.kohsuke.stapler.jelly.ReallyStaticTagLibrary.EMIT_LOCATION=true

      ```

      to identify the possible source of this, and it led me to:

      {{https://github.com/jenkinsci/branch-api-plugin/blob/717130d4f81663f6bd1f1f7fc272d29ad833847e/src/main/resources/jenkins/branch/ItemColumn/column.jelly }}

      which indeed seems to be missing those classes.{{}}

          [JENKINS-72072] Branch name crawls away from mouse pointer in MultiBranch pipeline

          Antoine Neveux created issue -
          Mark Waite made changes -
          Link New: This issue duplicates JENKINS-72026 [ JENKINS-72026 ]
          Mark Waite made changes -
          Resolution New: Duplicate [ 3 ]
          Status Original: Open [ 1 ] New: Closed [ 6 ]
          Antoine Neveux made changes -
          Description Original: Hello 👋

           

          Here comes a funny UI bug:

          First, it is browser dependant. I cannot reproduce it on FireFox, but can reproduce on Chromium based browsers.

          In a MultiBranch pipeline, under certain circumstances, the job's name can crawl away from the mouse pointer, making it impossible to click it. See this short video showing it:

           

          !bug2.gif!

          Note that this bug totally depends on the browser's width. If you reduce it enough to have a "card layout" for mobile, the bug cannot be reproduced anymore:

          !nobug1.gif!

          And if you go full screen on a wide monitor, the bug cannot be reproduced again:

          !nobug2.gif!

          If you zoom out, the bug doesn't appear either, which is a workaround for that bug.

          And basically, there is a correlation between the browser's width and the length of the job name allowing to trigger the bug. The smaller the width, the smaller the required job name.

          While investigating, I found out that it is probably due to that small menu added on the right side of the job's name when hovering:

          !image-2023-09-25-15-56-40-270.png!

          Which comes from using the `model-link` CSS class.

          Going further in the analysis, I saw in the table that other elements had such links, but were not impacted by the bug, such as elements from the Last Success column.

          Having a look at more details, it looks like these elements have the following CSS classes for the {{a}} elements: {{{}jenkins-table__link jenkins-table__badge model-link inside{}}}. OTOH, the {{a}} elements in the {{name}} column only have the {{model-link inside}} classes.

          Using the Developer Tools in the browser, if you add the missing classes in the Name column, the bug cannot be triggered anymore.

          I have used

          ```

          {{org.kohsuke.stapler.jelly.JellyFacet.TRACE=true}}{{org.kohsuke.stapler.jelly.ReallyStaticTagLibrary.EMIT_LOCATION=true}}

          ```

          to identify the possible source of this, and it led me to:

          {{https://github.com/jenkinsci/branch-api-plugin/blob/717130d4f81663f6bd1f1f7fc272d29ad833847e/src/main/resources/jenkins/branch/ItemColumn/column.jelly }}

          which indeed seems to be missing those classes.{{}}
          New: Hello 👋

           

          Here comes a funny UI bug:

          First, it is browser dependant. I cannot reproduce it on FireFox, but can reproduce on Chromium based browsers.

          In a MultiBranch pipeline, under certain circumstances, the job's name can crawl away from the mouse pointer, making it impossible to click it.

           

          Note that this bug totally depends on the browser's width. If you reduce it enough to have a "card layout" for mobile, the bug cannot be reproduced anymore.

           

          And if you go full screen on a wide monitor, the bug cannot be reproduced again.

           

          If you zoom out, the bug doesn't appear either, which is a workaround for that bug.

          And basically, there is a correlation between the browser's width and the length of the job name allowing to trigger the bug. The smaller the width, the smaller the required job name.

          While investigating, I found out that it is probably due to that small menu added on the right side of the job's name when hovering:

          !image-2023-09-25-15-56-40-270.png!

          Which comes from using the `model-link` CSS class.

          Going further in the analysis, I saw in the table that other elements had such links, but were not impacted by the bug, such as elements from the Last Success column.

          Having a look at more details, it looks like these elements have the following CSS classes for the {{a}} elements: {{{}jenkins-table_{_}link jenkins-table{_}_badge model-link inside{}}}. OTOH, the {{a}} elements in the {{name}} column only have the {{model-link inside}} classes.

          Using the Developer Tools in the browser, if you add the missing classes in the Name column, the bug cannot be triggered anymore.

          I have used

          ```

          {{{}org.kohsuke.stapler.jelly.JellyFacet.TRACE=true{}}}{{{}org.kohsuke.stapler.jelly.ReallyStaticTagLibrary.EMIT_LOCATION=true{}}}

          ```

          to identify the possible source of this, and it led me to:

          {{[https://github.com/jenkinsci/branch-api-plugin/blob/717130d4f81663f6bd1f1f7fc272d29ad833847e/src/main/resources/jenkins/branch/ItemColumn/column.jelly] }}

          which indeed seems to be missing those classes.\{{}}
          Antoine Neveux made changes -
          Attachment Original: bug2.gif [ 61188 ]
          Antoine Neveux made changes -
          Attachment Original: nobug2.gif [ 61186 ]
          Antoine Neveux made changes -
          Attachment Original: nobug1.gif [ 61187 ]

            Unassigned Unassigned
            aneveux Antoine Neveux
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved: