[JENKINS 60920] header breadcrumbs CSS update #4463

fqueiruga · 2020-01-30T15:46:45Z

This PR includes the header and breadcrumb visual updates that came out of the work of the UX SIG.
Explanation for some technical decisions on the issue

NOTE: To enable/disable the change easily without restarting, you can use the /script URL (typically http://localhost:8080/script in local dev mode) and type hudson.Functions.UI_REFRESH=true to enable the new UI or hudson.Functions.UI_REFRESH=false to disable it.

Proposed changelog entries

Major change: visual revamp of the layout and icons of the header bar and breadcrumbs. Instances with plugins that depend on details of the Jenkins layout (e.g. Simple Theme Plugin) may experience UI/layout problems.
Major change: A new header color scheme can be enabled by setting the system property jenkins.ui.refresh to true.

Proposed upgrade guidelines

Instances with plugins that depend on details of the Jenkins layout (e.g. Simple Theme Plugin with custom CSS themes) may experience UI/layout problems. Minor patches to the themes may be required

Submitter checklist

JIRA issue is well described
Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change). Examples
- Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
Appropriate autotests or explanation to why this change has no tests
For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@uhafner
@timja

Maintainer checklist

Before the changes are marked as ready-for-merge:

There are at least 2 approvals for the pull request and no outstanding requests for change
Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
Changelog entries in the PR title and/or Proposed changelog entries are correct
Proper changelog labels are set so that the changelog can be generated automatically
If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
If it would make sense to backport the change to LTS, a JIRA issue should exist and be labeled as lts-candidate

Screenshots

Classic UI on desktop

New UI on desktop

Classic UI on mobile

New UI on mobile

TODOs:

create a jelly helper for using the <svg> tag for sprite icons.
remove comments and port the layout.jelly changes to the html.jelly file.
migrate dimensions to rems. At least for the font-sizes.
fix for ie11
Optional: migrate the breadcrumbs separator and dropdown menu selector icons to svgs.

- Used the material icons svg sprites to deliver the icons - Icons are rendered using a <svg> tag

… style css files

- The new UI can be toggled with the -Dui.enableNewUi=true flag

- Rename the css class namespace from .main-header to .page-header - Page header CSS moved into a modules folder and now included on the new-base-styles.css. This is done to avoid loading a separate file everytime. - Extracted color variables to their own file

- The pageHeader template receives localization strings as props - Missing translation for the admin monitor on the it, bg and pl locales

core/src/main/resources/lib/layout/layout.jelly

timja · 2020-01-30T17:29:41Z

Code looks fine to me, except the commented out code which is on the TODO list, will re-review when TODOs are completed

Tested locally with old and new UI on a mac 13".

batmat · 2020-01-30T21:45:13Z

@fqueiruga test failures look legit

Co-Authored-By: Tim Jacomb <t.jacomb@kainos.com>

- Reverts breadcrumb link styling to use nested selectors instead of the .breadcrumbs__link class. The reason is that several plugins would break. - Shifted margins so that breadcrumbs can be fullwidth in the absence of the auto refresh link

fqueiruga · 2020-02-03T17:16:53Z

I have set up the feature flag but nothing else on the html.jelly file (https://github.com/jenkinsci/jenkins/blob/master/core/src/main/resources/lib/layout/html.jelly).
The reason is that I don't see any references to the header on that file. I'll do more changes if needed.

war/src/main/webapp/images/jenkins-header-logo-new.svg

core/src/main/resources/lib/layout/pageHeader.jelly

war/src/main/less/base/layout-commons.less

war/src/main/webapp/images/jenkins-header-logo-new.svg

uhafner · 2020-02-03T22:04:02Z

Thanks for providing the new styles as PR! It is much simpler to get an impression of the changes now...

Before I am looking into the PR just a few quick impressions: on a plain vanilla Jenkins everything looks really nice! One small thing: If I disable the new UI (using the property) I still get the new breadcrumbs, is that intended? Or should everything be restored to the original state?

Did you try to use it with a theme? I'm using http://afonsof.com/jenkins-material-theme/ on my machine but these kind of themes seem not to work anymore. Even if I disable the new UI with the property, the theme looks weird.

imod · 2020-02-04T04:16:10Z

I use the same theme as @uhafner - but to be honest, I don't think we should take to much care - it does not seem to be maintained anymore

uhafner · 2020-02-04T09:12:12Z

Hmm, the simple theme plugin has > 25000 installations. I'm not sure if it is only the material theme that will break, did you check one of the maintained themes like https://github.com/TobiX/jenkins-neo2-theme of @TobiX still works after the changes?

timja · 2020-02-04T09:17:26Z

I thought it was expected that those plugins will have issues and will need to update? Possibly the need for those will go-away / decrease as the UI is improved / refreshed

core/src/main/resources/jenkins/management/AdministrativeMonitorsDecorator/resources.css

core/src/main/resources/lib/layout/breadcrumbs.css

core/src/main/resources/lib/layout/layout.jelly

war/src/main/less/base/layout-commons.less

fqueiruga · 2020-02-18T16:26:05Z

Thanks Daniel, I'll surface these pieces of design feedback on the next SIG meeting. I find them interesting, especially the pluralization one.

timja · 2020-02-18T17:04:41Z

@daniel-beck ux-sig is now on gitter https://gitter.im/jenkinsci/ux-sig

alecharp

Less files are pretty large, difficult to be sure everything is perfect, but it seems to be working fine. Just a few comments, no blockers.

core/src/main/java/hudson/Functions.java

alecharp · 2020-02-18T16:53:32Z

core/src/main/resources/lib/layout/breadcrumbs.css

+    font-weight: bold;
+
+    display: inline-block;
+    display: inline-flex;


which is it, inline-block or inline-flex?

It´s inline-flex but I left inline-block as a fallback.

I think my initial comment proposing to add a comment in the code seems even more accurate :)

alecharp · 2020-02-18T16:55:01Z

core/src/main/resources/lib/layout/breadcrumbs.css

-    color:#3465a4;
+#breadcrumbs LI A:hover, #breadcrumbs LI A:focus,
+.breadcrumbs__auto-refresh:hover, .breadcrumbs__auto-refresh:focus {
+    /* TODO: change hover state


Will it be part of a future work?

Yes, probably once we work on the contextual menu dropdown.

alecharp · 2020-02-18T16:55:29Z

core/src/main/resources/lib/layout/breadcrumbs.css

-  visibility: hidden;
-  cursor: pointer;
-  z-index: 2000;
+    background-color:transparent;


Not sure those changes are required..

Do you mean the indentation changes? The file indentation was a bit inconsistent as it had different indentation levels. I put all the lines on the same level.

core/src/main/resources/lib/layout/layout.jelly

alecharp · 2020-02-18T17:00:25Z

core/src/main/resources/lib/layout/pageHeader.jelly

+                <img src="${imagesURL}/jenkins-header-logo-new.svg"
+                     alt="[${logoAlt}]"
+                     class="page-header__brand-image" />
+                <span class="page-header__brand-name">Jenkins</span>


No, Jenkins is Jenkins in all languages.

core/src/main/resources/lib/layout/svgIcon.jelly

Co-Authored-By: Adrien Lecharpentier <adrien.lecharpentier@gmail.com>

oleg-nenashev

Taking the approvals, I suggest to merge it into 2.222 if there is no negative feedback by Thursday 4PM UTC

daniel-beck · 2020-02-21T22:24:59Z

This PR introduces a minor regression on Firefox:

When jumping to an anchor on the page (e.g. through the dropdown menu for configuration forms), the breadcrumb bar doesn't move to the top of the page. Might be related to page zoom.

Expected result:

Actual result:

oleg-nenashev · 2020-02-27T09:48:05Z

@fqueiruga FYI I added a short upgrade guide entry to address the comments in https://groups.google.com/d/msg/jenkinsci-dev/VRxRCP_IKhQ/8Uw2SJqWAAAJ . It is based on your changelog entry text. Please feel free to extend it as needed

CptPlastic · 2020-02-27T14:22:27Z

Hmm, the simple theme plugin has > 25000 installations. I'm not sure if it is only the material theme that will break, did you check one of the maintained themes like https://github.com/TobiX/jenkins-neo2-theme of @TobiX still works after the changes?

I am in the same boat as many that use the material theme. When you try to enable this it just breaks the login page. Even if you remove the plugin some thing still lingers. Is there any guidance for people who do run into this because we are back to the classic theme and people notice. Is there a place I can go look to fix this for the folks that have Simple Theme installed?

timja · 2020-02-27T14:33:16Z

Hmm, the simple theme plugin has > 25000 installations. I'm not sure if it is only the material theme that will break, did you check one of the maintained themes like TobiX/jenkins-neo2-theme of @TobiX still works after the changes?

I am in the same boat as many that use the material theme. When you try to enable this it just breaks the login page. Even if you remove the plugin some thing still lingers. Is there any guidance for people who do run into this because we are back to the classic theme and people notice. Is there a place I can go look to fix this for the folks that have Simple Theme installed?

each theme will need some updates done

i.e. material theme here:
https://github.com/afonsof/jenkins-material-theme

CptPlastic · 2020-02-27T15:19:05Z

Hmm, the simple theme plugin has > 25000 installations. I'm not sure if it is only the material theme that will break, did you check one of the maintained themes like TobiX/jenkins-neo2-theme of @TobiX still works after the changes?

I am in the same boat as many that use the material theme. When you try to enable this it just breaks the login page. Even if you remove the plugin some thing still lingers. Is there any guidance for people who do run into this because we are back to the classic theme and people notice. Is there a place I can go look to fix this for the folks that have Simple Theme installed?

each theme will need some updates done

i.e. material theme here:
https://github.com/afonsof/jenkins-material-theme

You see how that causes an issue though right? 25000 things have this and that is a pretty substantial impact. Even if they install that plugin and remove it the break still happens. The only way to unload it is to restart the service twice. I get that this plugin is not Jenkins's and some of the templates need updates but this breaks jenkins bottom line. There may be something jenkins can do to force the css thats for some reason making the login pages blank.

I think this is awesome and I would much rather have a nice UI that matched blue ocean and that you guys are giving some much needed attention to the UI I just wanted to make you aware that these things are happening.

uhafner · 2020-02-27T23:21:47Z

i.e. material theme here:
https://github.com/afonsof/jenkins-material-theme

The material theme seems to be unmaintained currently. So if nobody steps in this theme will not be supported in the near future.

The current one is dull and depressing. jenkinsci/jenkins#4463

fqueiruga added 8 commits January 30, 2020 15:21

Created new styles for the page header

925e713

- Used the material icons svg sprites to deliver the icons - Icons are rendered using a <svg> tag

New styles for breadcrumbs and warnings monitor

6868cff

Adds the svgxuse polyfill for svg sprites on IE 11

9d1fb59

Create new base styles file and undo changes to the layout-common and…

7c40d96

… style css files

Fixes and refactor for the new UI CSS code

9441dc4

Make the new header color and logo section opt-in

fcccd45

- The new UI can be toggled with the -Dui.enableNewUi=true flag

Updated localization for header and admin monitor

090636b

- The pageHeader template receives localization strings as props - Missing translation for the admin monitor on the it, bg and pl locales

fqueiruga requested a review from alecharp January 30, 2020 15:46

batmat added work-in-progress The PR is under active development, not ready to the final review web-ui The PR includes WebUI changes which may need special expertise labels Jan 30, 2020

timja requested review from timja and uhafner January 30, 2020 16:16

timja reviewed Jan 30, 2020

View reviewed changes

core/src/main/resources/lib/layout/layout.jelly Outdated Show resolved Hide resolved

batmat requested a review from varyvol January 30, 2020 17:27

Wadeck self-requested a review February 1, 2020 08:24

fqueiruga and others added 4 commits February 3, 2020 16:53

Update core/src/main/resources/lib/layout/layout.jelly

a4856ff

Co-Authored-By: Tim Jacomb <t.jacomb@kainos.com>

Most measurements migrated to REMs

3fd2181

Code cleanup and apply new-ui toggle to the html.jelly file

8b1410c

Breadcrumb fixes

fa95c46

- Reverts breadcrumb link styling to use nested selectors instead of the .breadcrumbs__link class. The reason is that several plugins would break. - Shifted margins so that breadcrumbs can be fullwidth in the absence of the auto refresh link

halkeye reviewed Feb 3, 2020

View reviewed changes

war/src/main/webapp/images/jenkins-header-logo-new.svg Outdated Show resolved Hide resolved

core/src/main/resources/lib/layout/pageHeader.jelly Outdated Show resolved Hide resolved

war/src/main/less/base/layout-commons.less Outdated Show resolved Hide resolved

timja reviewed Feb 3, 2020

View reviewed changes

war/src/main/webapp/images/jenkins-header-logo-new.svg Outdated Show resolved Hide resolved

timja reviewed Feb 4, 2020

View reviewed changes

markjacksonfishing approved these changes Feb 18, 2020

View reviewed changes

alecharp approved these changes Feb 18, 2020

View reviewed changes

Update core/src/main/java/hudson/Functions.java

2d5420c

Co-Authored-By: Adrien Lecharpentier <adrien.lecharpentier@gmail.com>

timja closed this Feb 18, 2020

timja reopened this Feb 18, 2020

oleg-nenashev approved these changes Feb 19, 2020

View reviewed changes

oleg-nenashev added ready-for-merge The PR is ready to go, and it will be merged soon if there is no negative feedback on-hold This pull request depends on another event/release, and it cannot be merged right now labels Feb 19, 2020

Do not check the system property on every page render

205fa3a

timja removed the on-hold This pull request depends on another event/release, and it cannot be merged right now label Feb 20, 2020

timja merged commit 673a18c into jenkinsci:master Feb 20, 2020

daniel-beck mentioned this pull request Feb 22, 2020

Introduce a new summary description field for jobs #4489

Closed

10 tasks

oleg-nenashev added the upgrade-guide-needed This changes might be breaking in rare circumstances, an entry in the LTS upgrade guide is needed label Feb 27, 2020

TobiX mentioned this pull request Feb 28, 2020

New Jenkins design breaks search box icon placement at the header bar TobiX/jenkins-neo2-theme#18

Closed

oleg-nenashev mentioned this pull request Mar 3, 2020

Update Jenkins changelogs to always show a pull request link jenkins-infra/jenkins.io#2916

Open

fqueiruga deleted the jenkins-60920_header-breadcrumbs-update branch March 6, 2020 15:01

daniel-beck mentioned this pull request Mar 8, 2020

[JENKINS-61224] Removing the "monitor[s] text next to the bell (and color change) #4555

Merged

10 tasks

daniel-beck mentioned this pull request Mar 16, 2020

Update at-since up to and including 2.226 #4587

Merged

10 tasks

timja mentioned this pull request Apr 19, 2020

Use new icons for help #4663

Merged

10 tasks

nattofriends added a commit to ocf/puppet that referenced this pull request Sep 10, 2020

Enable slightly prettier Jenkins header

6ccd592

The current one is dull and depressing. jenkinsci/jenkins#4463

nattofriends mentioned this pull request Sep 10, 2020

Enable slightly prettier Jenkins header ocf/puppet#1026

Merged

Wadeck mentioned this pull request Oct 14, 2022

Updating "jenkins.ui.refresh" due to removal jenkins-infra/jenkins.io#5595

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[JENKINS 60920] header breadcrumbs CSS update #4463

[JENKINS 60920] header breadcrumbs CSS update #4463

fqueiruga commented Jan 30, 2020 •

edited by oleg-nenashev

timja commented Jan 30, 2020

batmat commented Jan 30, 2020 •

edited

fqueiruga commented Feb 3, 2020

uhafner commented Feb 3, 2020

imod commented Feb 4, 2020

uhafner commented Feb 4, 2020 •

edited

timja commented Feb 4, 2020

fqueiruga commented Feb 18, 2020

timja commented Feb 18, 2020

alecharp left a comment

alecharp Feb 18, 2020

fqueiruga Feb 18, 2020

Wadeck Feb 19, 2020

alecharp Feb 18, 2020

fqueiruga Feb 19, 2020

alecharp Feb 18, 2020

fqueiruga Feb 19, 2020

alecharp Feb 18, 2020

oleg-nenashev left a comment

daniel-beck commented Feb 21, 2020

oleg-nenashev commented Feb 27, 2020

CptPlastic commented Feb 27, 2020

timja commented Feb 27, 2020

CptPlastic commented Feb 27, 2020 •

edited

uhafner commented Feb 27, 2020

[JENKINS 60920] header breadcrumbs CSS update #4463

[JENKINS 60920] header breadcrumbs CSS update #4463

Conversation

fqueiruga commented Jan 30, 2020 • edited by oleg-nenashev

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

Screenshots

TODOs:

timja commented Jan 30, 2020

batmat commented Jan 30, 2020 • edited

fqueiruga commented Feb 3, 2020

uhafner commented Feb 3, 2020

imod commented Feb 4, 2020

uhafner commented Feb 4, 2020 • edited

timja commented Feb 4, 2020

fqueiruga commented Feb 18, 2020

timja commented Feb 18, 2020

alecharp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oleg-nenashev left a comment

Choose a reason for hiding this comment

daniel-beck commented Feb 21, 2020

Expected result:

Actual result:

oleg-nenashev commented Feb 27, 2020

CptPlastic commented Feb 27, 2020

timja commented Feb 27, 2020

CptPlastic commented Feb 27, 2020 • edited

uhafner commented Feb 27, 2020

fqueiruga commented Jan 30, 2020 •

edited by oleg-nenashev

batmat commented Jan 30, 2020 •

edited

uhafner commented Feb 4, 2020 •

edited

CptPlastic commented Feb 27, 2020 •

edited