Haga que el panel de navegación de GitHub esté siempre visible usando JS/CSS local como GreaseMonkey

Question

El rediseño reciente de GitHub lo hizo mucho menos utilizable ya que ya no se utilizan 2/3 del espacio de la pantalla:

Si presiona el botón del menú de hamburguesas, aparece una barra lateral útil, pero desaparecerá si hace clic en cualquier lugar fuera de ella:

Me gustaría usar algún complemento de Chromium para modificar el árbol DOM/CSS de GitHub para que esta barra lateral se muestre siempre en todas las páginas, como se muestra en la captura de pantalla de GIMPed a continuación:

Agradecería instrucciones para hacerlo. Supongo que reposicionarlo en un lugar diferente del árbol DOM y hacerlo visible debería ser suficiente.

Answer 1

La barra lateral izquierda no carga los datos antes de hacer clic en el botón de hamburguesa, y no tengo idea de cómo funciona el sitio en general, pero hice algo un poco vulgar.

// ==UserScript==
// @name         GitHub - Left sidebar always visible
// @namespace    http://tampermonkey.net/
// @version      4
// @description  superuser.com/questions/1794556
// @match        https://github.com/*
// ==/UserScript==

(function() {
  'use strict';

  const css = `

  @media only screen and (min-width: 1300px) {

    .application-main {
      display: flex;
      flex-direction: row-reverse !important;
      width: 100%;
    } .application-main deferred-side-panel > div {
      display: flex !important;
      position: sticky;
      padding-top: 1em;
    } .application-main modal-dialog {
      max-height: 96vh !important;
      display: flex !important;
    }

    .application-main > div[class=""],
    .application-main main {
      width: 100%;
    }

    .application-main .Overlay-backdrop--side {
      background-color: transparent;
      display: flex !important;
      z-index: 1;
    }

    .application-main > div > div > aside.team-left-column,
    .AppHeader-globalBar-start > deferred-side-panel,
    .application-main deferred-side-panel > button[id],
    .application-main deferred-side-panel > div[class] .Overlay-actionWrap {
      display: none !important;
    }

  }
  `;

  const styleElement = document.createElement('style');

  styleElement.textContent = css;

  document.head.appendChild(styleElement);

  var openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
  var closeButton = document.querySelector(".Overlay-actionWrap > .close-button");

  function trigMenu() {

    setTimeout(function() {

      if (openButton === null) {
        openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
        return;
      }

      if (openButton.isConnected) {
          openButton.click();
      } else {
          openButton = document.querySelector("deferred-side-panel > include-fragment > button[id]");
      }

      if (closeButton.isConnected) {
          closeButton.click();
      } else {
          closeButton = document.querySelector(".Overlay-actionWrap > .close-button");
      }

      setTimeout(function() {

        const main = document.querySelector(".application-main");

        const leftPanel = document.querySelector(".AppHeader-globalBar-start > deferred-side-panel");

        if (leftPanel) {
          main.appendChild(leftPanel);
        }

      }, 750);

    }, 1);

  }

  const observer = new MutationObserver(function(m) {
    for (const mutation of m) {
      if (mutation.target.tagName === 'DIV') {
        if (window.location.pathname.match(/\/(users|orgs)\/.*?\/projects\/.*/g)) { return }
        trigMenu();
      }
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });

})();

Todo lo que hace el código es inyectar CSS que hace que la barra de menú siga la vista de la pantalla. Luego, cada vez que cambia el DOM, mueve el elemento de la barra lateral renderizado a otro nodo mientras hace clic en el botón de alternar menú para que se carguen los datos dinámicos.

La mayor parte del trabajo se realiza en CSS. No exploré todas las páginas en busca de colisiones de elementos evidentes, pero hasta ahora parece estar bien en las páginas comunes. También estoy bastante seguro de que hay mejores formas de manejar/optimizar este código.