GitLab Pair Programming - Frontend, 11 Aug 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 08112023 - Investigating tooltip positioning issue

Description

In this session we deep dive into investigating an environment specific tooltip issue. By the end we actually find the leading contributing cause!

00:00 - Intro
01:50 - Introduce problem
11:05 - Looking into code behind buttons
12:54 - Switching to Mac and testing on .com
20:05 - Testing drawer on gitlab-ui
32:54 - Starting the debugger before tooltip shows
35:35 - WE FIND THE ISSUE!
41:00 - Moment of clarity and summarizing the issue

A

Close all right, thanks for hopping on front end pairing. uh We were just uh we were writing and reading some minified JavaScript, um but uh the spirits have left us and we've we've lost our our opsuncated tongue to to create those files. So now Marco has another interesting problem: we're going to work on until.

A

Potentially debug tool, tips and windows.

B

Yeah I'm, just closing everything off uh uh I should be good. Okay, so.

B

We share only a portion of the screen. Yes, I do. Okay,.

B

C

B

I'm on GDK.

B

D

B

Almost there we have to go to the issue boards.

B

Okay, so the original thing that came up is that in here the this tooltip.

C

B

Outside, but we do have a fix for that, so I didn't know that we could do that, so basically to fix it. uh Let's go to the time. Okay, we have. We can specify the uh the boundaries for the tooltip and if we go uh window.

A

What is the boundary, if not the window.

B

uh Good question: well, it's not review.

B

I had the same question and uh where was it.

B

Tilted components.

A

There's placement: oh there's boundary down there, scroll parents, yes,.

B

They continue to will be constrained visually. The default should suffice as most cases, but you may need to change this yeah I think that the main issue that we have in here is that, in order to hide the main scroll bar, we kind of increased the size of the sidebar so that the full scroll bar is hidden. So maybe that's the reason, but oh.

A

Yeah, oh I mean yeah. That sounds like a bug with our sidebar right.

B

D

B

What did happen to my GDK.

B

Everything's up.

B

B

Something went wrong.

B

And it also didn't pick up my change because I did try it yesterday and that worked.

B

So anyway, that wasn't really the thing that I noticed so that changed with setting the boundary to the window works. But even without that, there's this slide. You see the little arrow at the bottom of the of the tooltip. That's not centered, it sure is, and utility placement also isn't and if you stay here, nothing changes. But as soon as you move to the other element for a little period of time, you see that option into place correctly and.

D

B

Second, for this, one.

A

Yeah, that's weird.

B

Yeah, that is weird, and that only happens on Windows.

B

And I discovered that, just before we started this call yeah, that's weird um to see if that's browser dependent well.

A

I want to jump into is that a different from this boards feel is that a different.

B

Yes- and there are three different sidebars, because if you phrase on the issue board, there's a it's a drawer on the issue itself is actually a sidebar and on the uh merge request, is another component as well.

B

I'm trying to log in with with chrome and see if that's the same.

B

A

Same behavior, that's weird! Let me see um on getlab.com, it's not like that, though, or if I try it on. Is it like that on gitlab.com.

B

I didn't try, we could. We can.

B

So this is good, but uh I have to go to boards.

B

Let's make sure that I don't disclose anything.

D

B

Okay, so if I go here.

B

Yes, it's the same angular.com.

A

Okay, I'm noticing, on my Mac, we're pretty good.

B

Yeah I, in fact I did try on Mac and that works. So that's why I'm sure it's a Windows related thing and I'm checking on Firefox as well now to make sure.

A

Let me try one more thing with the Mac, because I know I can I can recreate it on the Mac too.

B

Oh, you can yeah.

A

Something happens when um you change the max settings. The show scroll bars, you can have it. Let me show the scroll bars or do it only when scrolling and when.

D

A

Always shown uh that causes some some bumpage.

D

A

Sam we can test this out on the Mac. If you want to do it that way,.

B

uh Yes, we can I'm just trying to check on Firefox. In the meantime,.

A

And um oh and I'm on Firefox on the Mac on on.com, so this is yeah. This is an issuement.com. Oh.

B

Yeah yeah I I. We noted that on.com, you were just there on on Windows I. Guess yes, and this is Firefox on Windows and it works in here.

A

But look at the scroll bar, just if you scroll, oh yeah, see it's it's doing, that it's a fancy, scroll bar anything that does the actual like built-in scroll bar is gonna cause it to bump over. It seems like oh.

B

D

B

Oh I grabbed the wrong thing so now I see the scroll bar and that's still.

B

B

I, don't even know if that's really something on gitlab itself, it might be related to the to bootstrap.

A

Yeah yeah um I think we'll have to take a look so this this shows up.

A

Does this show up only in this component or does it the tool tip thing or does the toolted thing also show up in the issue when you're actually visiting the issue.

B

No, it's only on this component. Okay, okay,.

A

So that might be an indicator that there's somehow where it might be doing something weird with this one. So yeah, let's jump into the code and see how we're using setting up the tooltip.

B

Yeah and and that's here so it's basically this one.

B

D

B

Using the the tooltip directive to show the window, the tooltip on top nothing.

A

This is for the um this is for the uh boards sidebar.

B

uh It's a shared component for all the three sidebars. Oh.

A

A

All right: let's try, let's try this way. We might. We might get something if we inspect our.

A

D

Might want I.

A

Think we might want to test this out on the Mac, um because it's so easy to switch back and forth between the scroll bar situation.

A

Okay, I, don't know, I, don't know how to do it on Windows. Maybe it's easy to do on Windows, but.

B

uh uh If you tell me how to do the scribble thingy on Mac, because I never did it, we can have a look on the Mac okay, yeah.

A

It's it that's pretty easy. I can also share my screen. We can look at. We can look at my screen at the moment. Oh.

B

Okay, yeah sure, okay,.

A

I'll uh I think I may do that. Let me make sure I'm not how do let's see here all right, I'm just on um it's not gitlab right now, getlab.com I can add some real issues.

A

B

D

A

Yeah I go to my settings and I go to scroll bars all.

C

A

Those okay: now you see the scroll bar everything got pushed over so.

D

That's interesting.

A

So when scrolling and then always this line doesn't move, but we must have something that, like oh, when you're in a scroll bar uh we're now shorter, somehow and that's causing this issue yeah.

A

So let's see how we actually make it shorter. Let's see if we can find the CSS rule for that, and maybe if we got rid of that rule.

B

A

A

D

A

A

Jill drawer, the width is like that um yeah I, wonder if we could test this on a good lab UI. Maybe it is just a uh what do I think also look at that. The drawer includes the drawer includes the sidebar.

B

Okay, the body does not, but it has uh 100 width.

A

uh Do you think maybe it's.

A

D

A

If we get rid of 100 width, no, it's it's! So there.

A

All right, so this is the time tracker. One I'm.

D

Really looking for things like.

A

Negative margin, Maybe, you know.

B

I, don't think that's the case. Also I wonder if I try, because the other buttons on the sidebar don't have a tooltip, but I mean because you used to know if I can add one quickly and I should be able to.

A

Let me see if I make this bigger, I made it bigger. Are we still yeah we're still having a hard time finding things.

B

And also the strange thing is that, as soon as you move over to the other button, yeah, the positions correctly.

A

That is strange. What's what's causing that.

C

ah Why is it so weird.

A

um We're gonna see if this is we're, gonna look for existing issues. Bootstrap, you tool tip, do they call it a carrot or with a carrot so.

A

D

A

D

Right they're saying oh.

A

That's interesting.

A

D

Gonna say: Arrow Maybe.

D

B

This is so subtle and I think really an edge case. Then.

A

I'm nerd sniped I want to fix I want to figure it out.

A

I want to figure it out.

A

Let's, um let's check check out.

A

Check out get lab UI, so here we we've got drawers here.

A

Let's see if we can um recreate recreated and gitlab UI, what do you think.

B

I think that could be doable if we create a yeah yeah a drawer with a with some width.

A

Yeah: let's try that out.

D

All right, the closest one.

A

um Or if you want to, uh if you want to call it quits on this thing, you could do that.

A

I'm fine! But what I'm saying if you? If, if.

D

A

Stand to look at tool tips anymore. Let me know if you get okay.

D

B

Okay, I spent hours fixing a one pixel bug so yeah.

A

You know what, though, with every every person is going to view the page that one pixel adds up and becomes like a hundred thousand pixel fix. That's really good.

B

A

All right here we go yarn story, books or Nicholas is like man these. um What's the word uh uh neurotic people comparing compiled javascript's character by character and then the tool tips off by a couple of pixels and it's like well, we gotta.

A

I actually never noticed this.

A

Yeah all right this is this is why you know product managers are helpful, because if, if you just let the engineers loose on the problems, they might get wrapped up in these one pixel problems.

A

um All right, so here's a cool drawer, uh that's nice! Let's see if we can add uh see if we can add like a tool to be thanks to one of the stories so I'm going to drawer stories.

D

A

A

What is this create.

D

A

A

Oh generate your eyes all right.

D

A

Where we'll do it all right, um so we want to add: maybe a button and a label to.

C

A

So we'll go, we have a button here. Oh this button already do tool tip. What's the uh no.

B

You need the directive. Okay,.

A

Let's do that then um tool setup directive, probably from.

A

A

Okay, then, over, where we're doing.

A

Specify components: ah yes, we have GL George, you'll mark down and we'll.

C

Put in oh, but it's not.

A

A component, uh but next to it we'll do directives, Shields water, JL towards him directly, okay, cool!

A

um So then this is the big label that we were doing, but maybe do we want to do do you have maybe the utility classes for doing that same.

B

A

We can put a button all the way over to the side.

B

uh Let me check um no I, don't because that's a div with uh Flex blocks and aligning the stuff on the end.

A

Right I think I think we can do that so I'm thinking it's something like.

B

uh Gl display Flex and then.

A

I think that's it then! Oh, my gosh.

A

B

Oh yeah, the label and the button on the same line.

A

Right and I think we could do um GL ml Auto.

A

B

A

The button to the end yeah.

B

A

So then we're saying V, GL tool tip do I have to do any thoughts or something.

B

uh Vgltooltip.Top, if you want to show it on top okay.

A

Let's do that just like that.

B

A

A

We will call it uh test.

A

Maybe we should give it just an icon, like the other ones, yeah, let's give it just an icon like the other ones. How do we do that.

B

uh Instead of the content, you use a GL icon.

A

I think it's I think you give it as a property. Oh, we.

B

Can I think so um you can but that's adding a margin, because button icons should also have some text. So you, if you only want the icon, you do that by setting its con the content of the button.

A

We have I, I, only know this, because I just ran into it. We have like an icon. Only version of the button oh I feel like you should be able to make a button without content that has just icon, uh I think so, uh but I might be wrong. Let's. uh Let's.

B

Try it, it happened. um I left my right margin to the to the icon. So that's why I avoided all right. Oh that's! Working.

A

So it's kind of it's kind of working, um I'm noticing I, probably didn't do something correctly: oh yeah, that's kind of working all right, my tool tips not doing anything. Yep.

A

Tool tip uh do I put this in there. Maybe.

B

A

Oh, what's it upset about.

B

Yeah I don't think that you're supposed to do that it should take the title. The title yeah gel button, visual tooltip- that should work.

B

Is it mounting the directive.

C

A

uh Well, it failed when I try to pass. You know. Well, I, don't know. Maybe it's not story. Options is oh, these are just story options. Please do okay default, oh it should. These are called directives. Is that what we call it.

B

Directives, yes, you do GL tooltip column, GL, tooltip directive,.

A

Oh um wait: I think this is probably a named I.

D

B

How important that, uh like the other? Oh, oh, okay, but that's working! That's.

A

Working now, um let's put another button next to it, because that was that's the actual situation. Yeah.

A

Can you think of a cool icon? I've got the eye.

B

uh You can do timer to get the little clock steal.

A

The little clock.

D

B

Is it timer, yeah, timer or Plus?

B

This is already today nope.

A

D

A

Working um and let me.

B

Those are working, it wasn't working.

B

Can you try setting a specific width to the drawer because.

A

It doesn't have one here.

B

I don't know it.

A

Does have a default width here.

B

And the content as with 100, yes,.

B

A

um What are the other button settings for those buttons.

B

um uh Those buttons uh set the category to tertiary and size small.

B

Then it's only the area label and data test, ID.

A

A

Yeah I was able to figure that out um I wonder if maybe, if it's all the way to the end, maybe it has a harder time.

A

It's able to figure out pretty well.

B

So that must be something to that specific sidebar.

D

A

I think you're right.

A

um Let's go back to here.

C

A

B

Is it the right margin.

A

Yeah, that's what I'm wondering. um Maybe we could try.

B

Yeah, because the elements in here don't have any margins of the separator yeah.

A

D

A

If that's it just for fun people, you can try adding margin.

A

A

But then I think then I think on top of it is like.

B

It's the perfect storm.

A

D

Like it's got to.

A

Be something like this I don't know all right: let's, let's go back to.

D

A

A

Yeah, so this thing somehow goes all the way to the end.

A

Oh and okay, yeah that goes all the way to the end. Sorry.

A

So every single one of these children has a margin left. We get rid of these.

A

B

C

B

A

Okay, yeah: that's.

D

A

B

Does the drawer have its overflow X set.

A

The Overflow I really sure it's gonna be set um here.

A

B

A

A

And maybe we're gonna see yeah.

B

A

B

Yeah because that's there's anything overflowing.

A

Popper, what are you doing Timmy, so the Popper's, the thing that I think it uses under the hood to figure this out yeah if I can force this to hover. uh It's not gonna know.

B

That's uh an event not.

A

Just uh I can break on.

A

Let me unforce it to hover. I can figure that out. Then I can do something where I break on.

A

I think this would be it yeah, yeah, yeah, yeah, yeah, yeah yeah, because.

D

A

The attribute of attribute everything I know: oh my gosh I know these are not all undefined.

A

So I'm sorry, BB tool tip is fixing the title.

B

D

A

Oh Istanbul, uh that's got to be a um I, think, that's a test coverage tool, s.

B

Oh okay, that makes more sense.

A

More sense, let's not give it too much credit here.

B

Yeah yeah, this is this: is it.

A

Does sound like um no sounds, maybe a little aggressive, it's like Istanbul ignore this or else yeah.

C

A

B

This, when so the popover, it's inserting the tooltip at the end of the body, and that has a translated 3D.

A

Yeah, okay: this is getting all of this. Firefox is not the best Dev tools experience.

A

um Unfortunately,.

A

B

D

A

Move over to Chrome.

A

So setting the create template and show.

B

Yeah, but also that that the the breakpoint triggered as soon.

A

As you went, oh wait, did you just see? What just did you see what just happened.

D

A

Everything pushed over for a second did. You see that.

B

A

I'm gonna have to keep going and then we're gonna do this again. Okay, all.

D

A

D

All right boom.

A

uh uh Go, go, go, go, go, go.

A

A

Okay, yeah we're we're.

D

A

Lots of stuff is happening, something something's about to happen. So hang.

B

On I'm kicking my eyes on the page: okay,.

A

Keep your eyes on the page.

B

C

A

C

B

C

A

Yeah, this has got to be related to it. So what.

D

Did it just do what.

A

D

Stepped over this thing.

A

B

Showing another sidebar.

A

Yeah: okay, what do I have, as my system settings I, do? Have it say always show the scroll bar.

B

Okay- and that makes sense- because this would push over the content yeah.

A

But how come we've gotten rid of how come when I have always show the scroll bar? It's not showing it here.

B

uh uh I wonder: what's that scroll bar for.

A

So this is the inner scroll bar which, if I say always shows scroll bars. It should always show it.

B

But that's not in always that's in auto.

A

Well, when I say system-wide, oh okay always show scroll bars, it means anytime. You're scrolling show me the bar. So that's why you get the double scroll bar from it's not really any way around it yeah. We found a way around it, but it's doing something weird to pop her figuring out trying to figure out where it's going to place things, because it must be triggering something: that's actually showing the bar.

A

So now I don't know, what's changed where it's actually showing the scroll bar.

B

Yeah I wondered that scroll bar that's coming from the inner content.

B

C

B

Has that has uh overflow? Why OTA or always.

A

Yeah uh CSS um hide scroll bar but allow scroll.

B

Yeah, there's no way real way around that.

A

C

A

Is do we? Are we doing something like this? You.

B

Know yeah exactly that's what I thought, because you basically have two components: the inner one is bigger, so the scroll bar is not shown.

A

Yeah yeah yeah yeah all right. Let's go to.

B

Oh, so maybe we are using that technique, that the inner content is getting resized and it doesn't have that with increase.

A

Yeah box sizing content box, oh padding, yeah yeah. Let's see, let's see, I go here to the child to be here.

A

Do we have no, that's not it. If I do these children.

A

Right now, the width is 350 for this thing, including this scroll bar yeah,.

A

I keep going. It then hides it again.

B

A

Somehow it knows we can get rid of it. I wanna, I wanna. Stop it now. I want to see my big my big question.

A

B

C

Oh wait. Wait. Wait. Wait! Wait! Oh! Oh! No!

C

B

Did you get it I.

A

B

A

We're gonna: do it one more time.

A

It's not this scroll. This is the oh dude. This is crazy.

B

It's the the board. It's.

A

The out knows the whole page. The tool tip gets added to the bottom.

B

A

Page so it must be getting added, causing an overflow. The whole page really quickly positioning it based on the Overflow. It's no longer the bottom, but we save the position.

A

Yeah, that's weird, uh so one is like okay, we shouldn't ever. We should like display none tool tips when they get added to the bottom. That's a thing like: let's, that's, that's what's causing it, let's, let's uh all right! It's doing this thing again,.

A

D

Yeah, this is gonna.

A

Show up a lot actually, okay, it it added it to the bottom and that's what's caused.

D

A

Somehow, like down.

C

A

You know and if I go down to the tool, tip, I, guess and I actually delete this thing. I know what what do you what's a I, don't know what I can what I can add to like just say: no, don't do that, ignore this who's playing on or position um fixed, fixed, oh and I, think that that'll fix it.

A

Except not I'd have to find a I'd have to actually insert a style overall. Let's say that one more time all right boom, that's actually. uh Where did we go.

B

uh uh This curl bar is shown, but we don't have the tooltip yet yeah, but.

A

It's it's! It's on the.

A

Oh I, don't think it liked it because I deleted it.

D

A

It should be here somewhere, though yeah.

B

A

um And so then it's gonna add it to the document and then it seems like it's trying to find the position and then that gets rid of the outer scroll bars and this position now is off. So it's off by a scroll, Bar's width is what we're observing so yeah and yeah I think one fix would be what's a class, we can add to that.

A

Don't adjust the scroll with your presence when we add you to the document before positioning it.

A

uh I think that's probably our best bet. I'm gonna try one more time.

A

Boom all right and are we showing up here at all yeah I got I must have done something to to put in a weird State. Let me I'd like to see if I can just reload this try it again, um but I think this is going to show up a lot and yeah Mac. It's easy to ignore it on Mac, because the scroll bars are by default not going to adjust the width of things, um but everything else. It's gonna show up a lot. I think.

A

A

ah Where's, what are we doing? Why.

D

Is it yeah? What are we doing.

A

What makes you want to scroll right now.

B

If you over the new scrollball that came up well, that's the container for that.

A

Trying to see what what's going down to this.

A

I, don't know it's I'm, not seeing it quite show up quite yet, though, but I am seeing the.

A

It's not clear to me why there's an outer scroll bar here now.

B

The other one is the main one for the for the page.

A

Yeah well, I mean yeah we're at time. I'm gonna have to um it's a good thing. We recorded this, especially at the very end where we actually found something.

A

um I'm gonna I'll create an issue and I'll pin you on it and we'll we'll drop our investigation in it, and maybe maybe we'll pick it up another time or maybe someone else would be able to pick it up. Yeah interesting.

A

Yeah, it's not just a windows thing and it's I think it's going to be pretty prevalent.

B

Prevalent, if you enable the scroll bars.

A

B

A

With that, with that said, I think that's going to show up mostly in boards where we we intentionally try to not have a scroll bar, because all the other pages is probably not going to show up because they're always content is always gonna blow past the page. It's.

D

Really interesting.

A

Cool wow, I didn't think we'd actually find anything me.

B

A

All right! Well thanks! So much thanks, uh Marco thanks Nicholas for hopping on I'll.

B

Catch you all later.

A

Bye bye-bye.