Modernize the UI design #35

hashar · 2024-10-25T15:11:37Z

Replace the collapsible sections with a <details> HTML Element, this has been available in all browsers since early 2020. It defaults to being collapsed and showing the <summary> content. Toggling is handled by the browser which let us get rid of the doToggle() script (which also had duplicate logic to support IE 8).

Add StyleLint to validate the CSS with a custom formatter function to emit:

a string based report to the console for human consumption
a CheckStyle XML report for CI

The styling is inspired from Jenkins values and some shadow is casted at the bottom of the sections to help differentiate them.

Rendering: https://phabricator.wikimedia.org/F57652063
Downstream task: https://phabricator.wikimedia.org/T378327

Submitter checklist

Make sure you are opening from a topic/feature/bugfix branch (right side) and not your main branch!
Ensure that the pull request title represents the desired changelog entry
Please describe what you did
~~Link to relevant issues in GitHub or Jira~~
~~Link to relevant pull requests, esp. upstream and downstream changes~~
Ensure you have provided tests - that demonstrates feature works or fixes the issue

hashar · 2024-10-28T11:00:45Z

I have deployed the plugin our the Wikimedia Jenkins instance. An example can be seen at https://integration.wikimedia.org/ci/job/wmf-quibble-vendor-mysql-php74/lastSuccessfulBuild/consoleFull

mPokornyETM · 2024-10-28T19:33:30Z

I have deployed the plugin our the Wikimedia Jenkins instance. An example can be seen at https://integration.wikimedia.org/ci/job/wmf-quibble-vendor-mysql-php74/lastSuccessfulBuild/consoleFull

I am not sure if it is part of this issue, but when you scroll a litle down, the the 'timestamp block' will jump to top and overlap the 'console section' block

hashar · 2024-10-29T10:28:13Z

Indeed! Thank you @mPokornyETM at a quick glance I need to craft another commit that would:

add timestamper as a test dependency (to have it loaded when doing `mvn hpi:run)
replace the onscroll javascript set by initFloatingSection, I am pretty sure that can be handled via CSS properties instead
find a way to have the timestamper panel to be bumped to the top. The first that has completed the fetch query is placed first, and the collapsible section outline seems to always be faster than the timestamper one.

hashar · 2024-10-29T20:14:15Z

The overlap issue is caused by Timestamper plugin panel which became sticky with jenkinsci/timestamper-plugin#287 Any added panels end up being overflown and the sticky panel is transparent. I guess that should be rollback.

From my comment earlier I have pushed a new commit that adds timestamper as a test dependency and to ensure the panel holding the list of collapsible sections is always the last element.

mawinter69 · 2024-10-29T23:45:17Z

If you can ensure that the console sections panel is above the timestamper then everything is fine I think. So probably the timestamper plugin needs to ensure that its widget stays at the end.

mawinter69 · 2024-10-29T23:50:52Z

PS: I changed the outline jelly a bit so the border looks like for the timestamper widget and has some margin inside:

    <div id="console-section-container" class="pane-frame">
      <div class="pane-header">
        <span class="pane-header-title">${%Console Sections}</span>
      </div>
      <div id="console-section-floater" class="scrollAttached">
        <table class='pane jenkins-!-margin-left-2 jenkins-!-margin-bottom-2 jenkins-!-margin-right-2' id='console-section-outline'>
          <tr>
            <td class='console-section-body' id='console-section-body' />
          </tr>
        </table>
      </div>
    </div>

mPokornyETM

LGTM

hashar · 2024-10-30T16:05:27Z

PS: I changed the outline jelly a bit so the border looks like for the timestamper widget and has some margin inside:

    <div id="console-section-container" class="pane-frame">
      <div class="pane-header">
        <span class="pane-header-title">${%Console Sections}</span>
      </div>
      <div id="console-section-floater" class="scrollAttached">
        <table class='pane jenkins-!-margin-left-2 jenkins-!-margin-bottom-2 jenkins-!-margin-right-2' id='console-section-outline'>
          <tr>
            <td class='console-section-body' id='console-section-body' />
          </tr>
        </table>
      </div>
    </div>

Ah good point, I forgot about that. The styling comes from Jenkins itself using CSS classes pane-frame,pane, pane-header-title, pane-content etc. I guess I will insert a first commit to do so and rebase the rest on top of that.

hashar · 2024-10-30T16:10:38Z

If you can ensure that the console sections panel is above the timestamper then everything is fine I think. So probably the timestamper plugin needs to ensure that its widget stays at the end.

The Timestamps panel would still overflow over the Console section panel. I would have to test a bit more.

Meanwhile I have offered to revert the stickiness at jenkinsci/timestamper-plugin#311 . Long term I think the Jenkins side-panel would need something like:

<div id="side-bar>
  <div class="sticky-panels" style="top:0; position:sticky;">
    <!-- Insert here any panels that should be sticking when scrolling -->
  </div>
  <div class="panels" />
    <!-- Other panels that would scroll and hide :b -->
  </div>
</div>

mawinter69 · 2024-10-30T19:15:56Z

Interestingly when you build against 2.479 then the timestamper widget will not be transparent and placing it at the bottom makes it look ok. At one point when scrolling it will jump to the top

I think the main problem is that console-section plugin tries to keep the link to sections that are not visible in the visible area of the widget. And when this happens then the frame around disappears
See here without timestamper

In the outline, the <ul> and <li> elements have a `data-level` stored, that was introduced in 2017 by 8b53705 and as far as I can tell was only used by commented out `console.log()` statements.

The first section started directly as a list item and missed an <ul>. When later changing the outline to use the Jenkins panels styling, that causes the first element to not have the necessary marging/padding and have it sticked to the left border. Make generateOutlineSection() to start with an <ul>, which adds the missing one from the first section. Doing so also let us remove the ul creation when inserting childs, since they are generated by generateOutlineSection() and thus get an <ul>.

hashar · 2024-10-31T14:31:28Z

Interestingly when you build against 2.479 then the timestamper widget will not be transparent and placing it at the bottom makes it look ok. At one point when scrolling it will jump to the top.

Indeed the background became opaque as part of 0419465f4dea7652dd9d85ae8a53a70a46fd834b / jenkinsci/jenkins#9148. That was first released in jenkins-2.463 and is part of jenkins-2.479.1

+++ b/war/src/main/scss/abstracts/_theme.scss
@@ -244,7 +244,7 @@ $semantics: (
   --pane-link-color--visited: black;
 
   // Cards
-  --card-background: transparent;
+  --card-background: var(--background);
   --card-background--hover: transparent;
   --card-background--active: transparent;
   --card-border-color: hsla(240, 25%, 75%, 0.25);

I think the main problem is that console-section plugin tries to keep the link to sections that are not visible in the visible area of the widget. And when this happens then the frame around disappears

Yeah it looks like to be how we would stick an element before position: sticky; top: 0 got introduced in web browsers. So essentially, the JavaScript code attached to window.onscroll can be removed in favor of some CSS. Then if you have two elements made sticky, the first sticks to the top, then the next will later stick to the top as well and overlap the previous. If the panels have opaque background, the last one would end up hiding the previous ones. My series has a commit to ensure the collapsible section plugin is always last, so that when scrolling, it will always overlap the other panels. I think that is good enough of a fix.

hashar · 2024-10-31T14:57:51Z

I have added some more changes to the pull requests:

56d60bb Remove unused data on <li> elements.

The data-level were only used for some debugging which have since been removed.

5dbb517 Add missing <ul> on top section

That addresses @mawinter69 remark about lack of padding. What I found is the first section were added without a <ul> which is the element receiving the left padding/margin. Adding an <ul> fixes that and we thus do not need to set a jenkins-!-margin-2.

237ff0f Change outline to use Panel and divs

That is manually adjusting our CollapsingSectionNote/DescriptorImpl/outline.jelly to match the Jenkins built-in https://github.com/jenkinsci/jenkins/blob/jenkins-2.440.3/core/src/main/resources/lib/layout/pane.jelly . This feel very wrong, I could not find how to reuse the Jenkins pane.jelly and avoid copy pasting.

49eef47 Add Stylelint to validate CSS

That is some magic Stylelint, I can probably send that as an individual pull request.

e523316 Modernize the UI design

This replace the pane to use <details> to remove some toggling javascript and it enhances the CSS. Some of the previous commit have been extracted from that one to make it smaller.

7899864 Ensure panel to be the last in the sidebar

Addressed previously, else the TimeStamper plugin or some other panels can be inserted AFTER the collapsible section pane which itself can be fairly long when there are lot of sections.

hashar · 2024-10-31T15:56:19Z

237ff0f Change outline to use Panel and divs

That is manually adjusting our CollapsingSectionNote/DescriptorImpl/outline.jelly to match the Jenkins built-in https://github.com/jenkinsci/jenkins/blob/jenkins-2.440.3/core/src/main/resources/lib/layout/pane.jelly . This feel very wrong, I could not find how to reuse the Jenkins pane.jelly and avoid copy pasting.

Looks like I can replace most of the duplicated HTML by <l:pane title="Console sections>!

I wrote a custom formatter function to emit: - a string based report to the console for human consumption - a CheckStyle XML report for CI

Replace the collapsible sections with a `<details>` HTML Element, this has been available in all browsers since early 2020. It defaults to being collapsed and showing the `<summary>` content. Toggling is handled by the browser which let us get rid of the `doToggle()` script (which also had duplicate logic to support IE 8). The styling is inspired from Jenkins values and some shadow is casted at the bottom of the sections to help differentiate them.

hashar · 2024-10-31T20:08:24Z

And finally I have added a last commit which removes all the scrolling code in favor of using CSS position:sticky and I have set top: 44px the same as TimeStamper.

To avoid the overlapping texts at #35 (comment) , I have made the pane background solid instead of transparent. That would no more be needed with later Jenkins.

This is what I got with just 3 sections, the pane that is below is the Timestamper plugin:

I think that is finally good to go. I have deployed it on the Wikimedia Jenkins, an example is https://integration.wikimedia.org/ci/job/wmf-quibble-vendor-mysql-php74/lastSuccessfulBuild/consoleFull

...resources/org/jvnet/hudson/plugins/collapsingconsolesections/CollapsingSectionNote/script.js

Other plugins add sidebar elements and the order in which they are added depends on how fast their `fetch()` requests are fulfiled. The Timestamper outline is slightly slower to respond and is most often put last as a result. Add an observer for any child changes made to the sidebar, when the collapsible sections panel is not the last, move it after the last panel ensuring it is always last. Add Timestamper as a test dependency to ease testing when using hpi:run.

The panel holding the section was made to stick to the top when the window was scrolled. Nowadays this can be achieved with the CSS property `position:sticky`. Remove the JavaScript code attached to `window.onscroll`. Drop the now unused div.scrollAttached The panel is made to stick at 44px from the top, which is the value used by the Timestamper plugin. Before Jenkins 2.463/2.479.1, the pane is transparent and overlapping two sticky had the texts overlayed which. Made it use a solid background, thus when scrolling, the second panel hides the first one.

hashar · 2024-11-05T15:54:19Z

@mawinter69 & @mPokornyETM the last iteration addresses all the remarks you have mentioned.

There is some glitch with the Timestamper plugin which is addressed with more recent version that uses a solid background. I have made the collapsible section panel to always be last since it can potentially be very long.

There was some UI freeze which was caught over the week-end and that I have addressed. I have never tested my code on a job console that does not have any section :D (solved: https://phabricator.wikimedia.org/T378864 ).

If that looks good, I will merge it and release a new version.

hashar force-pushed the ui-refresh branch 2 times, most recently from 7068d55 to 46b51db Compare October 28, 2024 07:40

hashar marked this pull request as ready for review October 28, 2024 07:48

hashar requested a review from a team as a code owner October 28, 2024 07:48

hashar force-pushed the ui-refresh branch 2 times, most recently from 727f218 to ca2d9d4 Compare October 28, 2024 09:23

This was referenced Oct 29, 2024

[JENKINS-72690] Make the widget sticky jenkinsci/timestamper-plugin#287

Merged

Revert "[JENKINS-72690] Make the widget sticky (#287)" jenkinsci/timestamper-plugin#311

Closed

hashar force-pushed the ui-refresh branch from 2927f99 to 113057e Compare October 29, 2024 21:14

mPokornyETM approved these changes Oct 30, 2024

View reviewed changes

hashar added 2 commits October 31, 2024 14:41

Remove unused data on <li> elements

56d60bb

In the outline, the <ul> and <li> elements have a `data-level` stored, that was introduced in 2017 by 8b53705 and as far as I can tell was only used by commented out `console.log()` statements.

hashar force-pushed the ui-refresh branch from 113057e to 7899864 Compare October 31, 2024 14:44

hashar added 3 commits October 31, 2024 19:04

Change outline to use a side-bar Pane and divs

d679738

Add Stylelint to validate CSS

67cf01f

I wrote a custom formatter function to emit: - a string based report to the console for human consumption - a CheckStyle XML report for CI

hashar force-pushed the ui-refresh branch from 7899864 to 18598e5 Compare October 31, 2024 18:33

hashar commented Nov 4, 2024

View reviewed changes

...resources/org/jvnet/hudson/plugins/collapsingconsolesections/CollapsingSectionNote/script.js Show resolved Hide resolved

hashar added 3 commits November 4, 2024 12:09

Balance top/bottom margins in the side pane

a507370

hashar force-pushed the ui-refresh branch from 31ba9af to a507370 Compare November 4, 2024 11:09

hashar merged commit c0b2fe1 into jenkinsci:master Nov 7, 2024
17 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Modernize the UI design #35

Modernize the UI design #35

hashar commented Oct 25, 2024 •

edited

Loading

hashar commented Oct 28, 2024

mPokornyETM commented Oct 28, 2024

hashar commented Oct 29, 2024

hashar commented Oct 29, 2024

mawinter69 commented Oct 29, 2024

mawinter69 commented Oct 29, 2024 •

edited

Loading

mPokornyETM left a comment

hashar commented Oct 30, 2024

hashar commented Oct 30, 2024

mawinter69 commented Oct 30, 2024

hashar commented Oct 31, 2024

hashar commented Oct 31, 2024 •

edited

Loading

hashar commented Oct 31, 2024

hashar commented Oct 31, 2024

hashar commented Nov 5, 2024

Modernize the UI design #35

Modernize the UI design #35

Conversation

hashar commented Oct 25, 2024 • edited Loading

Submitter checklist

hashar commented Oct 28, 2024

mPokornyETM commented Oct 28, 2024

hashar commented Oct 29, 2024

hashar commented Oct 29, 2024

mawinter69 commented Oct 29, 2024

mawinter69 commented Oct 29, 2024 • edited Loading

mPokornyETM left a comment

Choose a reason for hiding this comment

hashar commented Oct 30, 2024

hashar commented Oct 30, 2024

mawinter69 commented Oct 30, 2024

hashar commented Oct 31, 2024

hashar commented Oct 31, 2024 • edited Loading

hashar commented Oct 31, 2024

hashar commented Oct 31, 2024

hashar commented Nov 5, 2024

hashar commented Oct 25, 2024 •

edited

Loading

mawinter69 commented Oct 29, 2024 •

edited

Loading

hashar commented Oct 31, 2024 •

edited

Loading