 Okay, welcome. It's this is the Jenkins documentation or Mrs. Jenkins user experience special interest group. We've got attending today. Lee Hoffner. Felix. Tim's are calm. Alex I apologize I regularly misspell your last name so I omitted it for now I'll put it in later when I get it correct. Oh, good. And we've got Patty McLeachie it looks like. So proposed agenda was colors in Jenkins with Uli. And then I had recent UI improvements in core. If we're lucky, John Farachuk will join us and then we'll, we'll let him talk to it instead and pending UI improvements. So, or Tim, if you'd like to talk to those topics. Are there other topics you'd like to put on the agenda before we start working through the agenda. Okay, great. Then let's, then let's go ahead. And so really, is there anything you want to share or is this more of a discussion topic that you'd like. It's more of a kind of discussion topic. So I think the only things we can share are the links that I put on the agenda so the background is basically this pull request where I should make a review. And this remembered me that I had in my plug in a similar problem. That means we have some colors, and we need these colors in the server side on the Java side. And we have the UI side where we have a lot of colors as well. So I wondered how we can get these colors in sync. So that we have the same colors on the Java script side, and the same colors on the server side. This is one thing. And the other thing is that we that these colors should not be fixed in the way because we have a dark theme and what is the difference of the lights theme. These colors should be look different on both themes. So I'm wondering how we can in the future discuss this things a little bit more that we have colors that look good for both kind of themes. This is basically the topic I wanted to discuss a little bit. So I think it's quite easy on the client side. We can use, you know, this new variables in CSS. But I'm not sure how we can use these colors in charts as well. And how we can use these colors in server side. So this is more a question. I'm not sure how to say if someone has an idea how we can put it all together that it works both on the client and on the server side. Maybe I would say avoid it as much as we can. And get there are some things that are generated server side is moving to client side a bit of fix in general. Yeah. Which is kind of what we've been kind of what we've been doing. So so Tim to be clear on that so your idea is that avoid color definition on the server side as much as possible. The other way is another way is to pass it from the client side to the server side, which was a suggestion by Daniel Beck for fixing some of the theming issues. So pass the result value for the colors somehow down to the server as query parameters or something. But so are there cases where where that technique is infeasible or would not work other places where we'd say hey can't do that. I'm sure all of it could move to the client side it's just a matter of time and also that some of these graphs are bundled in core and core doesn't have things like each hearts at the moment. Okay, so some of the graphs that would need to be split from core. Either split from core or bundle each hearts in core. Okay, whether it's a probably bundled in a self contained way just for those pages and not as a library for everyone I would assume. And one thing for the charts, if we're using each hearts in the client side, several parts of such a chart is still produced in the server side and Java model site in Java. So, currently, I am using each hearts but some values of the model are still produced on the server side. For instance, I'm for the code coverage view. I'm rendering the percentage of the code coverage in green, different green levels. And this is currently done on the server side. Yeah, and I'm not sure if this makes sense to put everything on the client side because then we need to create these models on the client side as well. So, you know, which means that we need to write a lot of more Java scripting code. And yeah, which is, it's not come. Yeah, it's kind of different way to create new views in Jenkins. I'm not sure if we're going to walk this way. I have a maybe a silly question but is it seen as a bad thing in Jenkins to move it to the client side and use JavaScript. Yeah, I don't think that is a bad thing. So the problem is, I think most of our developers are Java developers. Yeah, the tooling for Java is ways more major with respect to testing code coverage, etc. on the Java side and not on the Java scripting side. And this is why everybody's using Java and not Java script, which is, let's say, some kind of evil language for me. Understandable. So is there a, is there a, how do we, how do we approach that or prototype it is it is code coverage the example we could use to test drive that or is there another place where we could test these ideas about moving more and more client side more and more color definition to client side. Yeah, I'm not sure. I think we have these references below. There are all links which are somewhat relevant. So for instance we have in the two unit plugin. This is a trend chart a little bit lower where we have where I changed the color from blue to green. This is currently under the server side but this could be easily on this client side. This is not really a problem. But I think the problem is a little bit bigger because typically if you have a color blind problems. So somebody does not see a difference between red and green. So we need to make these colors changeable in a way. I think rendering on the client side is just one point and the other point is how do we provide a way to customize these colors. And maybe one step further, which colors should we use at all. So we need a kind of semantic model of colors, which we don't have yet. So we started with a color palette, but a color palette does not make sense in my way where we use it. So we have colors with semantics with failed state with successful or with a coverage of 50% or 70%. And this is not handled by our color palette. So a color palette is a kind of generic thing when you're working with Excel or something like that that you want to a nice chart but not a chart with semantics in it. Felix, you have a question. Yeah, I mean I was just going to be. I'm asking to be a bit pragmatic. I think we need to leave the Java world. And we just say that maybe color specifically look and feel for themes is not that important for charts and stuff. Maybe the short term solution. Maybe it's acceptable term. So we need to just say, okay, we have a specific and endorse said the finest concepts in Jenkins core for light versions of graphs and then another set of colors for dark versions. And then we start with that. And then see how that solves. It will not work for all light themes, and it will not work for all dark themes, but should be work for the at least the two defaults. And I think, and I think that would be viable. Maybe that a plugins could reach out to those. I don't know I'm just throwing a little bit out there. And of course, I don't I don't have an opinion that we and this man and about the semantics, we do have, we do have a success and colors with semantics. It may not be the most colorblind. It will not result in the most colorblind friendly chart though. I have nothing else to contribute to the discussion. So, so it feels like there's more to be discussed there. I, I've, I think we may have hit the point where we need Uli and others to have conversations possibly Patty and others about hey how would we approach this further. I know you had to drop off at half past and I wanted to be sure we got to to Jan's topic. Uli, are you okay if we pause this discussion for now. That's fine I just want to make us aware of the problem. And we need to continuously improve that one. Thank you. Thanks. So, so I assume that the that what Tim mentioned of Daniel suggestions there's a conversation going on in a public forum somewhere about the possibilities here and we can continue in that location. Yes, that's good idea. Maybe it's helpful I started a thread on the community. Then we can link each other in there. I think that sounds like a great idea. Excellent. Thank you. So, the next topic that we put on the agenda was recent UI improvements and john, maybe I don't know if you want to share a screen or if you want to just talk about it, or, or how you'd like to approach it. Maybe you could give us some highlights. What's your, what's your, what's your vision is and how it's how it's evolving, etc. Hi everyone. And the first time here so just kind of bearings and happy to share my screen if that's all right. All right, everyone see my desktop. Yes, thank you. So what I've done at the moment I've made a kind of vertical slice where I've been working on Jenkins so every kind of test branch I've made, I've kind of chucked into one massive branch. So it's got all the changes and kind of eventually going to propose and the ones I have proposed already. It's not finished and it's, it's definitely going to be a little bit buggy. But, but this is it really. So you've got the table there. You've got a kind of new format of buttons, which I pulled out of the forms merge request. So we have one large request focused on updating the buttons and hopefully killing off the UI buttons as much as possible. So don't a fair bit of work there kind of killing off the make button JavaScript stuff that was really kind of Mali. And also done a fair bit of work, just trying to kind of separate the bits that we can't kind of pull out to see if that makes sense. So I go to manage UI. There's, there's bits like the, as I said, administrative monitors button, or if you click it that that's still reliant on you who you are. But everyday buttons have been detached fully. So I guess I should start from the beginning really anyway. This is the table that I haven't seen it. So I'm going to go to the scratch. I'm going to round up really. It's a bit more modern than the old table. I just like that. And one of the things that it does kind of do is use a new icons. So I mentioned these are icons. So it's a new kind of slim icon for Jenkins. And that's the buttons that we've got new tabs. But they don't really look like tabs and kind of more of a switcher kind of format. So let's see how that kind of plays out. And if we go to the new forms. This branch has kind of the new forms changes that haven't been pushed. Sorry, put your hand up. Yeah, so about the icons quick question. Did you wait the size of the library? And did you intend of replacing the material icons fully? That would be the plan yet to replace them. Eventually, there's not material icons are too crazily used on Jenkins from what I've seen. So it should be a massive job. I don't think. No, we are using very little material icons. Sadly, we cannot remove them. For context, the icons we did that was where at first and then I agree. And then Google pulled the rug under us and remove the material rights. So that's an issue. But I mean, it should be rather easy to locate which planets are using the material icons and update them. No. I think so. And now, well, I mean, we can just leave them for compatibility, but I, I do support just having a comprehensive set of icons. I was reluctant to do to work with bootstrap icons because they, I, they were so it was huge. They confront it was huge. And Jenkins already has like a, what, four megabyte, five megabyte from asset payload. If they, if the iconic font weights another 600 K on top of it, it may not be that good. But if the size is reasonable, I think it's great. I just wanted to comment that on the icons. I'm not too sure how large the icon set is right now. I'll need to check that. But right now the way it works is we have a tag to load the SVG and it's cached. And just a good hash map on Jenkins. Okay. And just a constant, not loading the file. Okay. I will dig it up. I will look deeper into the PR. And to see how the how you serve this to see if I can see and yeah, I will look in the tables here. A bit more. So this is the kind of continuation of the forms PR. So we've got pretty, about 90% of the forms elements have changed over now. So the text area is done. And the select box is done. And the checkboxes. Was it the checkboxes? Yeah. Checkboxes are also done now. So they kind of animate like so. Some selects are custom. And so can't touch those annoyingly. And if you end up looking into what I suggested about looking into the. Sending input class. Modifying that one directly. I haven't. Yeah. I would just look into that. Maybe expand it with the seasons variables. Because that was used everywhere. I just, I just was suggesting. Even legacy stuff. It's used. Except on the change password. It's the only thing I've seen that it doesn't use that. That one. So the changes I see in the buttons. Were those done by theming. Yeah, these are just. But they're new buttons. Sorry. New buttons. Yeah. Okay. But I mean, you, those are the existing Yahoo UI classes, but with the, just the CSS variables change. There'll be new classes. So all I've done is just done a command F just to go over the old buttons. So I'm just going to go over the old buttons. So all I've done is just done a command F just to go over the old buttons. And then I was thinking of having like a Java script. This will just require just to change over any. Existing buttons on page mode. Okay. I would suggest you verify that with the, for example, with dropdowns. Because I mess up with Yahoo UI stuff in dropdowns. Yeah. Should all be. Mm-hmm. There was a dropdown on this page that I've been playing with. I just lost it. Here we go. So dropdowns still work. Yeah. It's, for example, there it's missing the, the arrow, for example. Mm-hmm. And that would be valuable. Yeah. I completely agree. Um, I can ask a question. I'm going a bit of topic. Sorry because I need to live in like seven minutes. Um, once, when we work on this, I'm not sure if you're aware. Uh, like two years ago we were, I started working on for a year or so in this. I, and what I think it really helped was I created a document. Strategize it to align what steps we were going to take and what stuff. And then, well, we did have a designer to this sort of discuss the designs. We tried to do, we just share them and we tried to avoid lots of design by committee stuff. But what I would suggest it could help if you could put together a document or something. Uh, outlining, uh, outlining your vision, like what steps you're going to make. Uh, do something more comprehensive to see. Yes. So that everybody can see a roadmap in mind. And maybe just people just can pick up a contributions for that roadmap. Um, because that would make it easier for everybody. I think. Uh, I don't know. Uh, and also especially, especially with it share. I think poorly. Uh, I'm going to go ahead and admit that we did poorly, but we did try to share design resources. So, and from what I've seen here, I mean, you must have design resources. These look very design specs, like these, these look so consistent and so good. I mean, do you have design docs for this? Uh, no design docs yet. Okay. I'd love to create some. Are you freestyling this whole thing? Yeah, pretty much. Oh, that's amazing. Huge respect. Uh, well, but then just, just a bit of strategy document, outlining your vision. And basically what we did was where we wanted the, where we plan and where we wanted to stop. Uh, we wanted to stop after iconography overhaul. I needed to stop after because the tables to the things, but at least yes. So if you could put together a roadmap, uh, it would be great. At least that's what I think. What does everybody. So what do you all think. I'm less concerned about the strategy that I am about the rapid progress. So for me, I apologize for being the other direction, but in my case, I'm so impressed with the progress that I, you know, you know, you know, you know, you have to keep advancing the progress without, without at least short-term concern for strategy. No, no, I mean, with, I don't mean a roadmap. I mean, just a, I don't mean a strategy document, but you're just saying about that point, like going with forms, going with that. And then with the plugin manager table and that's it. Or just, I mean, are you going to stop in iconography on that? Are you going to work on the navigation? Are you going to, do you plan or do you plan? Or if not, I mean, yeah, I mean, sure. If you're just freestyling the whole thing, it's fine. I mean, I will continue to review and approve, of course, and try it out. It's going, I'm going to get back to Jenkins. I'm looking at this. Yeah. I mean, for me, code talks and I would just focus on the code. Yeah. Especially if you don't have a team behind you. She's got a team to help. Then some of that's better, but I think we're, I think we're doing fine. I think it's looking really, it's looking really, really good. I wish I didn't assume there was a team behind this because it looks so consistent. It looks consistent. So I thought it was a, there was a team behind it. I may very well, I may give you the shot to the plugin manager table. Maybe who knows. Yeah. Reach out. If there's anything that you need a hand on. So happy to help out in this sort of area. I'm terrible at design, but I can implement and fix things and understand. Jenkins fairly well. Yeah. That's really appreciated. I can, I can do. Yeah. I just can work in large case staff. If you just, if you just have any way, find any JavaScript awareness. I encountered quite a few. If you just, just say, okay, I just create a small tickets for a small adjustments. I will be happy to take a few. And one thing that would really benefit. Is there like a kind of place I can post any questions? It's like a group or something. And. Posted it in the chat. There's a, it's a get a channel, which is like a poor man's slack. Well, there's also, there's also mailing list if you want that too. But for just for questions, the chat is normally fine. Yeah. If, if Gitter is not rich enough for you, we could put ourselves onto the CDF slack. We could put, you know, there are other places if that will, if that will help you get the answers you need, Jen. That'd be great. Yeah. I mean, we were on slack before, but then it's just harder with invites and you can't just link people to messages so easily. Right. It should be fine. You can just sign in with GitHub. We still have the community. We started to use as well. Yeah. Right. Jenkins. There's a forum here as well. Okay. I forgot to drop. So a nice meeting you, John. This is amazing. You're doing. Looking at your work really makes me wonder what I have done. What, why I didn't know this. It looks really good. So congratulations. Thank you. So yeah. Cheers. Everybody bye. So Jen use, use. Oh, go ahead Patty. Was that you? Sorry. Yeah. I was just going to say, I also have to drop, but Jen, I would love to help you with some of the accessibility color issues. So, because I think we might have a contrast issue on the buttons. It looks really good. But I'd love to help you with that. I do have to drop, but I, we could collaborate on Gitter or. I can. I know Felix posted your PR. So I can also help look at that and suggest a hex color code that might. Be a little better for contrast. Sure. That'd be great. Thank you. Awesome. Hey, bye y'all. Thanks. Jen, you mentioned, I think I, I'm not, I am the least UI skill of everybody in this call. So forgive me if this is a foolish question, but you mentioned why UI is that the Yahoo UI thing that we've been dreaming of getting rid of. And it sounds like you've actually successfully for button creation stopped using it. For the majority of buttons. Yeah. There's still the plugins, which I can't do much about sadly. And that use it. Unless you kind of make our own kind of. Drop in version if that makes sense. And then kill off the Yahoo UI completely. Yeah. I feel like plugins when we're using it too much outside of core components. The main one I know of is the credentials plugin, which really needs a real, really needs a UI rewrite. Well, and certainly in order to remove why UI references for credentials, we would have to have to rework it. Right. So it's just the way you said it, Tim, it will require rework. And therefore whatever technique you're using, Jen seems like we could, we could consider that in other places as well. Excellent. Thank you. Yeah, everyone's very happy to purge Yahoo UI. It's ancient and out of date and, but I don't think we can update it with heartbreakages and that's, this is so old and yeah. Right. Same with prototype. JS is horrid. I'm sure you've came across prototype JS. It's just broken. Just I, I tend to just rewrite stuff in JavaScript. I don't, I don't add the new, I don't add new prototype. I just rewrite it if I have to do anything. So now, now Jen, one of the questions for me was that some of your work is already in the next like in the likely next LTS baseline. So 2.317 already includes a number of your improvements. And for me, that means we have a shameless request that we need to be sure we test that thing very well and focus on UI. Those of us around can help by looking at UI and looking for things. Is there a particular way you'd prefer to get issue reports? Is it okay if I just use the Jenkins issue tracker or would, is there something better for you? Jenkins issue track is great. Really. Okay. All right. So, so as, as people find things, they should just report them through issues. Jenkins.io and excellent. Okay. Awesome. Kind of one last thing that I've kind of been playing around with is trying to overhaul the, the tool tips. So right now across Jenkins, there's kind of different variations of making tool tips. So just trying to consolidate that under tippy.js. This is what it looks like. It looks kind of almost identical to how it did before. So the users shouldn't notice a difference, but as for developers, it's a lot easier to actually create tool tips. So however, you're going to be able to do that. So that's kind of the weather icon you'll get the table. And one thing I've been looking at extending it to is the, the dropdowns as well. And trying to pull us away further from the, you, who you buy stuff. And that works. Oh my God. So much. That looks beautiful. Could you, could you do that again? Please, Jan, please hover over that. Those of us who endure this particular menu want to see that one more time. Okay. So that, that is the thing of beauty you've done there. Have you done the breadcrumbs at the dashboard at the top? It's very not the most obvious, but it's not, not that one to the left of that. That one there. Yeah. Yeah, that one. Yeah, that's a Yahoo UI one. That would be great to purge. Yeah, that's, that's pretty much everything I've got on the go right now. But I'd definitely like to keep people more up to date. So what I'm doing rather than just like chucking large module classes out in the open. So I need to find a way of kind of communicating better there. But yeah, that's, that's, that's it really post the stuff in the UX, like when you want input or feedback for bigger posts, there is a UX segment mailing list as well, which you can either use the UX segment mailing list or the regular Jenkins mailing list. If you want to get bigger feedback, but generally we just use the UX like chat. But yeah, that looks really good. Thank you. I'll stop sharing if that's all right. Yeah. Yeah, thank you. Thank you very much. So I'm going to switch back to sharing my screen because I was in a costume thing today and I'm, I'm looking horrible. Therefore, let's do whoops. You've been in an accident. Exactly. I mean to ask. I was, I was Supreme Leader Snoke in my costume, but this is only a part of it. So let's where did it stop to share? Which screen did I just share? Let's try sharing again. Share screen. This one go. Okay. Now you should see this. All right. Are there other topics we should discuss today? So it feels like we've got a really cool demo from Jan. Thank you very much. We could consider going back to the conversation on colors in Jenkins. Uli, if you would like to spend some time, some further time on that topic. No, just it's okay. I trust to make us aware that we should discuss it in more detail. And I think I'll start a mailing list thread. Where we can. Yeah. Get a little bit more feedback from everybody. Great. All right. Excellent. Any other topics then. For me. So, Jen, I, and one of the reasons I was asking about this two, three, 17 and two, three, 18 is I've, I've got a bug report I'll be submitting. I just need to get enough information to, to justify a good bug report. So I think, I think the one I've seen is enough that we'll probably want it back ported to, for the LTS baseline. But the purpose of the bug report is to test whether or not it's actually that relevant to others. Thanks again so much for what you've done. This is, this is brilliant, brilliant work and really energizing. Thank you. Thank you. Any other topics for today? All right, then let's, I think we can go ahead and call an end. I will archive this. I'll save the meeting notes and upload a copy of the recording to the Jenkins YouTube channel so that it'll be available so that other people can see the work that's been going on. Thanks very much everyone. All right. Thank you. Bye-bye. Thanks.