Part of the "Tips 'N Tricks" series.
Here's another entry in the "Useful Bookmarklet" series:
TNT: Useful Bookmarklet - "nav_to"
TNT: Useful Bookmarklet - "Now Learning Window Size"
The Studio UX is not great. I use an wide-screen monitor and it's size is not used to it's potential, among other things. I've created a new bookmarklet that I use whenever I open a new Studio window. It will:
- set the width of the Application Explorer to 400 pixels wide
- collapses all the sections to give me a nice, clean starting point
All you have to do is create a new bookmark in your favourite browser, give it a useful name and paste the following code into the URL or Location field:
javascript:(function() {
const desiredExplorerWidth = "400px";
const studioPage = "/$studio.do?";
var element = "";
try {
/* make sure it is a Studio window first */
const url = decodeURIComponent(window.location.toString());
if (url.indexOf(studioPage) != -1) {
console.log("Looking for app-explorer-pane...");
element = document.getElementById("app-explorer-pane");
element.style.width = desiredExplorerWidth;
console.log("Looking for editing-pane...");
element = document.getElementById("editing-pane");
element.style.left = desiredExplorerWidth;
console.log("Looking for app-explorer-resizer...");
element = document.getElementsByClassName("app-explorer-resizer")[0];
element.style.left = desiredExplorerWidth;
/* now collapse the tree of objects */
element = document.getElementsByClassName("collapse-trigger default-focus-outline")[0];
var clickEvent = new MouseEvent("click", {"view": window,"bubbles": true,"cancelable": false});
element.dispatchEvent(clickEvent);
} else {
console.warn("Does not seem to be a Studio window: " + url);
}
} catch(err) {
console.warn(err);
}
})();
NOTE: When you paste the code into the bookmark/favourite, change ":" in the first line of code above with the actual colon character ":".
Simple and effective. You may want to change the "400px" width on the 2nd line of code to fit your preference. There is a built-in limit of 500 pixels for the width of the Application Explorer. You can set it higher in the code above, but as soon as you touch the divider to manually resize it, it will shrink down to 500.
