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

Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)

    XMLWordPrintable

Details

    • Bug
    • Status: Closed (View Workflow)
    • Minor
    • Resolution: Fixed
    • core
    • Jenkins 2.332.1
      Mozilla Firefox 91.8.0esr
    • 2.349

    Description

      The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

      <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
      

      and this CSS rule applies to it:

      .jenkins-table__link, .jenkins-table .sortheader {
          display: inline-flex;
      }
      

      Microsoft Edge 100.0.1185.29 renders it nicely:

      Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first <wbr> tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically:

      I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

      If I disable display: inline-flex; in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

      Alternatively, if I keep the original CSS rule but replace each <wbr> with &#x200B;, then Firefox 91.8.0esr renders like this:

      Attachments

        1. after.png
          after.png
          30 kB
        2. before.png
          before.png
          35 kB
        3. edge-100.0.1185.29.png
          edge-100.0.1185.29.png
          18 kB
        4. firefox-91.8.0esr.png
          firefox-91.8.0esr.png
          16 kB
        5. firefox-91.8.0esr-without-inline-flex.png
          firefox-91.8.0esr-without-inline-flex.png
          14 kB
        6. firefox-91.8.0esr-ZWSP.png
          firefox-91.8.0esr-ZWSP.png
          14 kB

        Issue Links

          Activity

            kon Kalle Niemitalo created issue -
            kon Kalle Niemitalo made changes -
            Field Original Value New Value
            Labels css
            kon Kalle Niemitalo made changes -
            Description The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            kon Kalle Niemitalo made changes -
            Description The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the part before the first {{<wbr>}} tag to two lines, and then renders the rest at the right side of that:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            kon Kalle Niemitalo made changes -
            Description The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            The build history page has this hyperlink in a table cell (redacted by changing letters and digits to x and 1):

            {code:HTML}
            <a class="jenkins-table__link model-link inside" href="/jenkins/job/XXX/job/xxxxxxxxxxxx-xxxxxxxx-xxxxxxxxxx/job/xxxxxxx%252FXXXXX-111_xxxxxxxxxxxxxxxxx/">Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx<wbr>/XXXXX<wbr>-111<wbr>_xxxxxxxxxxxxxxxxx</a>
            {code}

            and this CSS rule applies to it:

            {code:CSS}
            .jenkins-table__link, .jenkins-table .sortheader {
                display: inline-flex;
            }
            {code}

            Microsoft Edge 100.0.1185.29 renders it nicely:

            !edge-100.0.1185.29.png|thumbnail!

            Mozilla Firefox 91.8.0esr however breaks the "Xx Xxxxxx » Xxxxxxxxxxxx xxxxxxxx xxxxxxxxxx » xxxxxxx" part (before the first {{<wbr>}} tag) to two lines, and then renders the rest "/XXXXX-111_xxxxxxxxxxxxxxxxx" at the right side of that, even centering it vertically:

            !firefox-91.8.0esr.png|thumbnail!

            I don't know whether that is a Firefox bug or what, but perhaps the compatibility can be improved somehow.

            If I disable {{display: inline-flex;}} in the CSS rule, then the line breaks look a lot nicer in Firefox 91.8.0esr:

            !firefox-91.8.0esr-without-inline-flex.png|thumbnail!

            Alternatively, if I keep the original CSS rule but replace each {{<wbr>}} with {{&amp;#x200B;}}, then Firefox 91.8.0esr renders like this:

            !firefox-91.8.0esr-ZWSP.png|thumbnail!
            kon Kalle Niemitalo made changes -
            Summary inline-flex wbr oddity on Build history page using Firefox 91.8.0esr Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex
            basil Basil Crow added a comment -

            kon Is this a recent regression or a long-standing issue? If it is a regression, do you know the last working version?

            basil Basil Crow added a comment - kon Is this a recent regression or a long-standing issue? If it is a regression, do you know the last working version?
            basil Basil Crow made changes -
            Labels css css ux

            I don't remember seeing this before, but I might just have not noticed it, so I can't tell for sure. The previous big upgrade was from Jenkins 2.319.3, I think. There has been a Firefox ESR upgrade as well.

            I suppose I should test with the latest non-ESR version of Firefox – if that works differently, then a Firefox bug report should already exist.

            kon Kalle Niemitalo added a comment - I don't remember seeing this before, but I might just have not noticed it, so I can't tell for sure. The previous big upgrade was from Jenkins 2.319.3, I think. There has been a Firefox ESR upgrade as well. I suppose I should test with the latest non-ESR version of Firefox – if that works differently, then a Firefox bug report should already exist.
            basil Basil Crow added a comment -

            I don't remember seeing this before, but I might just have not noticed it, so I can't tell for sure.

            OK, I am applying the regression label out of an abundance of caution, but if it turns out this is a long-standing issue it can be removed.

            basil Basil Crow added a comment - I don't remember seeing this before, but I might just have not noticed it, so I can't tell for sure. OK, I am applying the regression label out of an abundance of caution, but if it turns out this is a long-standing issue it can be removed.
            basil Basil Crow made changes -
            Labels css ux regression ux

            Firefox Developer Edition 100.0b3 breaks lines the same way as Firefox 91.8.0esr.

            kon Kalle Niemitalo added a comment - Firefox Developer Edition 100.0b3 breaks lines the same way as Firefox 91.8.0esr.

            display: inline-flex was added in jenkinsci/jenkins#5851, which was merged in jenkins-2.321.

            kon Kalle Niemitalo added a comment - display: inline-flex was added in jenkinsci/jenkins#5851 , which was merged in jenkins-2.321.
            basil Basil Crow added a comment -

            kon Thank you very much for identifying the culprit; that is very helpful to us. Are you able to confirm that with that commit reverted, the problem no longer occurs?

            basil Basil Crow added a comment - kon Thank you very much for identifying the culprit; that is very helpful to us. Are you able to confirm that with that commit reverted, the problem no longer occurs?

            The <wbr> seems to be inserted by hudson.Functions.breakableString, which was last modified on 2014-04-30. It is called from jenkins.widgets.BuildListTable.calculate, and this call was last modified on 2013-12-06. The resulting parentFullDisplayName is used in buildListTable.jelly, and the jenkins-table__link CSS class was added there in jenkinsci/jenkins#5851.

            kon Kalle Niemitalo added a comment - The <wbr> seems to be inserted by hudson.Functions.breakableString, which was last modified on 2014-04-30. It is called from jenkins.widgets.BuildListTable.calculate, and this call was last modified on 2013-12-06. The resulting parentFullDisplayName is used in buildListTable.jelly, and the jenkins-table__link CSS class was added there in jenkinsci/jenkins#5851 .

            I am not currently able to test custom versions of the Jenkins core.

            kon Kalle Niemitalo added a comment - I am not currently able to test custom versions of the Jenkins core.
            basil Basil Crow made changes -
            Summary Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex Strange line breaks on Firefox 91.8.0esr when Build History uses wbr within display: inline-flex (regression in 2.321)
            basil Basil Crow made changes -
            Link This issue is caused by JENKINS-68229 [ JENKINS-68229 ]
            basil Basil Crow added a comment -

            Thanks kon. If I'm not asking too much, could I trouble you to confirm that the issue is present in 2.321 and absent in 2.320? If this is too much trouble, I will try to reproduce myself later next week.

            basil Basil Crow added a comment - Thanks kon . If I'm not asking too much, could I trouble you to confirm that the issue is present in 2.321 and absent in 2.320? If this is too much trouble, I will try to reproduce myself later next week.
            basil Basil Crow added a comment -

            I can reproduce the problem by creating a job with the name you have given in the folder structure you have given, then creating a list view containing only that job and then visiting the list view. I have attached before and after screenshots. I can confirm the bug was introduced in JENKINS-68229.

            basil Basil Crow added a comment - I can reproduce the problem by creating a job with the name you have given in the folder structure you have given, then creating a list view containing only that job and then visiting the list view. I have attached before and after screenshots. I can confirm the bug was introduced in JENKINS-68229 .
            basil Basil Crow added a comment -

            BTW I am running Firefox 99.0 on Ubuntu 20.04.4 LTS x86_64.

            basil Basil Crow added a comment - BTW I am running Firefox 99.0 on Ubuntu 20.04.4 LTS x86_64.
            basil Basil Crow made changes -
            Attachment after.png [ 57663 ]
            Attachment before.png [ 57664 ]
            felix_416 Feng-Yi Xue made changes -
            Assignee Feng-Yi Xue [ JIRAUSER140364 ]
            notmyfault Alexander Brandes made changes -
            Remote Link This issue links to "https://github.com/jenkinsci/jenkins/pull/6542 (Web Link)" [ 27720 ]
            notmyfault Alexander Brandes made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            notmyfault Alexander Brandes made changes -
            Status In Progress [ 3 ] In Review [ 10005 ]
            basil Basil Crow made changes -
            Released As 2.349
            Resolution Fixed [ 1 ]
            Status In Review [ 10005 ] Fixed but Unreleased [ 10203 ]
            markewaite Mark Waite made changes -
            Status Fixed but Unreleased [ 10203 ] Closed [ 6 ]

            People

              felix_416 Feng-Yi Xue
              kon Kalle Niemitalo
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: