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

Build progress bar sometimes does not use full width

    XMLWordPrintable

Details

    Description

      Sometimes, the build progress bar does not take up the full width it is allocated, resulting in screenshots like https://github.com/jenkinsci/jenkins/pull/6562#issuecomment-1133440939 or https://gitter.im/jenkinsci/ux-sig?at=62912c2cef00bd1dc6011778

      janfaracik in https://gitter.im/jenkinsci/ux-sig?at=629157844e38f759e28ff91c proposes an issue with Bootstrap.

      Steps to reproduce

      1. Install Jenkins 2.350
      2. Install Warnings NG plugin 9.12.0 and its dependency bootstrap5-api 5.1.3-7
      3. Create a freestyle job
      4. Add a build step that sleeps for 20 seconds (e.g. shell sleep 20 )
      5. Add a post-build step that "Record compiler warnings and static analysis results", leave all options default
      6. Save
      7. Trigger 2 or more builds
      8. Wait a while

      Expected result

      Sane progress bar

      Actual result

      See attached

      Attachments

        Activity

          basil Basil Crow added a comment -

          Adding the ux-untriaged label because this regression ticket lacks the following:

          • Description of the release where the regression occurred
          • Description of the commit that introduced the regression
          • "Caused By" link in Jira
          • Notification of regression to original author
          basil Basil Crow added a comment - Adding the ux-untriaged label because this regression ticket lacks the following: Description of the release where the regression occurred Description of the commit that introduced the regression "Caused By" link in Jira Notification of regression to original author
          danielbeck Daniel Beck added a comment -

          The affected page includes bootstrap-custom-build.css , indicating https://github.com/jenkinsci/bootstrap5-api-plugin/blob/d943170ed9fa95805670898346284eadceca0a7b/etc/bootstrap-custom-build.scss#L56 could be the culprit.

          danielbeck Daniel Beck added a comment - The affected page includes bootstrap-custom-build.css , indicating https://github.com/jenkinsci/bootstrap5-api-plugin/blob/d943170ed9fa95805670898346284eadceca0a7b/etc/bootstrap-custom-build.scss#L56 could be the culprit.
          basil Basil Crow added a comment -

          How is "sane progress bar" defined? How is the actual result not sane? What commit introduced the problem? What release first contained the problematic commit? These are just some of the many things that need to be answered before this ticket can be considered "triaged".

          basil Basil Crow added a comment - How is "sane progress bar" defined? How is the actual result not sane? What commit introduced the problem? What release first contained the problematic commit? These are just some of the many things that need to be answered before this ticket can be considered "triaged".
          danielbeck Daniel Beck added a comment -

          How is "sane progress bar" defined?

          A progress bar that's not broken.

          How is the actual result not sane? 

          The actual bar is a fraction of the total width and changes size inside the fixed width container.

          What commit introduced the problem? What release first contained the problematic commit?

          n/a, this is why I removed the regression label.

          danielbeck Daniel Beck added a comment - How is "sane progress bar" defined? A progress bar that's not broken. How is the actual result not sane?  The actual bar is a fraction of the total width and changes size inside the fixed width container. What commit introduced the problem? What release first contained the problematic commit? n/a, this is why I removed the regression label.
          basil Basil Crow added a comment -

          I agree that the current progress bar is broken (for some definition of "broken") but my point is that a precise description of the problem will help motivate a precise and targeted fix/solution. Describing how "the actual bar is a fraction of the total width and changes size inside the fixed width container" helps to clarify this. Reversing that into problem statement, the problem could be defined as

          The progress bar is a fraction of the available width, which makes it difficult to estimate actual progress because such an estimation requires the mental mathematics of multiplying the visible progress by the fraction of the width that the progress bar occupies (requiring users to perform fractional arithmetic is generally bad user experience). Additionally, the fact that the progress bar changes size inside a fixed width container is both inconsistent and requires redoing the above mental arithmetic when the window is resized, further harming the user experience.

          One might think this type of thing should be "obvious", but if it were - this ticket wouldn't be open, would it? So making it explicit helps.

          n/a, this is why I removed the regression label.

          +1

          basil Basil Crow added a comment - I agree that the current progress bar is broken (for some definition of "broken") but my point is that a precise description of the problem will help motivate a precise and targeted fix/solution. Describing how "the actual bar is a fraction of the total width and changes size inside the fixed width container" helps to clarify this. Reversing that into problem statement, the problem could be defined as The progress bar is a fraction of the available width, which makes it difficult to estimate actual progress because such an estimation requires the mental mathematics of multiplying the visible progress by the fraction of the width that the progress bar occupies (requiring users to perform fractional arithmetic is generally bad user experience). Additionally, the fact that the progress bar changes size inside a fixed width container is both inconsistent and requires redoing the above mental arithmetic when the window is resized, further harming the user experience. One might think this type of thing should be "obvious", but if it were - this ticket wouldn't be open, would it? So making it explicit helps. n/a, this is why I removed the regression label. +1

          People

            Unassigned Unassigned
            danielbeck Daniel Beck
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated: