Hello. And, welcome to episode. 130. Of the joy of coding. My, name is Mike Conley, and hi. How are you. Episode, 130 we're gonna be as per, usual hacking. On Firefox, stuff today good to see you I'm glad you're here let's. Get. Started. So. Here's the agenda for today a reminder, as usual. No plan survives breakfast. I kind, of have a sense of what I want to do today but only kind of and. You. Know I might, get derailed I haven't pre-planned, any of these things that we're about to do today beyond, just. Kind of thinking I'd like to do them so. The solutions, that I end up coming up with or the approaches, I'm making, it up as I go and, your your I'm trying to capture software. Development, in the raw and so. Hopefully, that's, what you end up seeing and I just realize now I need to plug in my laptop or, else I'm going to quickly run out of batteries, so. Let me do that. So first. Thing I want to do is do a quick shout out to the episode, guide and I'm actually got some special, news, about. The episode guide so there is an episode guide if, you go and follow this link in the agenda, hold. On let me back up a second here this, agenda that we're looking at is something. That you can have access to depending. On where you are watching, this stream maybe you're watching it live right now or maybe you're watching it. Like. A recording. And you're, in the future some at some point hello future. This. Guide should be available there's a link somewhere, near, you and if you're watching this on air Mozilla it's, in the additional links section down below if you're, watching this on YouTube. It's in the video description if you're, watching this on Facebook, it's, in a pinned comment, below this video and if you're watching this on Twitch you, folks, on Twitch there, is a, link. That I just dropped into the twitch chat so hopefully you can follow that. There's. Also a link to rate. This episode, and let me know what you of. Of. This, episode, I read all the ratings that come come, in and in order to encourage more people to send ratings I've hidden a picture, of myself inside, the rating form so, go check it out go look at the rating form after this episode look at the picture if. You care, to see a picture, of me, maybe. I'll do that every week I'll put a new funny picture, in just just. To drive more people into, that form to, give me more feedback so, this, episode, guide if you were to click on the link in the agenda which you have access to you'd, notice that there are links. For a bunch of episodes leading, right up to 127. I think that's the most recent one and some. Of these. Episode. Guides have I think, they all have links to the episode, as well as to the agenda but some of them also. Have. High sort, of high-level, broad, view. Listings. Of the topics, that I cover for example. In this one I talked about like week maps and what keys. Can be in a week map and how to push to try server and. What. Else did I talk about in episode 126. I talked about some keyboard shortcuts that I use and adding, key word searches to Firefox, that sort of thing so you should check out the episode guide and one, of the things I wanted to do and just this past weekend had the opportunity, to do is. You. Know I've got 127. 128, if you, sum it all cuz they're a couple of missing episodes if you sum up all the videos there's. Something, like 127. Or hundred twenty-eight episodes, in total and each, one is about two, hours long so, if we, round down a little. Bit and do a little bit of math there's over like ten days, worth of material, if you were to watch so, like Pat like just, end to end if you were to watch every single episode and then you've you've, like a little, over B, something like a week and a half's worth of material maybe a little over that that's, a lot of material and there might, be some. Useful information in here that would be nice to search and would be nice for people to be able to read because some people. Might want to, view. The joy of coding watch these episodes but maybe they can't hear maybe. They'd like to be able to read, what I'm saying and so. One, thing I wanted to do was take advantage, of some.
Research That was recently done. In. The Mozilla, emerging. Technologies, group called, deep speech. So. Mozilla deep speech is a. Speech-to-text. Engine. That, is, quite. Good at powers like, we have this test pilot add-on that is. Called voice fill I think that's powered by deep speech, the, Internet. Of Things project. The, things stuff that's coming out of Mozilla. Right now for controlling. Internet. Of Things devices, in your home uses deep speech for simple voice commands, and you. Can download this, pre-trained model it's a pretty big download but there are instructions on how you can download the pre train model and run, it on some wave. Data, it's like waveform, data audio data, and get. Inferences. Out of it get text out of it and that's, what I've started to do I wrote a program, called ads oh, let. Me show you the source code real quick so, it's inside the joy of coding absolute guide repository. I put, a folder. Right at the bottom here called utils, inside. This is ads oh, just. Trivia, ads Oh is named, after the character ads. Oh of milk, benedictine, novice from one of my favorite novels and berto echoes the name of the Rose it's, a very good book highly, recommended. If. You like medieval murder mysteries. Written. By someone who like, you. Know knows it has a good sense of history and can write really really well Umberto, Eco my. One, of my favorite authors so, this script adds. Oppai. Will. Wrap. A bunch of utilities, it's this is a quick and dirty hack that I threw together but essentially, it, will take, a link, you pass, it a link to a video I, want, one, of my joy of coding videos for example it. Will download that video then. It will call. Into ffmpeg, which, if you're not familiar is, a sort. Of a Swiss Army knife for video, and audio encoding, decoding and, editing. It. Will call onto ffmpeg and, strip. The audio out and produce. A temporary. File which is a sixteen thousand, Hertz. 16-bit. Wave file because that's what deep speech understands, and, then.
Once It has that wave file it will pass that into deep speech and produce, what, are called what. Is called a VTT, file a VTT. File is, or. Webvtt is, a standard. For video, text, track, that's. What the VT T stands for and you, can use it in your web videos. Your, your with, your video tags to add, captions. Or subtitles to. Your videos and, that's what I'm producing here and I've, started to produce some. So. Ads Oh is being, used to produce, transcriptions. Essentially. Automated. Transcriptions, of episodes, of the joy of coding and I've started to do this and it takes a little bit of time it, took I think for an hour and a half of video. It. Takes something like two. Hours. Or two-and-a-half hours, depending on what else the computer is doing to. Produce the transcription. I've. Started to track, the, work in the, spreadsheet which you can also access from the, from. The from. The agenda so I've done. Episodes, one sixteen, because, sixteen was short it was one of my test cases and then I did twenty and twenty nine my, two recent, episodes and what, I do after I produced these transcriptions. Is I upload, them to a service called amara.org. AMA, RA org. And what, you can do if you go to amara.org is. You, can help edit these transcripts. Transcriptions. And improve them so. The. Video if you play it I'm gonna play it but I'm gonna mute it you, can see like there. Are transcriptions. That are added here see. This is from ads oh but also from, I think myself, and, Sam Foster one of a colleague, here at Mozilla viewer, of the joy of coding has, contributed. To improving the. Transcriptions, that adds au comes up with because some of the transcriptions, that adds who comes up with are really quite. Poor like it I'd, say it gets it about 45 to 50 percent right, which is pretty good especially, because I'm talking, quickly and I'm using a lot of like Firefox.
And Gecko jargon so I think that adds Oh actually does a pretty good job but. The. The. Transcriptions. Themselves, could use a human touch and that's what amara.org, is. Useful for so, this is a free platform, that I'm using for, making. It possible for you my. Viewing community, to contribute if you want to this is completely, optional but if you want to help me out if you want to help out other viewers, maybe, viewers, who want to hear. Sorry. Who want to read the, text but and, cannot hear it or don't want to hear it or perhaps, you want to help because in. The future I'll be using this to build, a search index of all of the stuff I've covered and then, make it easier to translate, the videos from one format from one language to another all, of this will help and so if you go to amara.org and. Follow the links in the spreadsheet you can contribute, translations. So you'd end up on a site like this or. A page like this and then you can click the video here. Under. The video where it says English and you can choose improve. These subtitles, if you, choose improve these subtitles, you, go to this leg editor, tool and then, you can start editing the subtitles, and. And. That's. Fantastic, if, you, can contribute, amazing. And so, that's the thing that I'm putting, up to you if you've wanted, to contribute to, Mozilla, or Firefox, or the, joy of coding and you're not sure how are, you you you don't know how if you're. You. Know you feel nervous about writing, patches, or something this is another way you can contribute is by helping to transcribe so. These, are the links just follow them in in. The spreadsheet that's in the agenda I'm in the middle of transcribing, too it might actually be done we can check because I'm using beast mode to do it so we can check to see how beast mode is doing let's just do that real quick let's see how episode, 2. Is doing. So. I'm gonna pump up the font so you can see it and. You. Can't see the bottom so I'm gonna bring this up. So. I'm gonna sign into beast mode I. Put. In the wrong password I. Put. In the wrong password again, oh. Come. On. There. We go. And then, if you check out. Yeah. It's done they finished it took 2 hours. And 14, minutes on, beast mode to, transcribe an hour and a half of audio, and it. Produced this file called joy, of coding 0:02 vtt, so actually, now is a great opportunity for me to. To. Pull down joy of coding episode. 3 if I can find it. I'll. Do joy of coding episode, 3 let's find it here. It is and, I'm just gonna kick this off this transcription, so I'll go to download, I'm gonna choose the video, link here and then I'm gonna tell ads oh, python. Ads oh what's. The format, here it wants deep. Speech. Monitor. Which is project, steep speech and then, vid. URL. Put that in quotes and then the output. Which. Unfortunately. Is. Being. Truncated, here. Uh-oh. Live, hacking, is saying Smurf T I think you're offline, on YouTube Oh No. What's happened on YouTube let me find out. What's. Happening on YouTube quick. To the live dashboard. Video. Output, is low. YouTube's. Not receiving, enough video to maintain smooth streaming so, there's gonna be buffering, uh-oh. How. Do i, am. I dropping for i've dropped a bunch of frames. Why. Would that be. Am I still dropping frames. Maybe. Reload, if you're on YouTube right now I've. Stuff I've apparently, I've dropped some frames but, I'm not dropping frames right now maybe, there was like a little youtube hiccup I'm, monitoring, the output here, my frame drop rate is going down, so. Maybe there was like a mild hiccup let's, reload this page and, see if the stream health is improved. Stream. Health is still not super great. Receiving. Enough video. Hmm. Oh now. It's better stream health is now green, okay, Smurf D hopefully that's better.
Thanks, For alerting me. You. Just got a peek behind the curtain there I'm, glad I didn't accidentally, show you my stream key, so. We're gonna start. By. Was. It here ads Oh output, joy of coding. 0:03. Vtt, that's. We're gonna generate so let's watch let's see what happens when, you press ENTER it's, gonna go download the. Video. This. Is using a handy python module. Called progress bar 2 which creates these really nice progress bars. I didn't. Coat them thankfully. Someone, else did a sometimes. Like. Libraries, are the best. Both. Software libraries. And. Actual. Libraries. Smurfs. D says it appears to work but I'm behind. Behind. Does. That mean that there's just like. I'm. A little bit delayed, on YouTube, I. Guess, we'll see, maybe. If this is painful. To watch on YouTube consider, switching to twitch you, can also watch the joy of coding stream. I'm. Not sure if there's. Much else I can do at this point YouTube, might just need to catch up my. Framerate droppage, is continuing. To drop which is nice, my. Droppage rate. And, worse. Come push come to shove maybe, you just enjoy, watching the recording after the fact streaming, is always just a bit of a crapshoot sometimes, it works sometimes it doesn't it's so dependent on like network conditions but, at least the recording, whenever the recording is done it'll. Work out uh-oh. Such, file or directory whoops, there's a bug in ads oh so I recently pushed a patch and. I think I screwed up hang, on let me let. Me you're. Gonna watch me patch ads oh just on the fly here. So. What, I did was, I made it I create. These temporary. Files to. Download. The video too and to output. The wav file from ffmpeg, and, one. Of the things that I noticed was that I was being asked, oh yeah. That's why I gotta, put -. Why over here, I. Was, being asked if I want to overwrite the temporary, file that I just created by ffmpeg, and of, course I do I just created it so that you can write into it and and. It. Was there's. A - why argument. You can pass to. Ffmpeg. So that it just assumes that it can overwrite. Fix. - why parameter. To ffmpeg. Cody. Uh that's, it yeah. Origin/master. Just. Pushed to the master branch why not and then, gonna pull that down. Faster. And, then. Let's. Try that again, so. It's gonna download the video, superfast. Because. Of caching. Go. And get it I. Just. Like this isn't what I wanted to do today but I wanted to show. You what's going on and how adds it works and you can fork out if you want to use ads over your own videos feel free I'm eeen all the software is is, free the, audio. Transcription. Are. The deep. Speech model is all free so ffmpeg, is now stripping, the wav format, of the wav file out sixteen. Thousand, Hertz mono and now, it's loading the deep speech model. And, it's going to write to joy of coding 0:03 vtt, and. Then. If, all goes well deep. Speech will start doing this is the sort of the long. Part. Of the operation. Is, the. Transcription, part and so. What. We can do is we can actually take a look and see what's being written to this joy, of coding three file so. It's. Tale F joy, of coding dashes -, zero zero three dot v TT but. We can see hey, it's, recognizing, words hello everybody, I'm. Welcome, to so three of that's, going to be welcome, to episode, 3 of the and I, missed something going, must, be coding I'm going to be packing on some far box buts. I'm. Gonna be hacking on so far if I see this is the sort of thing though like I need. I need people to help with because. The transcriptions, are pretty good but not perfect follow. Along, as I do my thing and do and hopefully, we'll get some work done so uh let's, let's get right down to it that sounds like me I mean we're doing this about an hour and, a half so too much, time I mean then.
Muta. Lynne Tamara. Too. Much time I mean I'm you - Lynne Tamara I. Don't. Know what I said, there so that you can and see what the plan is I. Know. I have no idea but there we go and clearly, there are times when I burst a lot of words into five seconds, which, maybe, I need to change the interval or maybe I need to just slow down my speaking. In. Future, because I'm doing five second intervals here anyways, that's what's going on that's ads oh we're, gonna let ads out do its work in the background it's, gonna take more, than this episode, lengths to do this but. I'll, disconnect from these. Mode and let it work in the background so, what. Are we doing today that's ads oh by the way feel. Free to check it out if, you've got patches if you want to contribute, to the ads o'toole it's right sitting there and the joy of coding. Utils. Function. Up utils, folder go, ahead and read the. Documentation. The. Code is licensed to MPL to. And it's. Not very long it's not super, comfy it's pretty hacky I just threw it together but go check it out if you're curious and it's not it's. Mostly just gluing together libraries. The. Most impressive part I'd say is the deep speech stuff and that, is not stuff I wrote that, is something, that came out of like the emerging. Technologies, group and I'm just I'm, riding. There tailcoats okay. So what are we doing dude that that's all, I wanted to say about ads oh sorry, for burning like 15. Minutes talking about it. Remember, last week we were working on promise, document. Flushed well guess what that works done it, landed. So. Now. All, of that panel work that Paolo was doing that he, he, was blocked on me he needed promise document, flushed now. He has, it and so we've, got. Sort. Of these really nice transitions. That are occurring without doing layout. Flushes, and. And. So, I was able to unblock him which I felt pretty good about it doesn't feel good when you're blocking someone else's work when they're waiting patiently. For your, work and when he by. Using promise, document flushed he was also able to get. Rid of an, X. BL binding. The. Panel multi-view X BL binding we're attempting to, get rid of all of our X BL bindings, X BL bindings are like how we bind, JavaScript, logic, to custom, nodes, it's basically like custom elements but um. From. Mid. To late 2000s, custom elements and there. Are interesting. Characteristics. Of X Bo that to, put it mildly make, it a bit, of a challenge to work with so we're attempting to migrate away from X BL and we can do that now that we don't have to worry about, old-school.
Zul Add-ons, because, we now use web extensions, we are free to clean. Out all of the X BL in the underlying platform which, is really really nice we can. Transition. To code, that is easier. To reason about and easier. To maintain and, easier, to improve, over time because, X BL and zu will slow us down a lot we. Move as fast as we can but X BL and Zul are they, slow us down and so, there's this. Oops that's an R we xbl, still calm. Which. Has, this nice graph that. Shows how. Xbl, is decreasing. The amount of xbl code is decreasing in the tree over time and there's, this nice big fall off I, think we got rid of, a. Binding. Here, like. We definitely got rid of the panel multi-view binding around here but this big fall off is because we got discovered the tab browser xbl binding, which. Is really really nice and so there's a nice big, cliff there a, humongous. Chunk I think it was the vast majority of our xbl lines of code was, in the tab browser binding. And that's this blue chunk down here and it's. Just gone now we got rid of it which is great, news. So. That's. That that was promised document, flushed, and. Then the other thing I want to talk about was the, there. Was this bug that I was dealing with we've, been working on tab warming for it felt like forever and, there. Was this bug that, we were dealing with with tab warming, where I think I'd fixed it I'll and it landed a patch to, fix like, these, really really short tab, spinners. Which. We never want to see and. It. Landed and bounced and I couldn't figure out what the issue was it turned out it wasn't nearly as hard as I thought it was I was it just took me a while to get there because I was concentrating. So much on promise document fleshed work but, if you curious about why it was broken, you, should read this comment this. Comment sort of explains why things were broken and it is landed so, I am confident, now that, tab. Warming, is working, pretty well and it's. Still off by default we're, about to end the. 60. Cycle far-far, nightly, 60 is about to become nightly, 61, in about a week or so and whenever, that happens, very early on in the sixty one cycle I'm going to turn on tab warming by default nightly and if all goes well I'm. Gonna have a ride the trains out to release but, if you can actually if you're on nightly you can try tab, warming right now if, you go to about config, and flip, browser tabs, remote. Dot warm up unable to true and, restart. The browser, you. Can test tab warming, and I'm testing it right now and I feel pretty good about it and I feel like tab. Switching, does get faster with tab warming that. Is my anecdotal. Personal. Experience. And I'm hoping that once we turn on by default the data will also support, that, anecdotal. Evidence that it improves things so. That's. Done, tap. Tab, warming is coming soon to, a browser, near, you and I'm. Pretty, sure Firefox. Is the only browser that, does tab warming and. If. You curious about the technology, behind tab warming you should I wrote, a blog post that. I. Will link to there. You go there is a link in the agenda to. My blog post about how tab warming works.
So. You should check that. So. What are we going to work on today great. Question. Now, that we have promised, document, flushed, there. Are actually other. Layout. Flushes, that we can get rid of and I, have, been looking at one, so. On. The top of the. On. The, top of the list is this. Bug here, or, I, just I think I just picked it a random. One. Three five eight seven one nine I'll put a link to that. Here. In the agenda. And, let. Me attach. Some notes. So. I will create a new note for it in, Evernote as. Is. My habit and. So. What. I've done if we take a look at the patch. So. Before we had this we. Have this function inside. Let. Me describe kind of what's going on here what we're trying to fix whenever. We. Have. The. Bookmarks. Toolbar open, so. That's this thing here this is the bookmarks, toolbar it's. Not available by default but a lot of people use it we. Do this calculation whenever. We are shrinking. When the stat window resizes, to determine, which, of these, can continue to stay in the toolbar and which have to be removed to see like that and that. Disappears, and that disappears, and then eventually it will reappear once there's enough space, like. That that. Sort of thing so. That. Was using a timer I think that still continues to use a timer. Browser. Places. Views j/s and. So. There's, this timer that's fired whenever, I think our resize, occurs and. We. Do what's called a deep bounce so if a lot of resize events are coming in, for. Each one of those resize events, we, create. A timer and if. There's our pre-existing, timer we cancel the old one and create a new timer and that way we, only do the calculation, once there's been enough of a pause between resize, events, such. That it's we feel like ok now we can do the calculation, so that's, called deep bouncing and. Once. We call, the timer we were. Doing this update, nodes visibility, timer callback and if we look at the source code in the tree as it is today, what. We were doing was. Using. Requestanimationframe, to. Queue up this function update. Nodes visibility, timer callback. Which. One. Of the first things it does is it, gets the bounding, client, wrecked of the, root element which I believe is the toolbar. And that's, a terrible time to do that using, requestanimationframe, as. A way of queuing, up a callback to fire so that you can get layout information is a terrible, time because that, you what you've done is you've moved Java scripts to run at, like, requestanimationframe. If. You look at the pipeline. Perform. At, there's. This document, here that you might if you might be interested in reading this is becoming like where. We put all the, tips and tricks for improving. Front-end. Performance while. Stuff to put the link to the note. There. We go and then. Notes. So. In this document. We. Talked about the. Pipeline of to, get pixels, to the screen and. This. Is the pipeline JavaScript style layout pane composite, and requestanimationframe. I think a lot of people think that what it does is accuse JavaScript, up if you call it in the, JavaScript step they, think that what it does is accuse JavaScript, to run after, all this stuff has occurred and then, it runs right at the beginning of the next JavaScript, tick, and that is not the case requestanimationframe.
Queues, Up JavaScript to run here. At the very end just before you're about to do style layout. Calculations. And that's, a that's a pretty bad time because chances. Are your. Chances. Are you are you. Have a Dom, that has been manipulated, by the time you reach the end of this javascript. Is well. If like the, Dom has been dirtied this is the time when it's most likely and that's, the worst time when the DOM is dirty to query for style and layout information, I mean, we're gonna do with the style and layout calculations. Anyways in this next step but, the thing is requestanimationframe. Is, where you want to manipulate. The Dom that's when you want to write to the dome, and change. Things. Like. Add classes. And add styles, and you know set, Heights and widths and move boxes around you do that in requestanimationframe. And then, style and layout calculations, occur and then only after those occur as a as part, of the standard refresh, driver tick that, you know happens. Every 16 milliseconds, or so then. The. Information, the style layout information having already been pre calculated, is cheap, to access from JavaScript, so, what you want is to run your your. JavaScript, for getting like sizes and position of things early. Very, early and that's what promise document flushed allows us to do that's the API we added is it runs JavaScript right. After, this right, here, at the very beginning and, so. That's, what I've started to modify the code to do before. We were just immediately, calling it bound and client wrecked inside a requestanimationframe, callback. Which is not great and now, instead. Of using requestanimationframe. We, call update nodes visibility, timer callback and one of the first things we do is, I. You I wait on promise. Document, flushed and I've. Also got this reentrant, sea guard, so. Here's. The thing I'm. Not entirely. Because. This function is becoming asynchronous, it's. Possible, for another timer. To, fire, before. This function, has had a chance, tête but the first time. Calling this function is have, a chance to exit and that's. A bit weird you could get like two of these functions. Executing. Maybe. At the same time which isn't a great situation it's not that's, not how this is supposed to behave so. What I've put is in, is something called a reentrant sea guard and that's. A very fancy, way of saying I set a boolean, at the beginning of the function to. True and then I clear it at false and when I enter, the function I check to see if that boolean is true and if so I bail out. That. Is what. I call a reentrant, sea guard and, I. Think. That's what I want to do. Hang. On. Updating. Nodes. Visibility. Set. To false oh. And. I probably don't want to set it on the prototype, I want to set it on, the. Instance. This. Dot updating.
Nodes. Visibility. Is, false. And. Then. Update. Nodes visibility. Let, me say true and then we say it's false here. And. So. What I do inside, this function is we'll wait for the document, to be flushed before getting the the rekt of the, toolbar once, we have that then. We will go through each of the children, to determine whether the child. Let's. See here is. Overflowed. And. If. So, then. We will. Like. Well. Promised. Are going flushed. Yeah, we get each I, wonder, if we should like do this all at once if not child overflowed. Child. Overflowed. Equals. Well, I do it this way anyway so for. Each of the children in, so. Each of the bookmarks, in the toolbar if we. Are not overflowed. Then we await. Promised document flushed we get the bounding client, wrecked. And. We. Check to see whether, or not the. Child wrecked left is less than spark left and the child correct right is greater, than scroll right right and that means we're overflowed, and. If. We are overflowed. Then. We queue up an, animation, frame to remove the attribute, and set, the visibility to hidden otherwise. We queue up an. Animation, frame to. Other. Do other things to the to the child and then we go through this again when. We go through it several times and chances, are the first time we go through we might need to flush. Wait for the document to be flush but second. Time through because we're waiting until requestanimationframe, to, actually touch the Dom this, should probably be pretty, fast like this should probably execute, within the same tick, synchronously. Which. Is kind, of a nice property and then, these all kind of get queued up right at the end and. Then. Once, this is all done then. We'll rebuild the Chevron and, then. We exit so, I think that's, working the way I want it to work and what I wanted to do is get, this patch up for review. So. You can see it one of the things that. We. Can do actually to make sure that this is working I have. This add-on. Called oh no reflow, which, measures. And. Detects, synchronous, layout, flushes, and. Here's. What we're gonna do actually I'm going to. Amend. The patch. And. Then. I'm going to. Pop. The patch off or like give, undo. The patch so that we're in the old state. Rebuild. And then I'm going to show you how oh no reflow detects those reflows, those. Layou flushes, and, then. We're, gonna put the patch back on rebuild, and then notice. That the flushes, should be gone that's, the hope and then. We should write a test that's the other thing we, should make it easy to write a test for this or we, should write a test for this because it should be easy. So. Let's. See here. So, let's. Get Ono reflow, installed. And enabled. There. It is it's. Running and now, I'm going to navigate to about blank. I'm. Actually going to clear. All of the pre-existing. Reflows. And then. I'm gonna resize the window let's let's see what happens right, resize. Okay, and now. We're gonna reload. The report we're, gonna take a look at the report here where did my reload button go. Did. I move my reload button, like. I may have. Yeah. Whoopsie-daisy. So. Yeah here it is PT update nodes visibility, timer callback, that is, being called. A lot and. This. One costs two milliseconds, most of these were all pretty cheap but these were pretty bad they're, not great and there were more here, and. So. Now let's, now. That we've established that, we reflow in that case. We. Will now update, to tip where we have our fix. Rebuild. And. Then, run. So, now we have to reload, our, emote. About. Debugging. Oh no. Reflow and. Now. Let's resize, the window again. Yeah. Nothing, no no. No. Problems there let's let's do, it again let's let's, do it again here, let's just make sure. It's. A bit janky still, but. I have a feeling that's because of other things unrelated to. The. Reflows. Let's. Reload. Yeah. I don't see it I don't see the the, Chevron stuff from places view so I think we fixed it so. The. First thing now to do is to make sure that we haven't broken anything so, let's run. Our tests, browser components, places. Tests. Let's. Test, the. Browser. Is. There anything about the bookmarks, toolbar. Browser. Toolbar. Overflow. That. Sounds, exactly or like what we want to test. Joke, says that. Now, they can want joy of coding properly, I'm, not sure what that means, oh. You've. You've, full screamed me is. That what has happened. Interesting. Well. Thank you I appreciate the vote of confidence. Oh thank. You for allowing me to take over a large portion of your screen.
Okay. Let's see what this test does. Huh, we got some failures. Now. Where. Are these failures introduced. By our patch, let's find out. And. If so well then we can start investigating, and finding out what we did what how did we break things. Because. Maybe we broke things or maybe the test needs, to be updated. Mario. Joads, bought a new TV, and so I'm fullscreen, Don Jones's, TV, hello. Jokes. This, TV feels, great, oh man. I'm inside your TV. This. Is a beautiful, piece of technology, that you have wow. You've, got a really nice apartment. It's. Me being weird. Inside, your TV well. Congratulations, on the new TV jokes, let's. Let's. Let's. Play a sound for jokes. Oh. Yeah. There. You go. So. Yeah we did break something. Without. The patch we've, passed, all 58 tests, with, the patch we. Fail, with, fails and tests so let's figure out what we broke. Faster. Meanwhile. We can also check to see how ad Zoe's doing, on beast. Mode we. Can keep checking back. If. I can get my password right come. On there. We go ads, oh is 20%. Done, episode. 3. All. Right pretty good pretty good. Keep. It up keep. It up ads oh. All. Right attach. So. Let's run the test again I, would. Fail. And then, we'll start pulling, apart the test and seeing what it does and how it works. Alright bunch, of failure let's see how it works let's open this test up. So. Thankfully it's one of our more ma it's a modern test it's using a sink, and a weight that's great, and let's. Take let's just look at the first failure. Line. 1:25. Happens. Right here. When. We were inside test. Index, so maybe I can skip some of these other tests, so, I will add dot skip. And. I. Guess. I don't need this one oh wait. I think I do, I think. Yeah. Hold up hold up. These. Are helper functions, and then this is the actual test. Itself, here, I think, I can skip this, one. Thang. Just index. Yeah. So. I'm gonna skip this, and. Let's. See which one it fails at. The. First failure occurs. Here. Inside. Note, at, last visible, index, right. Here. So. I think I can probably just disable, a bunch of these other tests. Like, this, is usually my first step when I'm debugging and test file ears I attempt to reduce the test case to as few things as possible. Minimizing. The test case. Like. What's the smallest unit, of thing that can fail. That, can get us into the failure State and. That's because it's easier to reason about. All right good so we passed nine tests, and we failed two tests that's, good and of. Those, two. The bookmark, node should be visible, no. It should be visible. So. What, we know now is we can probably. Ignore. Test, move index we can ignore all this, stuff. None. Of that's running. We. Can ignore. We. Have to do the setup probably, we. Do this stuff. But. This is where the failures occurring, oh, don't. Need to worry about this I think. It's. Here that we need to worry about so what does this test do now that we've subtracted. A, bunch of stuff. Let's. See what the test does first. Of all it looks like it erases, all of the bookmarks, so. It's doing some setup here and it inserts. Some. Like dummy bookmarks, I think and. It, how. Many, bookmarks. Count adds 250. 250. Bookmarks, and. Then. It uncollapse, is the bookmarks. Toolbar and. Then. It, sets up a cleanup function to hide everything and erase the bookmarks when we're done okay that's, easy that's the setup and in. This test we start by making sure that the overflow, Chevron, should, be visible. Because. We, have 250. Bookmarks in the bookmarks toolbar I guess and. Yeah. It's. Inside the toolbar, so. 250. Bookmarks means yeah you're gonna be overflowed, you're gonna have the Chevron and. The. Number of child notes should not equal the bookmarks, count because this. Shouldn't all be built by default, and, then. What we do is we go through each of the child nodes and if. The node, visibility. Is visible, we add. All nodes push node, and. Then. We assert that the number of visible nose should be smaller than the number of built nodes. Yeah. That's apparently, true and then. We call test, index. Node. At the last visible, index. It's. Making, sure that I guess that this node is visible let's find out, so.
You Take a, string. That's like I guess what the test is supposed to be doing and slightly descriptor, string you. Take a index. And then whether or not it's expected, to be visible in this case we expect of, all, the nodes that are visible we, take the last one and we expect it to still be visible. Strangely. So, we log the string. We. Get the child nodes. We. Get the length of all the children, we. Make sure that the node exists, by making, sure that the length is greater than the index we were passed we. Check to see if the previous node, before. The the one that we've passed the index for is visible. And, if. It's. Expected, that the, note. Is visible or, the previous note is visible then we're going to wait for the bookmarks, toolbar. Visibility. Updated, event which is I think what we fire here, when once all the stuff is done. Otherwise. We resolve immediately, and. Then. What we do is we insert. Another. Toolbar, are another bookmark, into the bookmarks. Toolbar. At the, index, that we had passed in I. See. So the idea is that you're gonna insert, one there and push the one that was used to be there off the end so that it becomes invisible. So, you update. Visibility. And, expected. Should, be. The. Children, found the added bookmark at the expected, position is that true. Yes. The expected, position and then. The bookmark, nodes should be visible. And. That. Is not true, I. Wonder. If that's because the. Bookmarks. Toolbar visibility. Updated, event is. Firing. Before the requestanimationframe. Functions. So. I wonder if we could put all this window. Requestanimationframe. We. Put those inside there. So. That we ensure that the. Event. Is fired after. These. Have fired I think, that's what we need to do. Sorry. My nose is itchy I swear. I'm not into the nose candy. Kelvin. Stroh asks. Is this webdev and the, answer is kind. Of I'm working, on a web browser Firefox. And so. You, could kind of call it web dev but not in the normal sense of the term. Thank. You for the question Kelvin, stro. All. Right see, if the test passes now. It, sure does okay now let's put everything that we had taken away back. I. Can. Just revert the test. For. All the changes to the test. And. Now rerun, the test. Calvin. Stroh says that's sick my friend is it hard to make I'm a beginner coder. Calvin. Stroh, welcome. I'm I'm, glad you're a beginner coder beginners, are the best and I'm so glad you're, hanging out, is it. Hard it can be. There, are harder bugs there are easier bugs probably, the hardest part is just how, much code there is for Firefox, is a human. To millions of lines there's no way, one. Human can have all of that in their head so there's a lot that you kind of have to blind yourself to and just, kind of go I don't understand, that I know the interface but I don't know how it works them okay with that like there's a lot of compartmentalization. You have to do and are in order to not go completely bonkers. Because, there's, so much code I mean Firefox is in many ways like an operating system it. Touches, a lot of the low-level system, interfaces, it's got like its own language scripting. Language built into it it's got like. All. The UI things tons of features it's. It's, pretty crazy but. If, you're a new coder Kelvin stro your beginner coder I have. Something for you, if. You go to. If. You're interested in contributing to Firefox. Then. I have something for you so. It. Earlier in the twitch chat Kelvin stro there, is a link to the agenda and if you don't see it if for some reason it's not there let me know and I'll put another copy. The link in there this one for, Kelvin, Stroh. There's. This tool called. Bugs ahoy which will allow you to find. What. We call mentored, easy fix bugs good first bugs for new people who want to hack on Firefox. Oh. You. Don't see the agenda okay I will give you a copy. Here.
Is The agenda and. Chemistro. Asks do you use HTML, and CSS to actually. Believe it or not the the UI. Of firefox is styled, using CSS, the, logic, a lot of it is written in JavaScript and the mark-up for the browser UI I'm going to show you some of the browser UI markup. Kind. Of looks like HTML. Kind. Of it's using a language that's similar to HTML called. Zul it's a similar, XML. Language. But it's got, some idiosyncrasies. That we're attempting to migrate away from where some of the browser UI is developed, in HTML, so. Yeah, if you know HTML CSS, and JavaScript, you. Might. Find, some, bugs and Firefox. You know. Reasonably. Okay to handle. So. He this tool bugs ahoy which, I linked to in the agenda will, allow you to choose things that you're interested in let me pump up the font a little bit so, for example if you're interested in the Firefox, user interface, it, will list out, a. Bunch, of bugs that we've identified as, good first bugs that. You. Can contribute to and you, can get a patch written for and each, one, of these bugs has, a mentor, assigned, to it who will guide you through every step of the way and answer your questions when you have them so. Yeah. There's a lot of stuff in here, let's. See default, new tab and normal, inter shows up in a private window that is currently, assigned to our third a shop. But, this one make probe process, choice, more visible in about telemetry that's. On a side maybe you're interested in hacking on that. Calvin. Stro this, is a telemetry, bug the, mentor, is Chris. HC. Chris. R chuttan, is the, IRC neck and. If. You're interested in getting started just comment in the bug and say I want to get started and Chetan will reach out to you and there, are instructions, on how to do a simple Firefox, build depending on what form, you're on. Here. How to build Firefox on Windows OS, X and Linux. So I'm gonna update the. Agenda. With that too and, then you can follow these instructions based. On your OS get a build going and then fix. The bug fix, the bug and get. Some of your code into Firefox and get. Mentored along the way so that's, for you Calvin Stroh, Calvin. Stir so says so far Fox is a browser app, Firefox. Is a web browser using. The gecko rendering, engine to render. Both the web content so. All, the stuff in here gecko. Renders it and gecko, also renders, the UI of the browser so. We. Use the layout and styling.
Mechanisms. For the web area. Also. For the user. Interface of the browser, so. Yes. Firefox, is a browser app. All. Right I'm gonna keep going we've got our test passing, I'm pretty, happy about it so let's see let's just run all the tests let's, run all the places tests, and see what happens. Just, gonna run some tests here no. Problem, just, opening some stuff up. Browsers. Showing, menus. Roo-doo-doo-doo-doo. I. Think. There's actually a way of doing this in headless, mode and then I wouldn't have to like sit here and watch it maybe. I should try that next time. Ah. Come. On. Ball. Rub, but don't don't open let's, play some music um. See. Here. That's. Not really music I don't actually have any music I can play without getting in trouble from YouTube so what, I'll do instead is just play some sounds, hey. What. Happened. Okie. Dokie oh. Yeah. It's. Me Mario. Do. Wrong. Do. Wrong. Do. Wrong. Come. On hurry. Up test. And. This is a loud one but one of my favorites. Wow. There are a lot of tests here I'm grateful, for that you want to have a lot of tests in your book. Marking code people, really care about bookmarks they, care that the UI for bookmarking. Works correctly oh good, we've got the bookmark, toolbar visible. Now that's important, that's all part. Of stuff that we touched so. That's. What we want. And, if this all passes, then I want to the next thing I want to do quickly, before the episode ends, is to, try and write a reflow, test, a. Regression. Test to make sure that we don't introduce new reflows hey, we passed all the tests that's great oh and. We're running more okay. I did. Not expect that. With these seem relevant, I saw, the bookmark, toolbar open at least once. Hey. We, did it we did it. Is. There another sound we completely go. Alright. So. Let's write a new test then. So. I'm gonna update. First, of all the commit message. Here. Get. Rid of. Rid. Of, synchronous. Layout. Flush. In browser. Places, view and, then. This. Uses. Promise, document, flushed to, make it. Easier. To query. For layout, information. For. The overflowing. Bookmark. Toolbar. Without. Causing. Sync, layout flushes. All. Dom, operations have, been moved, Dom. Operations on, the toolbar. I've. Been moved to, the end of, the. Move. To run within a, RIF request. Animation, frame, in, order to reduce. The. Likelihood. That. Other JavaScript. That's. About, to run will. Have. Will. Cause. Layout. Fleshes. Style. Or layout flushes. Okay. Now. Let's write our test. And. What this will be is I think a. Resize. A window resize. Test. How. Do I want to do this. Inside. Browser base, content. Performance. Test, performance. Browser. Window. I should probably do browser window. Resize, reflows.
So. You add a new one browser. Base, content, test performance, browser. Window. Resize. Reflows. Guess. And. I'm. Gonna start with nothing no expected, reflows to start. You, know having all their previous tests. Actually. What I'll do is. There. Was a function. In head that was like prepare, a. Ensure. No pre-loaded browser it, was like window. Prepare. Prepare. Settled, window that's what it was. Prepare. Settled, window. When. You do is you. Do. That a wait prepare, settled, window and, then. We're, going to. Resize. The window. Window. To size, to. 50. By 50. And, let's, see what happens. Wait. The resize event, we. Expect you know reflows. Let's. See what happens. We. Have to add it to our list of tests browser window, resize, reflows. Monkey, test browser-based, content, test performs browser window. Resize. Refunds. Up. A bump on bum buh buh buh dum oh oh. Whoops. Wack, boy DJ where'd you go. Come. On run. The test. So, caught. Window, dot size 2 is not a function, interesting. Is. It what is it window. Size. Oh. Is. It resize, to resize. To. 50. By 50 yeah, that's that's what it is okay resize to. Resize. To, a. Bumper. Boom. Boom. Did, it not. Resize. It. Didn't resize so, let's resize. Ourselves. Oh we. Also have to like, ensure. We display, the. Display. The. Bookmark. Toolbar. To. Do. Resize. - why wasn't, wait. For event wildwind, this run resized, -. Maybe. That's too small I don't. See why it would be. Consul, oh oh I know because. We called it on the wrong window window. Resized to. Okay, so we got a bunch of failures, here. That's. Excellent, so, we can start, logging these we've add them to our. Our. List of expected. Reflows. Stacked. Max, times, let's, say how many times once, twice. Three. Times three. Times. Happen. As expected, to happen up to 1 times must encounter 26. Times. Having, up to 1 times. So. Should, I have added 26. See. Was, encountered, 26. Times reflow, at. On. Overflow. Full-stack. This one was hit oh it's, a, slightly different, no. Full-stack, hit 20 times one was hit five times. On. Overflow. On overflow. On. Our flow for those, four three four nine four three five four and four three five eight, they're. All in. Constructor. Than they're on overflow under with law and overflow. Times. Maybe, I. Is. It not max - its max count that's what it is max. Count. Alright, that passes. So. Now let's make sure that we make, the. Toolbar. Show. How, does that work we have to. Uncollapse. I think I'm basically just gonna. Hold. I'm, just gonna take all this stuff. Async, function, setup. Some. Of these things I don't need. Arrey. Const. Bookmark. Count. Equals. Let's. Put in. 150. 150. A film. Okay. Let's. Do it on a particular, window, oh. Well. We do it on this window and then new windows get it as well okay that's good that's two, hours class by default. Promise. That toolbar, visibility. Uh-oh, what's. That. Okay, so, what we'll do then is. Function. A. Sinc function, toggle. Personal. Toolbar. When. Visible. Set, toolbar visibility, how's that work oh, I. See, he's, visible persistent, okay. To. Our ID. Two. Of our. Okay, so, then what we'll do is. Let. Transition. Promise. Little, browser test, me tales promise, our. Wait for, event. On. The. Toolbar. Wind. G, toolbar. Let. Toolbar, equal, windage, toolbar. And, then we'll say. Wait. For event on the toolbar. Transition. End. If. The. Event, here. We can promise. Focus up a little, if. The event. Dot. What is it a dot, property. Name. Return. E dot property equals max height. And. Then we need to use this transition, promise so we go set, toolbar, visibility. Toolbar. Visible. And, then. We will await the transition, promise. Okay. So. Then what we can do is. Where's your cleanup function. We. Yeah, I promise toolbar visibility. And. We do is pass the oh shoot. Window. I guess, I don't need to do that the. Reason I'm doing this not on the window but on the like, on the created, window if, I do it on the root window I think we'll it. Makes it easier to do things all in setup where I haven't opened the window yet and I, think it propagates, to new windows I could open and then just undo it on the original, window I'm gonna write tear down. Promise. Set, I, have, a I'll call this instead of top its, toggle personal toolbar true. And. Then toggle, personal. Toolbar, false. G toolbar, that's.
Not. Doesn't. Exist. Was. It, already. Told. What. Was G toolbar. Personal. Toolbar that's what it is. Here. We go. That should allow these. Limb, failures to go away and then. Let's. See what happens now. And. Then, like I i cobbled, a bunch of that stuff together I can probably, clean it up quite a bit and I'll do that next if this passes. We, have a failure. Failed. To handle, a rejection, in. Browser, places, views, 12. 65. 65. We're. Rejecting here, oh. I. I think what happens is I need to wait for after the. When. Oh wait. Toolbar. Event. Is, that visibility change what was it it was the act toolbar invisibility, he changed. Three, failures. Unexpected. Reflow. Opting. No in scroll, rect at, 1266. 1266. What. How, is this causing, a reflow. Unexpected. Reflow. That's, that's, not supposed to happen physically. In, Bradford, 1273. Also. Within a promise document, flushed callback this is where it's supposed to be safe what's going on here. Why. Would we be calling. Why, would that what. Maybe, we're not calling. When. That, win. Equals. This dot root out owner, global. And. Use win. Why. Would there be reflowing. The, Refresh driver is ticked. There. Shouldn't be any reflow, scheduled. No. This. Is bad news bears if this isn't working properly promised document flushed isn't working properly. This. Is bad maybe. Yeah, still, I expected. Reflow. Why. Why. Hang. On. Let's. Let's. Think this through. Dump. Running. Update. Nodes, running. Get. Bound, and client, wrecked. And. Need. Flush, and. Then. I, have, this function. Promise. Document. Flushed. Cert. No, flushes, required. No. Util do, that. Winn. Utils. This. Window. When. You dot, that. And, that we're. We're. Going to ensure that it. Doesn't need a. Flush. Of style. When. Utils. Needs flush, flush. Style, that. Should be false. All, right. I'm. Also going to write, in. Dump. Dirtying. The, frame. Tree. And. I'm. Waiting. For a promise, document, flushed. All. Caps. All, right. What's. The time 2:25 I think I'm gonna wrap this up shortly. But. I'm hoping I can get an answer here on what's going on. Okay. Go back to our logging. Waiting. For promised document flush, so. We don't need a flush. And. Then. Somehow we cause a reflow anyways. My, track equal, that. Dump. Returning. Wrecked. And. Then. Over. Here. Dump. Got, a reflow. And. Over. Here. Needs. Flesh. May. Be causing. Reflow now. I shouldn't. Cause a flush, why, would it cause a flush. Okay. Waiting. For promised document, flushed needs. A flush maybe cause a reflow now got a flow then, it dirtied, the frame, tree.
During. The frame treaty way running, get bad and client wracked needs. A flush false. May. Be causing, reflow now God reflow. Returning. Wrecked. Maybe. Causing a reflow, know. Whenever. Apparently, we don't need a flush. Why, would that be. Is. Wind. Top-level. Window. When. Equals, wind top. Should. Be. Because. I know that this is. Not gonna work for subframes. But. I don't think it is a subframe. What. Could this be, I. Don't. Understand. Okay well let's let's, I. Mean. One thing we could do although it's a little disappointing, we could use get bounds without flushing. So, during. The free waiting, for the processor is a top-level, window yet then, gig needs, a flash it causing reflow now and then. This one doesn't cause a, reflow. That. One didn't cause a reflow, this. One passed, what. Why would you have passed, so. It's intermittent. Did. I just do something to. Make, it pass. Oh now. It's passing. What. Verify. Please. Verify. We'll run the test and a whole bunch of different sort of scenarios, and make sure that it's. Hardened. There, we go there's our failure so it's intermittent, there's intermittent. It's. A reflow, occurring but why. Okay, I need to understand, that I'm gonna write that down. My. Test fails. Apparently. Even. If a top-level, window. Has. Promised, document, flushed called, on it in the. Callback. When. Accessing. A bound. And client wrecked I. Can. Still sometimes cause, a reflow to occur, why. Why. Hey. Maybe. Get, bounding, client rekt will did. Not get bounding I did. Do that here. And this, passes, I assert. That like, I. Get. A racket and I don't have. His reflow, occur. What, if it's. Not occurring I don't. See it because I, don't. Wait long enough wait, new promise, Brazil. Set, time of. 1000. Milliseconds. It's. Not possible, but. No matter what if you get bound and client, correct, you will cause a reflow. Observer. To fire. Wait, is, only invalid. Inside. Oh. I guess. I mean to do this instead. No. Wait, and. Promise. Just. Quick and dirty quick. And dirty trying, to validate. A hypothesis. Here and then I'm gonna call this episode done. Dunzo. Hmm. Hmm. Sir, flushes, are required. What, if I try and get the. Why. Would. Why. Why. It's. Off of a timer. All, right I got to find out I got to find out, why. This causes. A flush even though apparently we don't need one there. Must be something, I'm missing, but. That is for the next, that. I'll let. You know next time I see you in the next episode what the results of that investigation is, I don't think I have time to do it now so. Cliffhanger. I. Don't. Have an answer for you but hopefully by next week I will hey. Thank. You so much for watching episode. 100. And whatever this is. 130. This. Is episode of 130. Of the joy of coding thanks, so much hey before we go let's just quickly check in on ads oh and, see how it's doing transcribing, episode, 3 let's. See if it finished up. No. It's about halfway through just. Over halfway 60%. Done let's, see what it's what, it's saying if we can look, at batch. Of stuff that, Charles. As me to fix. Look, at this i Chuck, a specific. Printed. Fields. Again this is garbage. Right. So that duplex, stuff that's, forget. It Danone, now so, some of this is garbage so back to where I was the next step now I read stuff that right, in her reading the bug on that stuff might be to.
Place Thing which I can get rid of he. Wants me to get rid of. Who. Knows this. I might need to test afterwards because the reason that I added out. That. Might be it it, was because of, crash. And I remember the steps in a. To. Fix. All. Right I remember step up anyway, transcription, is still underway, 6%, done mr. reminder if you are interested, in helping to. Transcribe. The videos to fix, up the ads Oh transcriptions, Auto transcriptions, go, please to the link in the where, I put in the, agenda under episode guide check out the spreadsheet where you can see, the state of each trance Christiaan as its underway in this case a number. Three is in progress and then. Follow the links to Amara if you want to help out and. Transcribe, so for example once more I will show you how, to do that so we'll click on one of these links and, then. It. Will bring up this interface, and then in this drop down here you can choose to improve. The subtitles. And then. That will open up the subtitle, editor which, will allow you to contribute, corrections. To the subtitles, and I. Would really appreciate it if you help me up there so please do please, consider it help. Me out help me help you help. Me help, you so. That's what's going on and with. That I think I'm going to call it for, real so. Thanks again for watching episode, 130. Of the joy of coding I will see you next week take care buh-bye. See. Ya. You.
2018-03-04