Início / computer / Perguntas / 1794556
Accepted
alamar
Asked: 2023-07-07 18:28:34 +0800 CST

Torne o painel de navegação do GitHub sempre visível usando JS/CSS local, como GreaseMonkey

  • 772

O redesenho do GitHub recentemente o tornou muito menos utilizável, já que 2/3 do espaço da tela não é mais usado: Redesenho do GitHub com espaço desperdiçado

Se você pressionar o botão do menu hambúrguer, uma barra lateral útil aparecerá, mas ela desaparecerá se você clicar em qualquer lugar fora dela: GitHub com barra lateral

Eu gostaria de usar algum plug-in do Chromium para modificar a árvore DOM/CSS do GitHub para fazer com que essa barra lateral seja sempre exibida em todas as páginas, conforme mostrado na captura de tela do GIMPed abaixo:

insira a descrição da imagem aqui

Eu ficaria grato por instruções para fazê-lo. Acho que reposicioná-lo em um local diferente da árvore DOM e torná-lo visível deve ser suficiente.

script

1 respostas

  1. Best Answer

    A barra lateral esquerda meio que não carrega os dados antes de clicar no botão de hambúrguer, e não tenho ideia de como o site funciona em geral, mas fiz algo um pouco cafona.

    // ==UserScript==
// @name         New Userscript for superuser.com/questions/1794556
// @namespace    http://tampermonkey.net/
// @version      2
// @description  superuser.com/questions/1794556
// @match        https://github.com/*
// ==/UserScript==

(function() {
  'use strict';

  const css = `

  @media only screen and (min-width: 1300px) {
    body {
      overflow: auto !important;
    }
    .AppHeader-globalBar-start deferred-side-panel {
      transform: translatex(-15px);
    }
    .application-main main {
      max-width: calc(100vw - 320px - 2em);
      margin-left: auto;
    }
    deferred-side-panel > div > modal-dialog {
      position: absolute;
      top: 104px;
      left: 0px;
    }
    .Overlay-backdrop--side.Overlay-backdrop--placement-left.Overlay--hidden {
      display: flex !important;
      height: 100%;
      position: relative;
    }
    .AppHeader-globalBar-start .Overlay-backdrop--side {
      background-color: transparent;
    }
    .dashboard-sidebar,
    .AppHeader-globalBar-start deferred-side-panel > include-fragment > div[class] > modal-dialog,
    .AppHeader-globalBar-start deferred-side-panel > button[id],
    .AppHeader-globalBar-start deferred-side-panel > div[class] .Overlay-actionWrap {
      display: none !important;
    }
  }

  `;

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

  styleElement.textContent = css;

  document.head.appendChild(styleElement);

  function trigMenu() {
    setTimeout(function() {
      document.querySelector("deferred-side-panel > include-fragment > button[id]").click();
      document.querySelector(".Overlay-actionWrap > .close-button").click();
    }, 10);
  }

  const observer = new MutationObserver(function(mutationsList) {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        trigMenu();
        break;
      }
    }
  });

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

})();

    Tudo o que o código faz é injetar CSS que faz a barra de menus aparecer no lado esquerdo enquanto move os elementos atrás dela para longe dela. Então, sempre que o DOM muda, ele clica no botão de menu para que os dados dinâmicos sejam carregados na barra lateral.

    A maior parte do trabalho é feito em CSS. Não explorei todas as páginas em busca de colisões de elementos gritantes, mas até agora parece estar tudo bem nas páginas comuns.

    • 1

relate perguntas