Combines sidebar toggling with a full-width code editor and a floating, customizable run button.
// ==UserScript==
// @name Google Colab: Full Width + Toggle Sidebar
// @namespace http://tampermonkey.net/
// @version 4.0
// @description Combines sidebar toggling with a full-width code editor and a floating, customizable run button.
// @author bbilbeis
// @license MIT
// @match https://colab.research.google.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// --- CONFIGURATION: CUSTOMIZE RUN BUTTON POSITION ---
const config = {
left: "-35px", // Horizontal position (Negative moves left of code start)
top: "0px", // Vertical position (0px is top of cell)
scale: "1.0", // Size of the button
opacity: "1.0" // Transparency
};
// ----------------------------------------------------
// --- 1. CSS INJECTION (Merged Styles) ---
const css = `
/* === PART A: Run Button & Code Width === */
/* Hide execution count info (e.g. [12s]) */
.execution-count,
.cell-execution-indicator,
.cell-execution-container > div:not(colab-run-button) {
display: none !important;
}
/* Position the Run Button Container */
.cell-gutter {
position: absolute !important;
z-index: 9999 !important;
left: ${config.left} !important;
top: ${config.top} !important;
width: 0px !important;
height: 0px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Style the Run Button */
colab-run-button {
display: block !important;
transform: scale(${config.scale});
transform-origin: top left;
opacity: ${config.opacity};
transition: all 0.2s ease;
}
colab-run-button:hover {
opacity: 1 !important;
transform: scale(1.0);
z-index: 10001 !important; /* Higher than toggle bar */
}
/* Expand Code Block to Fill Gap */
.cell-layout,
.main-content {
padding-left: 0px !important;
margin-left: 0px !important;
}
.monaco-editor .overflow-guard {
left: 0 !important;
}
/* === PART B: Sidebar Toggle === */
/* Class to hide the pane */
colab-left-pane.hidden {
display: none !important;
}
/* The invisible/hover toggle bar on the left edge */
#custom-toggle-bar {
position: fixed;
left: 0;
top: 0;
width: 25px;
height: 100vh;
background: rgba(0, 0, 0, 0.02); /* Almost invisible */
z-index: 10000;
cursor: pointer;
transition: background 0.2s, width 0.2s;
}
/* Flash blue when hovering over the toggle zone */
#custom-toggle-bar:hover {
background: rgba(66, 133, 244, 0.5) !important; /* Google Blue */
width: 25px;
}
`;
GM_addStyle(css);
// --- 2. JS LOGIC (Sidebar Toggler) ---
// Create the clickable toggle bar
const toggleBar = document.createElement('div');
toggleBar.id = 'custom-toggle-bar';
toggleBar.title = "Click to toggle sidebar";
document.body.append(toggleBar);
// Click handler to show/hide pane
toggleBar.onclick = () => {
const pane = document.querySelector('colab-left-pane');
if (pane) pane.classList.toggle('hidden');
};
// Auto-hide the sidebar on initial load
const observer = new MutationObserver(() => {
const pane = document.querySelector('colab-left-pane');
if (pane) {
pane.classList.add('hidden');
observer.disconnect(); // Stop observing once found and hidden
}
});
// Start observing the document for the pane to appear
observer.observe(document.body, { childList: true, subtree: true });
})();