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

BlueOcean: when browser size is smaller than pipeline, we're unable to scroll to the beginning of the pipeline

    Details

    • Similar Issues:
    • Sprint:
      Blue Ocean 1.0-rc4, Blue Ocean - 1.1-beta-1, Blue Ocean - 1.1-beta2, Blue Ocean 1.2-beta3, Blue Ocean 1.2-beta4

      Description

      Design brief

      Pipeline should probably overflow on the X axis or we scale it down to fit (to a point) then overflow on X? What happens when the Pipeline is running in this case?

       

      Original request

      BlueOcean: when browser size is smaller than pipeline, we're unable to scroll to the beginning of the pipeline. Chrome

       

      Steps:

      1. create a very long pipeline
      2. open Chrome, and go to the BlueOcean UI for the pipeline
      3. resize the browser to be shorter than the length of the pipeline
      4. try to scroll to the beginning of the pipeline

      Result:

      Notice we're unable to scroll to the start of the pipeline. Now we're unable to select a step and view it's results.

       

      See attached. Scroll bar is not available to scroll to the left of the page.

        Attachments

          Issue Links

            Activity

            Hide
            jamesdumay James Dumay added a comment -

            Thanks for reporting this one. Ill have someone take a look shortly!

            Show
            jamesdumay James Dumay added a comment - Thanks for reporting this one. Ill have someone take a look shortly!
            Hide
            michaelneale Michael Neale added a comment -

            Perhaps any fix (once Brody decides what behavior should be) should be predicated on https://github.com/jenkinsci/blueocean-plugin/pull/839 being merged I think. 

            Show
            michaelneale Michael Neale added a comment - Perhaps any fix (once Brody decides what behavior should be) should be predicated on https://github.com/jenkinsci/blueocean-plugin/pull/839  being merged I think. 
            Hide
            jamesdumay James Dumay added a comment -

            Josh McDonald ive had a few reports of this one come through - could you chat with Brody Maclean about a fix for this?

            Show
            jamesdumay James Dumay added a comment - Josh McDonald ive had a few reports of this one come through - could you chat with Brody Maclean about a fix for this?
            Hide
            brody Brody Maclean added a comment -

            James Dumay Josh McDonald

            See http://codepen.io/brody/pen/qreqXe

            • On load display top left side of pipeline with overflow: scroll;
            • Make sure theres 80px of margin to left and right of pipeline so it doesn't sit flush with the edge.

            Issues

            • Browser swipe left/right gestures to go back/forward may fire when scrolling to the beginning/end of the pipeline.
            • Scrolling down slightly to view parallels means you lose context of where you are in the pipeline.
              – Partial solution is to give the pipeline container `height: calc(100vh - 120px);` (window height minus nav height), that way you can see the scrollbars, so you have some context of where you are.
            • May need to re-think the way pipelines are visualised as this is too hacky.
            Show
            brody Brody Maclean added a comment - James Dumay Josh McDonald See http://codepen.io/brody/pen/qreqXe On load display top left side of pipeline with overflow: scroll; Make sure theres 80px of margin to left and right of pipeline so it doesn't sit flush with the edge. Issues Browser swipe left/right gestures to go back/forward may fire when scrolling to the beginning/end of the pipeline. Scrolling down slightly to view parallels means you lose context of where you are in the pipeline. – Partial solution is to give the pipeline container `height: calc(100vh - 120px);` (window height minus nav height), that way you can see the scrollbars, so you have some context of where you are. May need to re-think the way pipelines are visualised as this is too hacky.
            Show
            sophistifunk Josh McDonald added a comment - https://github.com/jenkinsci/blueocean-plugin/pull/1288
            Hide
            dawg Martin Nowak added a comment - - edited

            It wasn't necessary to limit the height of the container to fix this bug.

            > Scrolling down slightly to view parallels means you lose context of where you are in the pipeline.
            – Partial solution is to give the pipeline container `height: calc(100vh - 120px);` (window height minus nav height), that way you can see the scrollbars, so you have some context of where you are.

            Double y scrollbars are really annoying (only one is keyboard navigable). The mentioned issue hardly seems to justify that solution. People should roughly know to what part their steps belong to, and as PgUp/PgDown works fine with a single y-scrollbar, it's really easy to check.

            A fixed header that sticks while scrolling could be another solution, but I hardly think it's necessary.

            Some visual cues (e.g. a colored border) on the left/right side of the container when sth. horizontally scrolled out of view might be enough.

            Show
            dawg Martin Nowak added a comment - - edited It wasn't necessary to limit the height of the container to fix this bug. > Scrolling down slightly to view parallels means you lose context of where you are in the pipeline. – Partial solution is to give the pipeline container `height: calc(100vh - 120px);` (window height minus nav height), that way you can see the scrollbars, so you have some context of where you are. Double y scrollbars are really annoying (only one is keyboard navigable). The mentioned issue hardly seems to justify that solution. People should roughly know to what part their steps belong to, and as PgUp/PgDown works fine with a single y-scrollbar, it's really easy to check. A fixed header that sticks while scrolling could be another solution, but I hardly think it's necessary. Some visual cues (e.g. a colored border) on the left/right side of the container when sth. horizontally scrolled out of view might be enough.
            Show
            dawg Martin Nowak added a comment - https://github.com/jenkinsci/blueocean-plugin/pull/1439

              People

              • Assignee:
                sophistifunk Josh McDonald
                Reporter:
                cuvien Nguyen Nguyen
              • Votes:
                3 Vote for this issue
                Watchers:
                9 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: