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

Jenkins Core: Change Jenkins configuration UI from tables to divs

    XMLWordPrintable

    Details

    • Similar Issues:
    • Released As:
      2.264

      Description

      Report all issues with a complete plugin list (reporting this as an issue in the changelog isn't helping anyone)

      JENKINS_HOST=username:password@myhost.com:port
      curl -sSL "http://$JENKINS_HOST/pluginManager/api/xml?depth=1&xpath=/*/*/shortName|/*/*/version&wrapper=plugins" | perl -pe 's/.*?<shortName>([\w-]+).*?<version>([^<]+)()(<\/\w+>)+/\1 \2\n/g'|sed 's/ /:/'
       

      Check if your plugin already has an issue reported https://issues.jenkins.io/browse/JENKINS-64184?filter=22840 (artifactory plugin is https://github.com/jfrog/jenkins-artifactory-plugin/issues/350

      If you know which plugin is causing the issue report a new issue, including steps to reproduce and screenshots and label it with 'tables-to-divs-regression'

       

      Historically, jenkins's jelly framework generated lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

       

      Here's one example from Windows 10's settings:

      Note that the label for a field is above the field – not to the left of the field.

      Here's a much older UI from Windows:

      Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

       

      Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

       

      Examples can be seen in macOS, Maemo / MeeGo, and pretty much every system (including Chrome / Firefox / Android).

       

      This issue tracked the core jelly changes made to switch from generating tables to generating divs.

        Attachments

          Issue Links

            Activity

            jsoref Josh Soref created issue -
            jsoref Josh Soref made changes -
            Field Original Value New Value
            Assignee Josh Soref [ jsoref ]
            jsoref Josh Soref made changes -
            Status Open [ 1 ] In Progress [ 3 ]
            jsoref Josh Soref made changes -
            Link This issue relates to JENKINS-55787 [ JENKINS-55787 ]
            oleg_nenashev Oleg Nenashev made changes -
            Labels accessibility ux ux-sig
            oleg_nenashev Oleg Nenashev made changes -
            Summary Change jenkins configuration ui from tables to divs Change Jenkins configuration UI from tables to divs
            oleg_nenashev Oleg Nenashev made changes -
            Priority Minor [ 4 ] Major [ 3 ]
            oleg_nenashev Oleg Nenashev made changes -
            Epic Link JENKINS-62437 [ 206431 ]
            oleg_nenashev Oleg Nenashev made changes -
            Summary Change Jenkins configuration UI from tables to divs Jenkins Core: Change Jenkins configuration UI from tables to divs
            zbynek Zbynek Konecny made changes -
            Description Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            fqueiruga Félix Queiruga Balado made changes -
            Link This issue causes JENKINS-62464 [ JENKINS-62464 ]
            timja Tim Jacomb made changes -
            Status In Progress [ 3 ] In Review [ 10005 ]
            kinow Bruno P. Kinoshita made changes -
            Link This issue causes JENKINS-62806 [ JENKINS-62806 ]
            jsoref Josh Soref made changes -
            Resolution Fixed [ 1 ]
            Status In Review [ 10005 ] Fixed but Unreleased [ 10203 ]
            timja Tim Jacomb made changes -
            Released As 2.264
            Status Fixed but Unreleased [ 10203 ] Resolved [ 5 ]
            timja Tim Jacomb made changes -
            Description Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            # To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            timja Tim Jacomb made changes -
            Description # To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            h1. To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            jsoref Josh Soref made changes -
            Description h1. To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Currently jenkins's jelly framework generates lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            I can provide examples from macOS, Maemo/MeeGo, and pretty much every system (including Chrome/Firefox/Android). I happen to be using a Windows 10 laptop today (snow day), but normally I use macOS / Android.
            h1. To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Historically, jenkins's jelly framework generated lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            Examples can be seen in macOS, Maemo / MeeGo, and pretty much every system (including Chrome / Firefox / Android).

             

            This issue tracked the core jelly changes made to switch from generating tables to generating divs.
            timja Tim Jacomb made changes -
            Description h1. To those reporting issues against this epic in the changelog, it's not useful, please report a new issue with a full list of installed plugins as this is plugin specific

             

            Historically, jenkins's jelly framework generated lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            Examples can be seen in macOS, Maemo / MeeGo, and pretty much every system (including Chrome / Firefox / Android).

             

            This issue tracked the core jelly changes made to switch from generating tables to generating divs.
            h1. Report all issues with a complete plugin list (reporting this as an issue in the changelog isn't helping anyone)

            {code}
            JENKINS_HOST=username:password@myhost.com:port
            curl -sSL "http://$JENKINS_HOST/pluginManager/api/xml?depth=1&xpath=/*/*/shortName|/*/*/version&wrapper=plugins" | perl -pe 's/.*?<shortName>([\w-]+).*?<version>([^<]+)()(<\/\w+>)+/\1 \2\n/g'|sed 's/ /:/'
             {code}

            h2. Check if your plugin already has an issue reported https://issues.jenkins.io/browse/JENKINS-64184?filter=22840 (artifactory plugin is https://github.com/jfrog/jenkins-artifactory-plugin/issues/350

            h2. If you know which plugin is causing the issue report a new issue, including steps to reproduce and screenshots and label it with 'tables-to-divs-regression'

             

            Historically, jenkins's jelly framework generated lots of tables. These tables are very mobile hostile. The ui it generates is also not in line with modern UIs.

             

            Here's one example from Windows 10's settings:

            !image-2019-02-12-15-44-44-739.png|width=228,height=278!

            Note that the label for a field is above the field – not to the left of the field.

            Here's a much older UI from Windows:

            !image-2019-02-12-15-45-51-351.png|width=301,height=306!

            Note that the labels for checkboxes/radios are to the right of the buttons, not to their left (* with RTL layouts, this changes, but that's due to mirroring and applies to almost everything).

             

            Even so, labels for other things are above, not to their left (see this example for invitation duration – which is also pre Windows 10):

            !image-2019-02-12-15-46-51-006.png|width=333,height=232!

             

            Examples can be seen in macOS, Maemo / MeeGo, and pretty much every system (including Chrome / Firefox / Android).

             

            This issue tracked the core jelly changes made to switch from generating tables to generating divs.
            ikedam ikedam made changes -
            Link This issue causes JENKINS-64189 [ JENKINS-64189 ]

              People

              Assignee:
              jsoref Josh Soref
              Reporter:
              jsoref Josh Soref
              Votes:
              0 Vote for this issue
              Watchers:
              12 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved: