I have a user script for the passbolt website. Initially it was supposed to be a user stylesheet, but somehow that stylesheet has no effect. I will post it all.
The annoying thing on that website is, that I cannot resize the left sidebar/panel. This requires me to have the browser window fullscreen, to be able to read all labels fully in the left panel. The left panel is a kind of folder tree, that lets you browse all the secrets you have access to. The silly styling of passbolt sets this left panel to a width of exactly 18%.
Here is my apparently ignored user stylesheet, which already tells what I want to achieve ultimately:
.page .panel.left {
width: 24% !important;
}
.page .panel.middle {
left: 24% !important;
width: 76% !important;
}
This user stylesheet is also shown as "active" by the Stylus extension of Firefox, yet the set styles are not shown in the browser inspector, when I select the div
that has the classes panel
and left
.
So I figured, that this is a shitty website, that requires me to use mutation observer and such, to wait until the site has fully loaded, because it might set style using JS. I searched around for a bit and found a solution for waiting until an element appears. At least I think it should work that way. I also added a maximum time, that it waits for the element to appear. Here is my code:
// ==UserScript==
// @name New script passbolt.com
// @namespace Violentmonkey Scripts
// @match https://cloud.passbolt.com/*
// @grant none
// @version 1.0
// @author -
// @description 8/1/2024, 11:31:18 AM
// ==/UserScript==
const waitForElementTimerDuration = 10000;
function waitForElm(selector) {
return new Promise((resolve, reject) => {
// create a timer to wait for the element for a maximum duration
const timeoutTimer = setTimeout(
(selector) => {
reject("element selected by", selector, "could not be found in time (", waitForElementTimerDuration, ")")
},
waitForElementTimerDuration,
selector
);
// initially check, whether the element already exists
if (document.querySelector(selector)) {
// deactivate/disarm the timeoutTimer
clearInterval(timeoutTimer);
return resolve(document.querySelector(selector));
}
// create an observer, that checks for the element
const observer = new MutationObserver((mutations) => {
// if the element can be found stop observing and the timeoutTimer
if (document.querySelector(selector)) {
// deactivate/disarm the timeoutTimer
clearInterval(timeoutTimer);
// stop observing
observer.disconnect();
resolve(document.querySelector(selector));
}
});
// If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
// start observing the whole document body for changes
observer.observe(document.body, {
childList: true,
subtree: true
});
});
}
const left_pane_width = 24;
const main_pane_width = 100 - left_pane_width;
const awaited_selector = ".panel.main .panel.left";
waitForElm(awaited_selector)
.then((success) => {
const main_panel = document.querySelector(".panel.main");
const left_pane = main_panel.querySelector(".left");
const middle_pane = main_panel.querySelector(".middle");
left_pane.style.width = left_pane_width.toString().concat("%");
middle_pane.style.width = (100 - left_pane_width).toString().concat("%");
middle_pane.style.left = left_pane_width.toString().concat("%");
})
.catch((error) => {
console.error("failed to find element with selector:", awaited_selector);
});
Feel free to copy and use whatever you need, if you find it useful.
However, this doesn't seem to work. I always run into the timeout, as if the element never appeared. This is weird, because I can see the element in the browser inspector as <div class="panel left">
. But document.querySelector(".panel.left")
still returns null
. I also don't understand, why my user stylesheet is not working, since it should always be active, regardless of how long the site takes to build its DOM or sets styles using script. It should at the very least be shown as strikedthrough rules in the inspector, but I don't see any of that.
Are they f'ing with the document.querySelector
in weird ways? Or am I having a mistake somewhere?