brightspace is a learning management system, so naturally it has the worst possible user experience for all involved parties. one of the ways which instructors can choose to lay out content looks something like this:
although i can't find an official name for it, it's referred to internally as the "sequence launcher", so i'll be referring to it as such.
my experience with brightspace hasn't been great to begin with, but the sequence launcher is infuriatingly broken. while technically usable, any time i've ever needed to use it has been unpleasant at best. while some things are nitpicks, the most unforgivable thing is that each item isn't actually a link. instead, it has an onclick event which takes you to an entirely different view:
the arrows take 2-3 seconds to switch between pages, and even worse, if you want to view something from a different unit you have to GO BACK TO THE MAIN PAGE and start the process all over again. this makes trying to view multiple pages of notes excruciating. if you want to open more than one item at a time, you have to manually open another tab and navigate to what you want. i found myself constantly wanting to pull up a multiple lectures worth of a professor's notes, and had each time had to manually open 4-5 tabs. eventually i decided to just fix the new tab issue myself by writing a userscript.
"how hard could it be?" i asked myself. surely i would not once again fall into the trap of spending 10x longer automating something than it would have taken to do it manually. in theory this would be very easy (it always is), but D2L's forsaken sequence launcher had many dastardly tricks waiting for me.
my main goal was to be able to open a sequence launcher link in a new tab. to accomplish this i needed to:
● replace every sequence launcher item with its link
● remove the onclick event so it doesn't also try to redirect the current page
the first part should be pretty easy. i can just document.querySelectorAll and-
it turns out the sequene launcher uses shadow DOMs (or "shadow roots", as they're referred to in devtools), something which i wasn't familiar with before. basically they're used by custom elements to encapsulate their content. now i'm no web developer but it seems like brightspace really went wild with the shadow DOMs, because nearly every element within the sequence launcher has one. in order to access the links, you have to traverse at least 6 shadow roots. and the sequence launcher is an iframe. great.
i spent a while trying to figure out how to traverse the shadow roots until i came across a wonderful gist by GitHub user Haprog. this let me traverse through the shadow DOMs as if I was doing a normal query selector. back in business.
now i just needed to grab the activity link and make it clickable. surprisingly, there was already an <a> tag there (maybe for accessibility reasons?), so i just needed to grab the link and throw it into the anchor. this worked, but also redirected the current tab to the link page as well (as expected), so i just needed to remove the onclick event.
surprise you can't do this el oh el
yeah so maybe this was an appropriate design choice for a real programming language but i am trying to do weird fix-other-people's-bugs-without-actually-editing-the-source-code-shenanigans and i just wanted to remove the damn event handler. however you CAN accomplish this by cloning an element (and all its children) and replacing the original element with the clone. i found this out through this stackoverflow post after being barraged with "just use jquery lol" in the previous 20 threads i read. and with this i had all the pieces to fix this godforsaken bug.
just kidding! if only it were that easy. turns out the sequence launcher also progressively loads all of its links, so you can't just swap out all the links on page load. instead i had to constantly watch for new link elements and swap out the links then. i am not sure why they decided to do this, i cannot imagine it would take that long to just... load in all the links in the first place. but finally, finally, i could open notes in a new tab. and that's what matters.