GitHub Custom Global Navigation

Customize GitHub's new global navigation

  1. // ==UserScript==
  2. // @name GitHub Custom Global Navigation
  3. // @namespace https://github.com/blakegearin/github-custom-global-navigation
  4. // @version 1.6.10
  5. // @description Customize GitHub's new global navigation
  6. // @author Blake Gearin <hello@blakeg.me> (https://blakegearin.com)
  7. // @match https://github.com/*
  8. // @require https://openuserjs.org/src/libs/sizzle/GM_config.js
  9. // @grant GM.getValue
  10. // @grant GM.setValue
  11. // @icon https://raw.githubusercontent.com/blakegearin/github-custom-global-navigation/main/img/light_logo.png
  12. // @supportURL https://github.com/blakegearin/github-custom-global-navigation/issues
  13. // @license MIT
  14. // @copyright 2023–2025, Blake Gearin (https://blakegearin.com)
  15. // ==/UserScript==
  16.  
  17. /* jshint esversion: 6 */
  18. /* global GM_config */
  19.  
  20. (function () {
  21. 'use strict';
  22.  
  23. const VERSION = '1.6.10';
  24.  
  25. const SILENT = 0;
  26. const QUIET = 1;
  27. const INFO = 2;
  28. const DEBUG = 3;
  29. const VERBOSE = 4;
  30. const TRACE = 5;
  31.  
  32. let CURRENT_LOG_LEVEL = QUIET;
  33.  
  34. // Change to SILENT, QUIET, INFO, DEBUG, VERBOSE, or TRACE
  35. const LOG_LEVEL_OVERRIDE = DEBUG;
  36.  
  37. const USERSCRIPT_NAME = 'GitHub Custom Global Navigation';
  38.  
  39. function log (level, message, variable = undefined) {
  40. if (CURRENT_LOG_LEVEL < level) return;
  41.  
  42. const levelName = {
  43. 0: 'silent',
  44. 1: 'quiet',
  45. 2: 'info',
  46. 3: 'debug',
  47. 4: 'verbose',
  48. 5: 'trace',
  49. }[level];
  50.  
  51. const log = `[${VERSION}] [${levelName}] ${USERSCRIPT_NAME}: ${message}`;
  52.  
  53. console.groupCollapsed(log);
  54.  
  55. if (variable !== undefined) console.dir(variable, { depth: null });
  56.  
  57. console.trace();
  58. console.groupEnd();
  59. }
  60.  
  61. function logError(message, variable = null) {
  62. console.error(`${USERSCRIPT_NAME}: ${message}`);
  63. if (variable) console.log(variable);
  64. }
  65.  
  66. log(TRACE, 'Starting');
  67.  
  68. function updateHeader() {
  69. log(DEBUG, 'updateHeader()');
  70.  
  71. if (CONFIG.backgroundColor !== '') {
  72. HEADER_STYLE.textContent += `
  73. ${SELECTORS.header.self}
  74. {
  75. background-color: ${CONFIG.backgroundColor} !important;
  76. }
  77. `;
  78. }
  79.  
  80. updateHamburgerButton();
  81. updateLogo();
  82.  
  83. if (CONFIG.repositoryHeader.import) importRepositoryHeader();
  84.  
  85. updatePageTitle();
  86. updateSearch();
  87. updateCopilot();
  88.  
  89. if (CONFIG.divider.remove) removeDivider();
  90.  
  91. if (CONFIG.marketplace.add) createMarketplaceLink();
  92. if (CONFIG.explore.add) createExploreLink();
  93.  
  94. updateLink('issues');
  95. updateLink('pullRequests');
  96.  
  97. if (CONFIG.marketplace.add) updateLink('marketplace');
  98. if (CONFIG.explore.add) updateLink('explore');
  99.  
  100. if (CONFIG.flipIssuesPullRequests) flipIssuesPullRequests();
  101.  
  102. updateCreateNewButton();
  103. updateInboxLink();
  104.  
  105. if (CONFIG.flipCreateInbox) flipCreateInbox();
  106.  
  107. updateAvatar();
  108.  
  109. updateGlobalBar();
  110. updateLocalBar();
  111.  
  112. updateSidebars();
  113.  
  114. modifyThenObserve(() => {
  115. document.body.appendChild(HEADER_STYLE);
  116. });
  117. }
  118.  
  119. function updateHamburgerButton() {
  120. log(DEBUG, 'updateHamburgerButton()');
  121.  
  122. const configKey = 'hamburgerButton';
  123. const elementConfig = CONFIG.hamburgerButton;
  124. log(DEBUG, 'elementConfig', elementConfig);
  125.  
  126. const hamburgerButton = HEADER.querySelector(SELECTORS[configKey]);
  127.  
  128. if (!hamburgerButton) {
  129. logError(`Selector '${SELECTORS[configKey]}' not found`);
  130. return;
  131. }
  132.  
  133. if (elementConfig.remove) {
  134. HEADER_STYLE.textContent += cssHideElement(SELECTORS[configKey]);
  135.  
  136. return;
  137. }
  138. }
  139.  
  140. function updateLogo() {
  141. log(DEBUG, 'updateLogo()');
  142.  
  143. const configKey = 'logo';
  144.  
  145. const elementConfig = CONFIG[configKey];
  146. const elementSelector = SELECTORS[configKey];
  147.  
  148. if (elementConfig.remove) {
  149. HEADER_STYLE.textContent += cssHideElement(elementSelector.topDiv);
  150. }
  151.  
  152. const logo = HEADER.querySelector(elementSelector.svg);
  153.  
  154. if (elementConfig.color !== '') {
  155. HEADER_STYLE.textContent += `
  156. ${elementSelector.svg} path
  157. {
  158. fill: ${elementConfig.color} !important;
  159. }
  160. `;
  161. }
  162.  
  163. if (elementConfig.customSvg !== '') {
  164. const oldSvg = logo;
  165.  
  166. let newSvg;
  167.  
  168. if (isValidURL(elementConfig.customSvg)) {
  169. newSvg = document.createElement('img');
  170. newSvg.src = elementConfig.customSvg;
  171. } else {
  172. const parser = new DOMParser();
  173. const svgDoc = parser.parseFromString(elementConfig.customSvg, 'image/svg+xml');
  174. newSvg = svgDoc.documentElement;
  175. }
  176.  
  177. oldSvg.parentNode.replaceChild(newSvg, oldSvg);
  178. }
  179. }
  180.  
  181. function removePageTitle() {
  182. HEADER_STYLE.textContent += cssHideElement(createId(SELECTORS.pageTitle.id));
  183. }
  184.  
  185. function updatePageTitle() {
  186. log(DEBUG, 'updatePageTitle()');
  187.  
  188. const elementConfig = CONFIG.pageTitle;
  189. log(DEBUG, 'elementConfig', elementConfig);
  190.  
  191. const pageTitle = HEADER.querySelector(SELECTORS.pageTitle.topDiv);
  192.  
  193. if (!pageTitle) {
  194. logError(`Selector '${SELECTORS.pageTitle.topDiv}' not found`);
  195. return;
  196. }
  197.  
  198. pageTitle.setAttribute('id', SELECTORS.pageTitle.id);
  199.  
  200. if (elementConfig.remove) {
  201. removePageTitle();
  202. return;
  203. }
  204.  
  205. if (elementConfig.color !== '') {
  206. HEADER_STYLE.textContent += `
  207. ${SELECTORS.pageTitle.links}
  208. {
  209. color: ${elementConfig.color} !important;
  210. }
  211. `;
  212. }
  213.  
  214. if (elementConfig.hover.color !== '') {
  215. HEADER_STYLE.textContent += `
  216. ${SELECTORS.pageTitle.links}:hover
  217. {
  218. color: ${elementConfig.hover.color} !important;
  219. }
  220. `;
  221. }
  222.  
  223. if (elementConfig.hover.backgroundColor !== '') {
  224. HEADER_STYLE.textContent += `
  225. ${SELECTORS.pageTitle.links}:hover
  226. {
  227. background-color: ${elementConfig.hover.backgroundColor} !important;
  228. }
  229. `;
  230. }
  231. }
  232.  
  233. function updateSearch() {
  234. log(DEBUG, 'updateSearch()');
  235.  
  236. const configKey = 'search';
  237.  
  238. const elementConfig = CONFIG[configKey];
  239. const elementSelector = SELECTORS[configKey];
  240.  
  241. let topDivSelector = elementSelector.id;
  242. const topDiv = HEADER.querySelector(createId(elementSelector.id)) ||
  243. HEADER.querySelector(elementSelector.topDiv);
  244.  
  245. if (!topDiv) {
  246. logError(`Selectors '${createId(elementSelector.id)}' and '${elementSelector.topDiv}' not found`);
  247. return;
  248. }
  249.  
  250. topDiv.setAttribute('id', elementSelector.id);
  251.  
  252. if (elementConfig.remove) {
  253. HEADER_STYLE.textContent += cssHideElement(createId(elementSelector.id));
  254. return;
  255. }
  256.  
  257. if (elementConfig.alignLeft) {
  258. const response = cloneAndLeftAlignElement(createId(topDivSelector), topDivSelector);
  259.  
  260. if (response.length === 0) return;
  261.  
  262. // Also need to hide button due to it showing up on larger screen widths
  263. HEADER_STYLE.textContent += cssHideElement(`${createId(topDivSelector)} ${elementSelector.input}`);
  264.  
  265. HEADER_STYLE.textContent += `
  266. ${createId(topDivSelector)}
  267. {
  268. flex-grow: 1 !important;
  269. }
  270. `;
  271.  
  272. const [cloneId, _cloneElement] = response;
  273.  
  274. topDivSelector = createId(cloneId);
  275.  
  276. HEADER_STYLE.textContent += `
  277. ${topDivSelector}
  278. {
  279. flex: 0 1 auto !important;
  280. justify-content: flex-start !important;
  281. }
  282. `;
  283. }
  284.  
  285. if (elementConfig.width === 'max') {
  286. log(DEBUG, 'elementSelector', elementSelector);
  287.  
  288. HEADER_STYLE.textContent += `
  289. @media (min-width: 1012px) {
  290. ${elementSelector.input}
  291. {
  292. width: auto !important
  293. }
  294.  
  295. ${SELECTORS.header.leftAligned}
  296. {
  297. flex: 0 1 auto !important;
  298. }
  299.  
  300. ${SELECTORS.header.rightAligned}
  301. {
  302. flex: 1 1 auto !important;
  303. justify-content: space-between !important;
  304. }
  305.  
  306. ${createId(topDivSelector)}
  307. {
  308. display: block !important;
  309. }
  310.  
  311. ${elementSelector.topDiv}-whenRegular
  312. {
  313. max-width: none !important;
  314. }
  315. }
  316. `;
  317. } else if (elementConfig.width !== '') {
  318. HEADER_STYLE.textContent += `
  319. @media (min-width: 1012px)
  320. {
  321. ${topDivSelector},
  322. ${elementSelector.input}
  323. {
  324. width: ${elementConfig.width} !important
  325. }
  326. }
  327.  
  328. @media (min-width: 768px)
  329. {
  330. ${topDivSelector},
  331. ${elementSelector.input}
  332. {
  333. --feed-sidebar: 320px;
  334. }
  335. }
  336.  
  337. @media (min-width: 1400px)
  338. {
  339. ${topDivSelector},
  340. ${elementSelector.input}
  341. {
  342. --feed-sidebar: 336px;
  343. }
  344. }
  345. `;
  346. }
  347.  
  348. if (elementConfig.margin.left !== '') {
  349. HEADER_STYLE.textContent += `
  350. @media (min-width: 1012px)
  351. {
  352. ${elementSelector.input}
  353. {
  354. margin-left: ${elementConfig.margin.left} !important
  355. }
  356. }
  357. `;
  358. }
  359.  
  360. if (elementConfig.margin.right!== '') {
  361. HEADER_STYLE.textContent += `
  362. @media (min-width: 1012px)
  363. {
  364. ${elementSelector.input}
  365. {
  366. margin-right: ${elementConfig.margin.right} !important
  367. }
  368. }
  369. `;
  370. }
  371.  
  372. if (elementConfig.rightButton !== 'command palette') {
  373. const commandPaletteButton = HEADER.querySelector(elementSelector.commandPalette);
  374. if (!commandPaletteButton) {
  375. logError(`Selector '${elementSelector.commandPalette}' not found`);
  376. } else {
  377. HEADER_STYLE.textContent += cssHideElement(elementSelector.commandPalette);
  378. }
  379. }
  380.  
  381. const placeholderSpan = HEADER.querySelector(elementSelector.placeholderSpan);
  382.  
  383. if (!placeholderSpan) {
  384. logError(`Selector '${elementSelector.placeholderSpan}' not found`);
  385. return;
  386. }
  387.  
  388. if (elementConfig.placeholder.text !== '') {
  389. // Without this, the placeholder text is overwritten by the shadow DOM
  390. // You may see the following error in the console:
  391. // qbsearch-input-element.ts:421 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'innerHTML')
  392. placeholderSpan.setAttribute('data-target', 'avoidShadowDOM');
  393. placeholderSpan.innerText = elementConfig.placeholder.text;
  394. }
  395.  
  396. if (elementConfig.placeholder.color !== '') {
  397. HEADER_STYLE.textContent += `
  398. ${elementSelector.placeholderSpan}
  399. {
  400. color: ${elementConfig.placeholder.color} !important;
  401. }
  402. `;
  403. }
  404.  
  405. const searchButton = HEADER.querySelector(elementSelector.button);
  406.  
  407. if (!searchButton) {
  408. logError(`Selector '${elementSelector.button}' not found`);
  409. return;
  410. }
  411.  
  412. if (elementConfig.backgroundColor !== '') {
  413. HEADER_STYLE.textContent += `
  414. ${elementSelector.button}
  415. {
  416. background-color: ${elementConfig.backgroundColor} !important;
  417. }
  418. `;
  419. }
  420.  
  421. if (elementConfig.borderColor !== '') {
  422. // There are different buttons at different widths
  423. HEADER_STYLE.textContent += `
  424. ${elementSelector.input} button
  425. {
  426. border-color: ${elementConfig.borderColor} !important;
  427. }
  428. `;
  429. }
  430.  
  431. if (elementConfig.boxShadow !== '') {
  432. HEADER_STYLE.textContent += `
  433. ${elementSelector.button}
  434. {
  435. box-shadow: ${elementConfig.boxShadow} !important;
  436. }
  437. `;
  438. }
  439.  
  440. if (elementConfig.magnifyingGlassIcon.remove) {
  441. HEADER_STYLE.textContent += cssHideElement(elementSelector.magnifyingGlassIcon);
  442. }
  443.  
  444. if (elementConfig.modal.width !== '') {
  445. HEADER_STYLE.textContent += `
  446. ${elementSelector.modal}
  447. {
  448. width: ${elementConfig.modal.width} !important;
  449. }
  450. `;
  451. }
  452.  
  453. if (elementConfig.rightButton === 'slash key') {
  454. HEADER_STYLE.textContent += `
  455. ${elementSelector.placeholderSpan}
  456. {
  457. width: 100% !important;
  458. }
  459. `;
  460.  
  461. const parser = new DOMParser();
  462. const svgDoc = parser.parseFromString(
  463. '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg>',
  464. 'image/svg+xml',
  465. );
  466. const slashImg = svgDoc.documentElement;
  467. slashImg.alt = 'slash key to search';
  468.  
  469. const placeholderDiv = HEADER.querySelector(elementSelector.placeholderDiv);
  470.  
  471. if (!placeholderDiv) {
  472. logError(`Selector '${elementSelector.placeholderDiv}' not found`);
  473. return;
  474. }
  475.  
  476. HEADER_STYLE.textContent += `
  477. ${elementSelector.placeholderDiv}
  478. {
  479. display: flex !important;
  480. }
  481.  
  482. ${elementSelector.button}
  483. {
  484. padding-inline-start: 8px !important;
  485. }
  486. `;
  487.  
  488. placeholderDiv.appendChild(slashImg);
  489. }
  490.  
  491. log(DEBUG, `Updates applied to ${configKey}`);
  492. }
  493.  
  494. function updateCopilot() {
  495. log(DEBUG, 'updateCopilot()');
  496.  
  497. const configKey = 'copilot';
  498.  
  499. const elementConfig = CONFIG[configKey];
  500. const elementSelector = SELECTORS[configKey];
  501.  
  502. let topDivSelector = elementSelector.id;
  503. const topDiv = HEADER.querySelector(createId(elementSelector.id)) ||
  504. HEADER.querySelector(elementSelector.topDiv);
  505.  
  506. if (!topDiv) {
  507. logError(`Selectors '${createId(elementSelector.id)}' and '${elementSelector.topDiv}' not found`);
  508. return;
  509. }
  510.  
  511. topDiv.setAttribute('id', elementSelector.id);
  512.  
  513. if (elementConfig.remove) {
  514. HEADER_STYLE.textContent += cssHideElement(createId(elementSelector.id));
  515. return;
  516. }
  517.  
  518. if (!elementConfig.tooltip && SELECTORS.toolTips[configKey]?.id) {
  519. HEADER_STYLE.textContent += cssHideElement(createId(SELECTORS.toolTips[configKey].id));
  520. }
  521.  
  522. const button = HEADER.querySelector(elementSelector.button);
  523.  
  524. let textContent = elementConfig.text.content;
  525.  
  526. if (elementConfig.icon.remove) {
  527. const svgId = `${configKey}-svg`;
  528. const svg = button.querySelector('svg');
  529.  
  530. if (!svg) {
  531. logError(`Selector '${configKey} svg' not found`);
  532.  
  533. return;
  534. }
  535.  
  536. svg.setAttribute('id', svgId);
  537.  
  538. HEADER_STYLE.textContent += cssHideElement(createId(svgId));
  539. } else {
  540. button.querySelector('svg').style.setProperty('fill', elementConfig.icon.color);
  541. textContent = UNICODE_NON_BREAKING_SPACE + textContent;
  542. }
  543.  
  544. modifyThenObserve(() => {
  545. HEADER.querySelector(createId(elementSelector.textContent))?.remove();
  546. });
  547.  
  548. if (elementConfig.text.content !== '') {
  549. const spanElement = document.createElement('span');
  550. const spanId = `${configKey}-text-content-span`;
  551. spanElement.setAttribute('id', spanId);
  552.  
  553. const padding = '0.5rem';
  554.  
  555. HEADER_STYLE.textContent += `
  556. ${elementSelector.button}
  557. {
  558. padding-left: ${padding} !important;
  559. padding-right: ${padding} !important;
  560. width: auto !important;
  561. text-decoration: none !important;
  562. display: flex !important;
  563. }
  564. `;
  565.  
  566. if (elementConfig.text.color) {
  567. HEADER_STYLE.textContent += `
  568. ${createId(spanId)}
  569. {
  570. color: ${elementConfig.text.color} !important;
  571. }
  572. `;
  573. }
  574.  
  575. const textNode = document.createTextNode(textContent);
  576. spanElement.appendChild(textNode);
  577.  
  578. button.appendChild(spanElement);
  579. }
  580.  
  581. if (!elementConfig.border) {
  582. HEADER_STYLE.textContent += `
  583. ${createId(topDivSelector)}
  584. {
  585. border: none !important;
  586. }
  587. `;
  588. }
  589.  
  590. if (elementConfig.boxShadow !== '') {
  591. HEADER_STYLE.textContent += `
  592. ${createId(topDivSelector)}
  593. {
  594. box-shadow: ${elementConfig.boxShadow} !important;
  595. }
  596. `;
  597. }
  598.  
  599. if (elementConfig.hover.backgroundColor !== '') {
  600. HEADER_STYLE.textContent += `
  601. ${createId(topDivSelector)}:hover
  602. {
  603. background-color: ${elementConfig.hover.backgroundColor} !important;
  604. }
  605. `;
  606. }
  607.  
  608. if (elementConfig.hover.color !== '') {
  609. HEADER_STYLE.textContent += `
  610. ${createId(topDivSelector)} span:hover
  611. {
  612. color: ${elementConfig.hover.color} !important;
  613. }
  614. `;
  615. }
  616.  
  617. log(DEBUG, `Updates applied to ${configKey}`);
  618. }
  619.  
  620. function removeDivider() {
  621. log(DEBUG, 'removeDivider()');
  622.  
  623. HEADER_STYLE.textContent += `
  624. ${SELECTORS.header.actionsDiv}::before
  625. {
  626. content: none !important;
  627. }
  628. `;
  629. }
  630.  
  631. function updateLink(configKey) {
  632. log(DEBUG, 'updateLink()');
  633.  
  634. const elementConfig = CONFIG[configKey];
  635. const elementSelector = SELECTORS[configKey];
  636.  
  637. let link;
  638. const tooltipElement = SELECTORS.toolTips[configKey];
  639.  
  640. if (tooltipElement) {
  641. link = tooltipElement.previousElementSibling;
  642. } else {
  643. log(DEBUG, `Tooltip for '${configKey}' not found`);
  644.  
  645. const linkId = createId(SELECTORS[configKey].id);
  646. link = HEADER.querySelector(linkId);
  647.  
  648. if (!link) {
  649. logError(`Selector '${linkId}' not found`);
  650.  
  651. return;
  652. }
  653. }
  654.  
  655. let linkSelector = elementSelector.id;
  656. link.setAttribute('id', linkSelector);
  657.  
  658. if (elementConfig.remove) {
  659. HEADER_STYLE.textContent += cssHideElement(createId(configKey));
  660.  
  661. return;
  662. }
  663.  
  664. if (!elementConfig.tooltip && SELECTORS.toolTips[configKey]?.id) {
  665. HEADER_STYLE.textContent += cssHideElement(createId(SELECTORS.toolTips[configKey].id));
  666. }
  667.  
  668. if (elementConfig.alignLeft) {
  669. const response = cloneAndLeftAlignElement(createId(elementSelector.id), elementSelector.id);
  670.  
  671. if (response.length === 0) return;
  672.  
  673. const [cloneId, cloneElement] = response;
  674.  
  675. elementSelector[CONFIG_NAME] = {
  676. leftAlignedId: cloneId,
  677. };
  678. link = cloneElement;
  679.  
  680. linkSelector = createId(cloneId);
  681. }
  682.  
  683. const padding = '0.5rem';
  684. link.style.setProperty('padding-left', padding, 'important');
  685. link.style.setProperty('padding-right', padding, 'important');
  686.  
  687. let textContent = elementConfig.text.content;
  688.  
  689. if (elementConfig.icon.remove) {
  690. const svgId = `${configKey}-svg`;
  691. const svg = link.querySelector('svg');
  692.  
  693. if (!svg) {
  694. logError(`Selector '${configKey} svg' not found`);
  695.  
  696. return;
  697. }
  698.  
  699. svg.setAttribute('id', svgId);
  700.  
  701. HEADER_STYLE.textContent += cssHideElement(createId(svgId));
  702. } else {
  703. link.querySelector('svg').style.setProperty('fill', elementConfig.icon.color);
  704. textContent = UNICODE_NON_BREAKING_SPACE + textContent;
  705. }
  706.  
  707. modifyThenObserve(() => {
  708. HEADER.querySelector(createId(elementSelector.textContent))?.remove();
  709. });
  710.  
  711. if (elementConfig.text.content !== '') {
  712. const spanElement = document.createElement('span');
  713. const spanId = `${configKey}-text-content-span`;
  714. spanElement.setAttribute('id', spanId);
  715.  
  716. if (elementConfig.text.color) {
  717. HEADER_STYLE.textContent += `
  718. ${createId(spanId)}
  719. {
  720. color: ${elementConfig.text.color} !important;
  721. }
  722. `;
  723. }
  724.  
  725. const textNode = document.createTextNode(textContent);
  726. spanElement.appendChild(textNode);
  727.  
  728. link.appendChild(spanElement);
  729. }
  730.  
  731. if (!elementConfig.border) {
  732. HEADER_STYLE.textContent += `
  733. ${linkSelector}
  734. {
  735. border: none !important;
  736. }
  737. `;
  738. }
  739.  
  740. if (elementConfig.boxShadow !== '') {
  741. HEADER_STYLE.textContent += `
  742. ${linkSelector}
  743. {
  744. box-shadow: ${elementConfig.boxShadow} !important;
  745. }
  746. `;
  747. }
  748.  
  749. if (elementConfig.hover.backgroundColor !== '') {
  750. HEADER_STYLE.textContent += `
  751. ${linkSelector}:hover
  752. {
  753. background-color: ${elementConfig.hover.backgroundColor} !important;
  754. }
  755. `;
  756. }
  757.  
  758. if (elementConfig.hover.color !== '') {
  759. HEADER_STYLE.textContent += `
  760. ${linkSelector} span:hover
  761. {
  762. color: ${elementConfig.hover.color} !important;
  763. }
  764. `;
  765. }
  766.  
  767. log(DEBUG, `Updates applied to link ${configKey}`, link);
  768. }
  769.  
  770. function cloneAndFlipElements(firstElementSelector, secondElementSelector, firstElementId, secondElementId) {
  771. log(DEBUG, 'cloneAndFlipElements()');
  772.  
  773. const firstElement = HEADER.querySelector(firstElementSelector);
  774.  
  775. if (!firstElement) {
  776. logError(`Selector '${firstElementSelector}' not found`);
  777. return [];
  778. }
  779.  
  780. const secondElement = HEADER.querySelector(secondElementSelector);
  781.  
  782. if (!secondElement) {
  783. logError(`Selector '${secondElementSelector}' not found`);
  784. return [];
  785. }
  786.  
  787. const firstElementClone = firstElement.cloneNode(true);
  788. const secondElementClone = secondElement.cloneNode(true);
  789.  
  790. const firstElementCloneId = `${firstElementId}-clone`;
  791. const secondElementCloneId = `${secondElementId}-clone`;
  792.  
  793. firstElementClone.setAttribute('id', firstElementCloneId);
  794. secondElementClone.setAttribute('id', secondElementCloneId);
  795.  
  796. firstElementClone.style.setProperty('display', 'none');
  797. secondElementClone.style.setProperty('display', 'none');
  798.  
  799. HEADER_STYLE.textContent = HEADER_STYLE.textContent.replace(
  800. new RegExp(escapeRegExp(firstElementSelector), 'g'),
  801. createId(firstElementCloneId),
  802. );
  803.  
  804. HEADER_STYLE.textContent = HEADER_STYLE.textContent.replace(
  805. new RegExp(escapeRegExp(secondElementSelector), 'g'),
  806. createId(secondElementCloneId),
  807. );
  808.  
  809. HEADER_STYLE.textContent += cssHideElement(firstElementSelector);
  810. HEADER_STYLE.textContent += cssHideElement(secondElementSelector);
  811.  
  812. log(VERBOSE, `#${firstElementCloneId}, #${secondElementCloneId}`);
  813. HEADER_STYLE.textContent += `
  814. #${firstElementCloneId},
  815. #${secondElementCloneId}
  816. {
  817. display: flex !important;
  818. }
  819. `;
  820.  
  821. if (secondElement.nextElementSibling === null) {
  822. secondElement.parentNode.appendChild(firstElementClone);
  823. } else {
  824. secondElement.parentNode.insertBefore(firstElementClone, secondElement.nextElementSibling);
  825. }
  826.  
  827. if (firstElement.nextElementSibling === null) {
  828. firstElement.parentNode.appendChild(secondElementClone);
  829. } else {
  830. firstElement.parentNode.insertBefore(secondElementClone, firstElement.nextElementSibling);
  831. }
  832.  
  833. if (firstElementSelector.includes('clone')) {
  834. firstElement.remove();
  835. }
  836.  
  837. if (secondElementSelector.includes('clone')) {
  838. secondElement.remove();
  839. }
  840.  
  841. NEW_ELEMENTS.push(firstElementClone);
  842. NEW_ELEMENTS.push(secondElementClone);
  843.  
  844. return [firstElementClone, secondElementClone];
  845. }
  846.  
  847. function flipIssuesPullRequests() {
  848. log(DEBUG, 'flipIssuesPullRequest()');
  849.  
  850. const issuesId = SELECTORS.issues[CONFIG_NAME]?.leftAlignedId || SELECTORS.issues.id;
  851. log(VERBOSE, 'issuesId', issuesId);
  852.  
  853. const pullRequestsId = SELECTORS.pullRequests[CONFIG_NAME]?.leftAlignedId || SELECTORS.pullRequests.id;
  854. log(VERBOSE, 'pullRequestsId', pullRequestsId);
  855.  
  856. cloneAndFlipElements(
  857. createId(issuesId),
  858. createId(pullRequestsId),
  859. `${issuesId}-flip-div`,
  860. `${pullRequestsId}-flip-div`,
  861. );
  862. }
  863.  
  864. function createOldLink(configKey, svgString) {
  865. const pullRequestsLink = HEADER.querySelector(SELECTORS.pullRequests.link);
  866.  
  867. if (!pullRequestsLink) {
  868. logError(`Selector '${SELECTORS.pullRequests.link}' not found`);
  869. return;
  870. }
  871.  
  872. const clonedLink = pullRequestsLink.cloneNode(true);
  873.  
  874. const linkId = SELECTORS[configKey].id;
  875. clonedLink.setAttribute('id', linkId);
  876.  
  877. const oldSvg = clonedLink.querySelector('svg');
  878.  
  879. const parser = new DOMParser();
  880. const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
  881. const newSvg = svgDoc.documentElement;
  882.  
  883. oldSvg.parentNode.replaceChild(newSvg, oldSvg);
  884.  
  885. const ariaId = `tooltip-${configKey}`;
  886.  
  887. clonedLink.setAttribute('href', `/${configKey}`);
  888. clonedLink.setAttribute('aria-labelledby', ariaId);
  889. clonedLink.removeAttribute('data-analytics-event');
  890.  
  891. clonedLink.querySelector('span')?.remove();
  892.  
  893. pullRequestsLink.parentNode.appendChild(clonedLink);
  894.  
  895. NEW_ELEMENTS.push(clonedLink);
  896. }
  897.  
  898. function createMarketplaceLink() {
  899. log(DEBUG, 'createMarketplaceLink()');
  900.  
  901. const svgString = `
  902. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift">
  903. <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path>
  904. </svg>
  905. `;
  906.  
  907. createOldLink('marketplace', svgString);
  908. }
  909.  
  910. function createExploreLink() {
  911. log(DEBUG, 'createExploreLink()');
  912.  
  913. const svgString = `
  914. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-telescope">
  915. <path d="M14.184 1.143v-.001l1.422 2.464a1.75 1.75 0 0 1-.757 2.451L3.104 11.713a1.75 1.75 0 0 1-2.275-.702l-.447-.775a1.75 1.75 0 0 1 .53-2.32L11.682.573a1.748 1.748 0 0 1 2.502.57Zm-4.709 9.32h-.001l2.644 3.863a.75.75 0 1 1-1.238.848l-1.881-2.75v2.826a.75.75 0 0 1-1.5 0v-2.826l-1.881 2.75a.75.75 0 1 1-1.238-.848l2.049-2.992a.746.746 0 0 1 .293-.253l1.809-.87a.749.749 0 0 1 .944.252ZM9.436 3.92h-.001l-4.97 3.39.942 1.63 5.42-2.61Zm3.091-2.108h.001l-1.85 1.26 1.505 2.605 2.016-.97a.247.247 0 0 0 .13-.151.247.247 0 0 0-.022-.199l-1.422-2.464a.253.253 0 0 0-.161-.119.254.254 0 0 0-.197.038ZM1.756 9.157a.25.25 0 0 0-.075.33l.447.775a.25.25 0 0 0 .325.1l1.598-.769-.83-1.436-1.465 1Z"></path>
  916. </svg>
  917. `;
  918.  
  919. createOldLink('explore', svgString);
  920. }
  921.  
  922. function updateCreateNewButton() {
  923. log(DEBUG, 'updateCreateNewButton()');
  924.  
  925. const configKey = 'create';
  926. const elementSelector = SELECTORS[configKey];
  927. const tooltipElement = SELECTORS.toolTips[configKey];
  928.  
  929. if (!tooltipElement) {
  930. logError(`Selector '${SELECTORS.toolTips[configKey]}' not found`);
  931. return;
  932. }
  933.  
  934. let button = HEADER.querySelector(elementSelector.button);
  935. let oldButtonId = null;
  936.  
  937. if (!button) {
  938. logError(`Selector '${elementSelector.button}' not found`);
  939.  
  940. oldButtonId = `${elementSelector.button}-old`;
  941. button = HEADER.querySelector(oldButtonId);
  942.  
  943. if (!button) {
  944. logError(`Selector '${oldButtonId}' not found`);
  945. return;
  946. }
  947. }
  948.  
  949. const elementConfig = CONFIG[configKey];
  950.  
  951. if (elementConfig.remove) {
  952. HEADER_STYLE.textContent += cssHideElement(elementSelector.topDiv);
  953.  
  954. return;
  955. } else if (!elementConfig.tooltip) {
  956. HEADER_STYLE.textContent += cssHideElement(createId(tooltipElement.id));
  957. }
  958.  
  959. const topDiv = HEADER.querySelector(elementSelector.topDiv);
  960.  
  961. if (!topDiv) {
  962. logError(`Selector '${elementSelector.topDiv}' not found`);
  963. return;
  964. }
  965.  
  966. topDiv.setAttribute('id', elementSelector.id);
  967.  
  968. const buttonLabel = button.querySelector(elementSelector.dropdownIcon);
  969.  
  970. if (elementConfig.plusIcon.remove) {
  971. HEADER_STYLE.textContent += `
  972. ${oldButtonId || elementSelector.button} ${elementSelector.plusIcon}
  973. {
  974. display: none !important
  975. }
  976. `;
  977. } else {
  978.  
  979. if (elementConfig.plusIcon.color !== '') {
  980. HEADER_STYLE.textContent += `
  981. ${elementSelector.plusIcon}
  982. {
  983. color: ${elementConfig.plusIcon.color} !important;
  984. }
  985. `;
  986. }
  987.  
  988. if (elementConfig.plusIcon.hover.color !== '') {
  989. HEADER_STYLE.textContent += `
  990. ${elementSelector.plusIcon.split(' ').join(':hover ')} svg path
  991. {
  992. fill: ${elementConfig.plusIcon.hover.color} !important;
  993. }
  994. `;
  995. }
  996.  
  997. if (elementConfig.plusIcon.marginRight !== '') {
  998. HEADER_STYLE.textContent += `
  999. ${elementSelector.plusIcon}
  1000. {
  1001. margin-right: ${elementConfig.plusIcon.marginRight} !important;
  1002. }
  1003. `;
  1004. }
  1005. }
  1006.  
  1007. modifyThenObserve(() => {
  1008. HEADER.querySelector(createId(SELECTORS[configKey].textContent))?.remove();
  1009. });
  1010.  
  1011. if (elementConfig.text.content !== '') {
  1012. // Update the text's font properties to match the others
  1013. HEADER_STYLE.textContent += `
  1014. ${elementSelector.button}
  1015. {
  1016. font-size: var(--text-body-size-medium, 0.875rem) !important;
  1017. font-weight: var(--base-text-weight-medium, 500) !important;
  1018. }
  1019. `;
  1020.  
  1021. const spanElement = document.createElement('span');
  1022. spanElement.setAttribute('id', elementSelector.textContent);
  1023.  
  1024. spanElement.style.setProperty('color', elementConfig.text.color);
  1025. spanElement.textContent = elementConfig.text.content;
  1026.  
  1027. // New span is inserted between the plus sign and dropdown icon
  1028. buttonLabel.parentNode.insertBefore(spanElement, buttonLabel);
  1029. }
  1030.  
  1031. if (elementConfig.dropdownIcon.remove) {
  1032. HEADER_STYLE.textContent += `
  1033. ${elementSelector.dropdownIcon}
  1034. {
  1035. display: none !important
  1036. }
  1037. `;
  1038. } else {
  1039. HEADER_STYLE.textContent += `
  1040. ${elementSelector.dropdownIcon}
  1041. {
  1042. grid-area: initial !important;
  1043. }
  1044. `;
  1045.  
  1046. if (elementConfig.dropdownIcon.color !== '') {
  1047. HEADER_STYLE.textContent += `
  1048. ${elementSelector.dropdownIcon}
  1049. {
  1050. color: ${elementConfig.dropdownIcon.color} !important;
  1051. }
  1052. `;
  1053. }
  1054.  
  1055. if (elementConfig.dropdownIcon.hover.color !== '') {
  1056. HEADER_STYLE.textContent += `
  1057. ${elementSelector.dropdownIcon.split(' ').join(':hover ')} svg path
  1058. {
  1059. fill: ${elementConfig.dropdownIcon.hover.color} !important;
  1060. }
  1061. `;
  1062. }
  1063. }
  1064.  
  1065. if (!elementConfig.border) {
  1066. HEADER_STYLE.textContent += `
  1067. ${elementSelector.button}
  1068. {
  1069. border: none !important;
  1070. }
  1071. `;
  1072. }
  1073.  
  1074. if (elementConfig.boxShadow !== '') {
  1075. HEADER_STYLE.textContent += `
  1076. ${elementSelector.button}
  1077. {
  1078. box-shadow: ${elementConfig.boxShadow} !important;
  1079. }
  1080. `;
  1081. }
  1082.  
  1083. if (elementConfig.hoverBackgroundColor !== '') {
  1084. HEADER_STYLE.textContent += `
  1085. ${elementSelector.button}:hover
  1086. {
  1087. background-color: ${elementConfig.hoverBackgroundColor} !important;
  1088. }
  1089. `;
  1090. }
  1091. }
  1092.  
  1093. function updateInboxLink() {
  1094. log(DEBUG, 'updateInboxLink()');
  1095.  
  1096. const configKey = 'notifications';
  1097.  
  1098. const elementConfig = CONFIG[configKey];
  1099. const elementSelector = SELECTORS[configKey];
  1100.  
  1101. const notificationIndicator = HEADER.querySelector(createId(elementSelector.id)) ||
  1102. HEADER.querySelector(elementSelector.indicator);
  1103.  
  1104. if (!notificationIndicator) {
  1105. logError(`Selectors '${createId(elementSelector.id)}' and '${elementSelector.indicator}' not found`);
  1106. return;
  1107. }
  1108.  
  1109. notificationIndicator.setAttribute('id', elementSelector.id);
  1110.  
  1111. const inboxLink = notificationIndicator.querySelector('a');
  1112.  
  1113. if (!inboxLink) {
  1114. logError(`Selector '${elementSelector.indicator} a' not found`);
  1115. return;
  1116. }
  1117.  
  1118. if (elementConfig.remove) {
  1119. HEADER_STYLE.textContent += cssHideElement(elementSelector.indicator);
  1120. }
  1121.  
  1122. if (!elementConfig.tooltip) {
  1123. HEADER_STYLE.textContent += cssHideElement(createId(SELECTORS.toolTips.notifications.id));
  1124. }
  1125.  
  1126. if (elementConfig.dot.remove) {
  1127. HEADER_STYLE.textContent += `
  1128. ${elementSelector.dot}
  1129. {
  1130. content: none !important;
  1131. }
  1132. `;
  1133. } else {
  1134. if (elementConfig.dot.color !== '') {
  1135. HEADER_STYLE.textContent += `
  1136. ${elementSelector.dot}
  1137. {
  1138. background: ${elementConfig.dot.color} !important;
  1139. }
  1140. `;
  1141. }
  1142.  
  1143. if (elementConfig.dot.boxShadowColor !== '') {
  1144. HEADER_STYLE.textContent += `
  1145. ${elementSelector.dot}
  1146. {
  1147. box-shadow: 0 0 0 calc(var(--base-size-4, 4px)/2) ${elementConfig.dot.boxShadowColor} !important;
  1148. }
  1149. `;
  1150. }
  1151. }
  1152.  
  1153. if (elementConfig.icon.symbol === 'inbox') {
  1154. if (elementConfig.icon.color !== '') {
  1155. HEADER_STYLE.textContent += `
  1156. ${createId(elementSelector.id)} a svg
  1157. {
  1158. fill: elementConfig.icon.color !important;
  1159. }
  1160. `;
  1161. }
  1162. } else {
  1163. const inboxSvgId = 'inbox-svg';
  1164. const inboxSvg = inboxLink.querySelector('svg');
  1165. inboxSvg.setAttribute('id', inboxSvgId);
  1166.  
  1167. HEADER_STYLE.textContent += cssHideElement(createId(inboxSvgId));
  1168. }
  1169.  
  1170. if (elementConfig.icon.symbol === 'bell') {
  1171. // Bell icon from https://gist.github.com
  1172. const bellSvgId = 'bell-svg';
  1173. const bellSvg = `
  1174. <svg id=${bellSvgId} style="display: none;" aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true' class='octicon octicon-bell'>
  1175. <path d='M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z'></path>
  1176. </svg>
  1177. `;
  1178.  
  1179. inboxLink.insertAdjacentHTML('afterbegin', bellSvg);
  1180.  
  1181. HEADER_STYLE.textContent += `
  1182. ${createId(bellSvgId)}
  1183. {
  1184. display: initial !important;
  1185. }
  1186. `;
  1187.  
  1188. if (elementConfig.icon.color !== '') {
  1189. HEADER_STYLE.textContent += `
  1190. ${createId(bellSvgId)} path
  1191. {
  1192. fill: ${elementConfig.icon.color} !important;
  1193. }
  1194. `;
  1195. }
  1196. }
  1197.  
  1198. if (elementConfig.icon.hover.color !== '') {
  1199. HEADER_STYLE.textContent += `
  1200. ${createId(elementSelector.id)} a:hover svg path
  1201. {
  1202. fill: ${elementConfig.icon.hover.color} !important;
  1203. }
  1204. `;
  1205. }
  1206.  
  1207. modifyThenObserve(() => {
  1208. HEADER.querySelector(createId(SELECTORS[configKey].textContent))?.remove();
  1209. });
  1210.  
  1211. if (elementConfig.text.content !== '') {
  1212. const padding = '0.5rem';
  1213.  
  1214. HEADER_STYLE.textContent += `
  1215. ${createId(elementSelector.id)} a
  1216. {
  1217. padding-left: ${padding} !important;
  1218. padding-right: ${padding} !important;
  1219. width: auto !important;
  1220. text-decoration: none !important;
  1221. display: flex !important;
  1222. }
  1223. `;
  1224.  
  1225. let textContent = elementConfig.text.content;
  1226.  
  1227. if (elementConfig.icon !== '') {
  1228. textContent = UNICODE_NON_BREAKING_SPACE + textContent;
  1229. }
  1230.  
  1231. const spanElement = document.createElement('span');
  1232. spanElement.setAttribute('id', elementSelector.textContent);
  1233.  
  1234. // Update the text's font properties to match the others
  1235. spanElement.style.setProperty('font-size', 'var(--text-body-size-medium, 0.875rem)', 'important');
  1236. spanElement.style.setProperty('font-weight', 'var(--base-text-weight-medium, 500)', 'important');
  1237.  
  1238. if (elementConfig.text.color) spanElement.style.setProperty('color', elementConfig.text.color);
  1239.  
  1240. const textNode = document.createTextNode(textContent);
  1241. spanElement.appendChild(textNode);
  1242.  
  1243. inboxLink.appendChild(spanElement);
  1244. }
  1245.  
  1246. if (!elementConfig.border) {
  1247. HEADER_STYLE.textContent += `
  1248. ${createId(elementSelector.id)} a
  1249. {
  1250. border: none !important;
  1251. }
  1252. `;
  1253. }
  1254.  
  1255. if (elementConfig.boxShadow !== '') {
  1256. HEADER_STYLE.textContent += `
  1257. ${createId(elementSelector.id)} a
  1258. {
  1259. box-shadow: ${elementConfig.boxShadow} !important;
  1260. }
  1261. `;
  1262. }
  1263.  
  1264. if (elementConfig.dot.displayOverIcon) {
  1265. HEADER_STYLE.textContent += `
  1266. ${elementSelector.dot}
  1267. {
  1268. top: 5px !important;
  1269. left: 18px !important;
  1270. }
  1271. `;
  1272. }
  1273.  
  1274. if (elementConfig.hoverBackgroundColor !== '') {
  1275. HEADER_STYLE.textContent += `
  1276. ${createId(elementSelector.id)} a:hover
  1277. {
  1278. background-color: ${elementConfig.hoverBackgroundColor} !important;
  1279. }
  1280. `;
  1281. }
  1282.  
  1283. log(DEBUG, `Updates applied to link ${configKey}: `, inboxLink);
  1284. }
  1285.  
  1286. function insertAvatarDropdown() {
  1287. log(DEBUG, 'insertAvatarDropdown()');
  1288.  
  1289. const elementSelector = SELECTORS.avatar;
  1290. const svgSelector = elementSelector.svg;
  1291.  
  1292. if (HEADER.querySelector(createId(svgSelector))) {
  1293. log(VERBOSE, `Selector ${createId(svgSelector)} not found`);
  1294. return;
  1295. }
  1296.  
  1297. const dropdownSvg = `
  1298. <svg id='${svgSelector}' style="display: none;" height="100%" width="100%" fill="#FFFFFF" class="octicon octicon-triangle-down" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true">
  1299. <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path>
  1300. </svg>
  1301. `;
  1302.  
  1303. const button = HEADER.querySelector(elementSelector.button);
  1304.  
  1305. if (!button) {
  1306. logError(`Selector '${elementSelector.button}' not found`);
  1307. return;
  1308. }
  1309.  
  1310. const divElement = document.createElement('div');
  1311. divElement.insertAdjacentHTML('afterbegin', dropdownSvg);
  1312.  
  1313. button.appendChild(divElement);
  1314. }
  1315.  
  1316. function updateAvatar() {
  1317. log(DEBUG, 'updateAvatar()');
  1318.  
  1319. const configKey = 'avatar';
  1320.  
  1321. const elementConfig = CONFIG[configKey];
  1322. const elementSelector = SELECTORS[configKey];
  1323.  
  1324. if (elementConfig.remove) {
  1325. HEADER_STYLE.textContent += cssHideElement(elementSelector.topDiv);
  1326.  
  1327. return;
  1328. }
  1329.  
  1330. if (elementConfig.size !== '') {
  1331. HEADER_STYLE.textContent += `
  1332. ${elementSelector.img}
  1333. {
  1334. height: ${elementConfig.size} !important;
  1335. width: ${elementConfig.size} !important;
  1336. }
  1337. `;
  1338. }
  1339.  
  1340. if (elementConfig.dropdownIcon) {
  1341. insertAvatarDropdown();
  1342.  
  1343. HEADER_STYLE.textContent += `
  1344. ${elementSelector.topDiv}
  1345. {
  1346. background-color: transparent !important;
  1347. }
  1348.  
  1349. ${createId(elementSelector.svg)}
  1350. {
  1351. display: initial !important;
  1352. fill: #FFFFFF;
  1353. height: 16px;
  1354. width: 16px;
  1355. margin-bottom: 1.5px;
  1356. }
  1357.  
  1358. ${elementSelector.button}:hover ${createId(elementSelector.svg)} path
  1359. {
  1360. fill: #FFFFFFB3 !important;
  1361. }
  1362.  
  1363. ${elementSelector.button}
  1364. {
  1365. gap: 0px !important;
  1366. }
  1367. `;
  1368. }
  1369. }
  1370.  
  1371. function flipCreateInbox() {
  1372. log(DEBUG, 'flipCreateInbox()');
  1373.  
  1374. cloneAndFlipElements(
  1375. createId(SELECTORS.create.id),
  1376. createId(SELECTORS.notifications.id),
  1377. `${SELECTORS.create.id}-flip`,
  1378. `${SELECTORS.notifications.id}-flip`,
  1379. );
  1380. }
  1381.  
  1382. function updateGlobalBar() {
  1383. log(DEBUG, 'updateGlobalBar()');
  1384.  
  1385. const elementConfig = CONFIG.globalBar;
  1386.  
  1387. if (elementConfig.boxShadowColor !== '') {
  1388. HEADER_STYLE.textContent += `
  1389. ${SELECTORS.header.globalBar}
  1390. {
  1391. box-shadow: inset 0 calc(var(--borderWidth-thin, 1px)*-1) ${elementConfig.boxShadowColor} !important;
  1392. }
  1393. `;
  1394. }
  1395.  
  1396. if (elementConfig.rightAligned.gap !== '') {
  1397. HEADER_STYLE.textContent += `
  1398. ${SELECTORS.header.rightAligned}
  1399. {
  1400. gap: ${elementConfig.rightAligned.gap} !important;
  1401. }
  1402. `;
  1403. }
  1404.  
  1405. if (elementConfig.leftAligned.gap !== '') {
  1406. HEADER_STYLE.textContent += `
  1407. ${SELECTORS.header.leftAligned}
  1408. {
  1409. gap: ${elementConfig.leftAligned.gap} !important;
  1410. }
  1411. `;
  1412. }
  1413. }
  1414.  
  1415. function updateLocalBar() {
  1416. log(DEBUG, 'updateLocalBar()');
  1417.  
  1418. const elementConfig = CONFIG.localBar;
  1419.  
  1420. if (elementConfig.backgroundColor !== '') {
  1421. HEADER_STYLE.textContent += `
  1422. ${SELECTORS.header.localBar.topDiv}
  1423. {
  1424. background-color: ${elementConfig.backgroundColor} !important;
  1425. box-shadow: inset 0 calc(var(--borderWidth-thin, 1px)*-1) var(--borderColor-muted) !important;
  1426. }
  1427. `;
  1428. }
  1429.  
  1430. if (elementConfig.alignCenter) {
  1431. HEADER_STYLE.textContent += `
  1432. ${SELECTORS.header.localBar.underlineNavActions}
  1433. {
  1434. display: contents !important;
  1435. padding-right: 0px !important;
  1436. }
  1437.  
  1438. ${SELECTORS.header.localBar.topDiv} nav
  1439. {
  1440. max-width: 1280px;
  1441. margin-right: auto;
  1442. margin-left: auto;
  1443. }
  1444.  
  1445. @media (min-width: 768px) {
  1446. ${SELECTORS.header.localBar.topDiv} nav
  1447. {
  1448. padding-right: var(--base-size-24, 24px) !important;
  1449. padding-left: var(--base-size-24, 24px) !important;
  1450. }
  1451. }
  1452.  
  1453. @media (min-width: 1012px) {
  1454. ${SELECTORS.header.localBar.topDiv} nav
  1455. {
  1456. padding-right: var(--base-size-32, 32px) !important;
  1457. padding-left: var(--base-size-32, 32px) !important;
  1458. }
  1459.  
  1460. .notification-shelf > div
  1461. {
  1462. padding-right: var(--base-size-32, 32px) !important;
  1463. padding-left: var(--base-size-32, 32px) !important;
  1464. max-width: 1280px;
  1465. margin-right: auto;
  1466. margin-left: auto;
  1467. }
  1468. }
  1469. `;
  1470. }
  1471.  
  1472. if (elementConfig.boxShadow.consistentColor) {
  1473. HEADER_STYLE.textContent += `
  1474. .UnderlineNav
  1475. {
  1476. box-shadow: none !important;
  1477. }
  1478. `;
  1479. }
  1480.  
  1481. if (elementConfig.links.color !== '') {
  1482. HEADER_STYLE.textContent += `
  1483. ${SELECTORS.header.localBar.topDiv} a,
  1484. ${SELECTORS.header.localBar.topDiv} a span
  1485. {
  1486. color: ${elementConfig.links.color} !important;
  1487. }
  1488. `;
  1489. }
  1490. }
  1491.  
  1492. function preloadLeftSidebar(elementSelector) {
  1493. log(DEBUG, 'preloadLeftSidebar()');
  1494.  
  1495. if (!LEFT_SIDEBAR_PRELOADED) return;
  1496.  
  1497. const leftModalDialog = HEADER.querySelector(elementSelector.left.modalDialog).remove();
  1498.  
  1499. if (!leftModalDialog) {
  1500. logError(`Selector '${elementSelector.left.modalDialog}' not found`);
  1501. preloadLeftSidebar(elementSelector);
  1502. return;
  1503. }
  1504.  
  1505. window.addEventListener('load', () => {
  1506. HEADER.querySelector(`${SELECTORS.hamburgerButton} button`).click();
  1507. log(INFO, 'Left sidebar preloaded');
  1508. });
  1509.  
  1510. LEFT_SIDEBAR_PRELOADED = true;
  1511. }
  1512.  
  1513. function updateSidebars() {
  1514. log(DEBUG, 'updateSidebars()');
  1515.  
  1516. const configKey = 'sidebars';
  1517.  
  1518. const elementConfig = CONFIG[configKey];
  1519. const elementSelector = SELECTORS[configKey];
  1520.  
  1521. if (elementConfig.backdrop.color !== '') {
  1522. HEADER_STYLE.textContent += `
  1523. ${elementSelector.left.backdrop},
  1524. ${elementSelector.right.backdrop}
  1525. {
  1526. background: ${CONFIG.sidebars.backdrop.color} !important;
  1527. }
  1528. `;
  1529. }
  1530.  
  1531. if (elementConfig.left.preload) preloadLeftSidebar(elementSelector);
  1532.  
  1533. if (elementConfig.right.floatUnderneath) {
  1534. HEADER_STYLE.textContent += `
  1535. body:has(${elementSelector.right.modalDialog})
  1536. {
  1537. overflow: scroll !important;
  1538. }
  1539.  
  1540. ${elementSelector.right.backdrop}
  1541. {
  1542. position: relative;
  1543. align-items: baseline;
  1544. width: 100vw;
  1545. height: 100vh;
  1546. top: 0;
  1547. left: 0;
  1548. }
  1549.  
  1550. ${elementSelector.right.modalDialog}
  1551. {
  1552. pointer-events: all;
  1553. margin-top: 55px;
  1554. margin-right: 20px;
  1555. animation: .2s cubic-bezier(.33,1,.68,1) !important;
  1556. border-top-right-radius: 0.75rem !important;
  1557. border-bottom-right-radius: 0.75rem !important;
  1558. }
  1559. `;
  1560. }
  1561.  
  1562. if (elementConfig.right.maxHeight) {
  1563. HEADER_STYLE.textContent += `
  1564. ${elementSelector.right.modalDialog}
  1565. {
  1566. max-height: ${elementConfig.right.maxHeight} !important;
  1567. }
  1568. `;
  1569. }
  1570.  
  1571. if (elementConfig.right.width !== '') {
  1572. HEADER_STYLE.textContent += `
  1573. ${elementSelector.right.modalDialog}.Overlay.Overlay--size-small-portrait
  1574. {
  1575. --overlay-width: ${elementConfig.right.width};
  1576. }
  1577. `;
  1578. }
  1579. }
  1580.  
  1581. function importRepositoryHeader() {
  1582. log(DEBUG, 'importRepositoryHeader()');
  1583.  
  1584. const configKey = 'repositoryHeader';
  1585. const repositoryHeader = document.querySelector(SELECTORS[configKey].id);
  1586.  
  1587. if (!repositoryHeader) {
  1588. // This is expected on pages that aren't repositories
  1589. log(DEBUG, `Selector '${SELECTORS[configKey].id}' not found`);
  1590. return;
  1591. }
  1592.  
  1593. const topRepositoryHeaderElement = document.createElement('div');
  1594. topRepositoryHeaderElement.style.setProperty('display', 'flex');
  1595. topRepositoryHeaderElement.style.setProperty('padding', '0px');
  1596. topRepositoryHeaderElement.style.setProperty('box-shadow', 'none');
  1597.  
  1598. const elementConfig = CONFIG[configKey];
  1599.  
  1600. if (elementConfig.backgroundColor !== '') {
  1601. topRepositoryHeaderElement.style.setProperty('background-color', elementConfig.backgroundColor);
  1602. }
  1603.  
  1604. if (repositoryHeader.hidden) {
  1605. log(DEBUG, `Selector '${SELECTORS[configKey].id}' is hidden`);
  1606.  
  1607. if (!HEADER.querySelector(SELECTORS.pageTitle.separator)) {
  1608. log(DEBUG, `Selector '${SELECTORS.pageTitle.separator}' not found, not creating a repository header`);
  1609.  
  1610. return;
  1611. }
  1612.  
  1613. // A repo tab other than Code is being loaded for the first time
  1614. const pageTitle = HEADER.querySelector(SELECTORS.pageTitle.topDiv);
  1615.  
  1616. if (!pageTitle) {
  1617. logError(`Selector '${SELECTORS.pageTitle.topDiv}' not found`);
  1618. return;
  1619. }
  1620.  
  1621. const repositoryHeaderElement = document.createElement('div');
  1622. repositoryHeaderElement.setAttribute('id', TEMP_REPOSITORY_HEADER_FLAG);
  1623. repositoryHeaderElement.classList.add(REPOSITORY_HEADER_CLASS, 'pt-3', 'mb-2', 'px-md-4');
  1624.  
  1625. const clonedPageTitle = pageTitle.cloneNode(true);
  1626. repositoryHeaderElement.appendChild(clonedPageTitle);
  1627.  
  1628. topRepositoryHeaderElement.appendChild(repositoryHeaderElement);
  1629. insertNewGlobalBar(topRepositoryHeaderElement);
  1630. } else if (HEADER.querySelector(createId(TEMP_REPOSITORY_HEADER_FLAG))) {
  1631. log(DEBUG, `Selector '${createId(TEMP_REPOSITORY_HEADER_FLAG)}' found`);
  1632.  
  1633. // The Code tab is being loaded from another tab which has a temporary header
  1634. const tempRepositoryHeader = HEADER.querySelector(createId(TEMP_REPOSITORY_HEADER_FLAG));
  1635.  
  1636. NEW_ELEMENTS = NEW_ELEMENTS.filter(element => element !== tempRepositoryHeader);
  1637. tempRepositoryHeader.remove();
  1638.  
  1639. insertPermanentRepositoryHeader(topRepositoryHeaderElement, repositoryHeader);
  1640. } else {
  1641. log(
  1642. DEBUG,
  1643. `'${SELECTORS[configKey].id}' is hidden and selector '${createId(TEMP_REPOSITORY_HEADER_FLAG)}' not found`,
  1644. );
  1645.  
  1646. // The Code tab being loaded for the first time
  1647. insertPermanentRepositoryHeader(topRepositoryHeaderElement, repositoryHeader);
  1648. }
  1649.  
  1650. updateRepositoryHeaderName();
  1651.  
  1652. if (elementConfig.backgroundColor !== '') {
  1653. HEADER_STYLE.textContent += `
  1654. .${REPOSITORY_HEADER_CLASS},
  1655. .notification-shelf
  1656. {
  1657. background-color: ${elementConfig.backgroundColor} !important;
  1658. }
  1659. `;
  1660. }
  1661.  
  1662. if (elementConfig.alignCenter) {
  1663. HEADER_STYLE.textContent += `
  1664. .${REPOSITORY_HEADER_CLASS}
  1665. {
  1666. max-width: 1280px;
  1667. margin-right: auto;
  1668. margin-left: auto;
  1669. }
  1670.  
  1671. .${REPOSITORY_HEADER_CLASS} .rgh-ci-link
  1672. {
  1673. align-items: center;
  1674. display: flex;
  1675. margin-right: var(--base-size-24, 24px);
  1676. }
  1677.  
  1678. .${REPOSITORY_HEADER_CLASS} .rgh-ci-link summary
  1679. {
  1680. display: flex;
  1681. }
  1682.  
  1683. .${REPOSITORY_HEADER_CLASS} .commit-build-statuses
  1684. {
  1685. position: absolute;
  1686. }
  1687.  
  1688. @media (min-width: 768px) {
  1689. .${REPOSITORY_HEADER_CLASS}
  1690. {
  1691. padding-right: var(--base-size-24, 24px) !important;
  1692. padding-left: var(--base-size-24, 24px) !important;
  1693. }
  1694. }
  1695.  
  1696. @media (min-width: 1012px) {
  1697. .${REPOSITORY_HEADER_CLASS}
  1698. {
  1699. padding-right: var(--base-size-32, 32px) !important;
  1700. padding-left: var(--base-size-32, 32px) !important;
  1701. }
  1702. }
  1703. `;
  1704. }
  1705.  
  1706. if (elementConfig.link.color !== '') {
  1707. HEADER_STYLE.textContent += `
  1708. ${SELECTORS.repositoryHeader.links}
  1709. {
  1710. color: ${elementConfig.link.color} !important;
  1711. }
  1712. `;
  1713. }
  1714.  
  1715. if (elementConfig.link.hover.color !== '') {
  1716. HEADER_STYLE.textContent += `
  1717. ${SELECTORS.repositoryHeader.links}:hover
  1718. {
  1719. color: ${elementConfig.link.hover.color} !important;
  1720. }
  1721. `;
  1722. }
  1723.  
  1724. if (elementConfig.link.hover.backgroundColor !== '') {
  1725. HEADER_STYLE.textContent += `
  1726. ${SELECTORS.repositoryHeader.links}:hover
  1727. {
  1728. background-color: ${elementConfig.link.hover.backgroundColor} !important;
  1729. }
  1730. `;
  1731. }
  1732.  
  1733. if (elementConfig.link.hover.textDecoration !== '') {
  1734. HEADER_STYLE.textContent += `
  1735. ${SELECTORS.repositoryHeader.links}:hover
  1736. {
  1737. text-decoration: ${elementConfig.link.hover.textDecoration} !important;
  1738. }
  1739. `;
  1740. }
  1741.  
  1742. HEADER_STYLE.textContent += `
  1743. .${REPOSITORY_HEADER_CLASS}
  1744. {
  1745. flex: auto !important;
  1746. }
  1747.  
  1748. ${SELECTORS.repositoryHeader.details}
  1749. {
  1750. display: flex;
  1751. align-items: center;
  1752. }
  1753.  
  1754. ${SELECTORS.pageTitle.topDiv}
  1755. {
  1756. flex: 0 1 auto !important;
  1757. height: auto !important;
  1758. min-width: 0 !important;
  1759. }
  1760.  
  1761. .AppHeader-context .AppHeader-context-compact
  1762. {
  1763. display: none !important;
  1764. }
  1765.  
  1766. .AppHeader-context .AppHeader-context-full
  1767. {
  1768. display: inline-flex !important;
  1769. width: 100% !important;
  1770. min-width: 0 !important;
  1771. max-width: 100% !important;
  1772. overflow: hidden !important;
  1773. }
  1774.  
  1775. .AppHeader-context .AppHeader-context-full ul {
  1776. display: flex;
  1777. flex-direction: row;
  1778. }
  1779.  
  1780. .AppHeader-context .AppHeader-context-full li:first-child {
  1781. flex: 0 100 max-content;
  1782. }
  1783.  
  1784. .AppHeader-context .AppHeader-context-full li {
  1785. display: inline-grid;
  1786. grid-auto-flow: column;
  1787. align-items: center;
  1788. flex: 0 99999 auto;
  1789. }
  1790.  
  1791. .AppHeader-context .AppHeader-context-full ul, .AppHeader .AppHeader-globalBar .AppHeader-context .AppHeader-context-full li {
  1792. list-style: none;
  1793. }
  1794.  
  1795. .AppHeader-context .AppHeader-context-item {
  1796. display: flex;
  1797. align-items: center;
  1798. min-width: 3ch;
  1799. line-height: var(--text-body-lineHeight-medium, 1.4285714286);
  1800. text-decoration: none !important;
  1801. border-radius: var(--borderRadius-medium, 6px);
  1802. padding-inline: var(--control-medium-paddingInline-condensed, 8px);
  1803. padding-block: var(--control-medium-paddingBlock, 6px);
  1804. }
  1805.  
  1806. .AppHeader-context .AppHeader-context-full li:last-child .AppHeader-context-item {
  1807. font-weight: var(--base-text-weight-semibold, 600);
  1808. }
  1809.  
  1810. .AppHeader-context .AppHeader-context-item-separator {
  1811. color: var(--fgColor-muted, var(--color-fg-muted));
  1812. white-space: nowrap;
  1813. }
  1814.  
  1815. ${SELECTORS.header.globalBar}
  1816. {
  1817. padding: 16px !important;
  1818. }
  1819. `;
  1820.  
  1821. if (elementConfig.removePageTitle) removePageTitle();
  1822.  
  1823. return true;
  1824. }
  1825.  
  1826. function insertPermanentRepositoryHeader(topRepositoryHeaderElement, repositoryHeader) {
  1827. log(DEBUG, 'insertPermanentRepositoryHeader()');
  1828.  
  1829. const clonedRepositoryHeader = repositoryHeader.cloneNode(true);
  1830.  
  1831. // This is needed to prevent pop-in via Turbo when navigating between tabs on a repo
  1832. repositoryHeader.removeAttribute('data-turbo-replace');
  1833. clonedRepositoryHeader.removeAttribute('data-turbo-replace');
  1834.  
  1835. repositoryHeader.style.setProperty('display', 'none', 'important');
  1836.  
  1837. clonedRepositoryHeader.classList.add(REPOSITORY_HEADER_SUCCESS_FLAG, REPOSITORY_HEADER_CLASS);
  1838.  
  1839. topRepositoryHeaderElement.appendChild(clonedRepositoryHeader);
  1840.  
  1841. insertNewGlobalBar(topRepositoryHeaderElement);
  1842.  
  1843. clonedRepositoryHeader.firstElementChild.classList.remove('container-xl', 'px-lg-5');
  1844.  
  1845. NEW_ELEMENTS.push(clonedRepositoryHeader);
  1846. }
  1847.  
  1848. function updateRepositoryHeaderName() {
  1849. log(DEBUG, 'updateRepositoryHeaderName()');
  1850.  
  1851. const elementConfig = CONFIG.repositoryHeader;
  1852.  
  1853. const name = document.querySelector(SELECTORS.repositoryHeader.name);
  1854.  
  1855. if (!name) {
  1856. // When not in a repo, this is expected
  1857. log(DEBUG, `Selector '${SELECTORS.repositoryHeader.name}' not found`);
  1858. return;
  1859. }
  1860.  
  1861. name.style.setProperty('display', 'none', 'important');
  1862.  
  1863. const pageTitle = HEADER.querySelector(SELECTORS.pageTitle.topDiv);
  1864.  
  1865. if (!pageTitle) {
  1866. logError(`Selector '${SELECTORS.pageTitle.topDiv}' not found`);
  1867. return;
  1868. }
  1869.  
  1870. const ownerImg = document.querySelector(SELECTORS.repositoryHeader.ownerImg);
  1871.  
  1872. if (!ownerImg) {
  1873. log(INFO, `Selector '${SELECTORS.repositoryHeader.ownerImg}' not found`);
  1874. return;
  1875. }
  1876.  
  1877. const clonedPageTitle = pageTitle.cloneNode(true);
  1878. clonedPageTitle.style.display = '';
  1879.  
  1880. const pageTitleId = `${REPOSITORY_HEADER_CLASS}_pageTitle`;
  1881. clonedPageTitle.setAttribute('id', pageTitleId);
  1882. clonedPageTitle.querySelector('img')?.remove();
  1883.  
  1884. HEADER_STYLE.textContent += `
  1885. ${createId(pageTitleId)}
  1886. {
  1887. display: initial !important;
  1888. }
  1889. `;
  1890.  
  1891. clonedPageTitle.querySelectorAll('svg.octicon-lock').forEach(svg => svg.remove());
  1892. clonedPageTitle.querySelectorAll('a[href$="/stargazers"]').forEach(link => link.remove());
  1893.  
  1894. ownerImg.parentNode.insertBefore(clonedPageTitle, ownerImg.nextSibling);
  1895. NEW_ELEMENTS.push(clonedPageTitle);
  1896.  
  1897. if (elementConfig.avatar.remove) {
  1898. ownerImg.remove();
  1899. } else if (elementConfig.avatar.customSvg !== '') {
  1900. if (isValidURL(elementConfig.avatar.customSvg)) {
  1901. ownerImg.src = elementConfig.avatar.customSvg;
  1902. } else {
  1903. const divElement = document.createElement('div');
  1904. divElement.style.setProperty('display', 'flex');
  1905. divElement.style.setProperty('align-items', 'center');
  1906.  
  1907. divElement.innerHTML = elementConfig.avatar.customSvg;
  1908.  
  1909. ownerImg.parentNode.replaceChild(divElement, ownerImg);
  1910. }
  1911. }
  1912.  
  1913. HEADER_STYLE.textContent += cssHideElement(SELECTORS.repositoryHeader.bottomBorder);
  1914. }
  1915.  
  1916. function cloneAndLeftAlignElement(elementSelector, elementId) {
  1917. log(DEBUG, 'cloneAndLeftAlignElement()');
  1918.  
  1919. const leftAlignedDiv = HEADER.querySelector(SELECTORS.header.leftAligned);
  1920.  
  1921. if (!leftAlignedDiv) {
  1922. logError(`Selector '${SELECTORS.header.leftAligned}' not found`);
  1923. return [];
  1924. }
  1925.  
  1926. const element = HEADER.querySelector(elementSelector);
  1927.  
  1928. if (!element) {
  1929. logError(`Selector '${elementSelector}' not found`);
  1930. return [];
  1931. }
  1932.  
  1933. const elementClone = element.cloneNode(true);
  1934. const elementCloneId = `${elementId}-clone`;
  1935.  
  1936. elementClone.setAttribute('id', elementCloneId);
  1937.  
  1938. elementClone.style.setProperty('display', 'none');
  1939.  
  1940. HEADER_STYLE.textContent += cssHideElement(elementSelector);
  1941.  
  1942. HEADER_STYLE.textContent += `
  1943. ${createId(elementCloneId)}
  1944. {
  1945. display: flex !important;
  1946. }
  1947. `;
  1948.  
  1949. leftAlignedDiv.appendChild(elementClone);
  1950.  
  1951. NEW_ELEMENTS.push(elementClone);
  1952.  
  1953. return [elementCloneId, elementClone];
  1954. }
  1955.  
  1956. function insertNewGlobalBar(element) {
  1957. log(DEBUG, 'insertNewGlobalBar()');
  1958.  
  1959. const elementToInsertAfter = HEADER.querySelector(SELECTORS.header.globalBar);
  1960.  
  1961. elementToInsertAfter.parentNode.insertBefore(element, elementToInsertAfter.nextSibling);
  1962. }
  1963.  
  1964. function createId(string) {
  1965. log(TRACE, 'createId()');
  1966.  
  1967. if (string.startsWith('#')) return string;
  1968.  
  1969. if (string.startsWith('.')) {
  1970. logError(`Attempted to create an id from a class: "${string}"`);
  1971. return;
  1972. }
  1973.  
  1974. if (string.startsWith('[')) {
  1975. logError(`Attempted to create an id from an attribute selector: "${string}"`);
  1976. return;
  1977. }
  1978.  
  1979. return `#${string}`;
  1980. }
  1981.  
  1982. function cssHideElement(elementSelector) {
  1983. log(TRACE, 'cssHideElement()');
  1984.  
  1985. return `
  1986. ${elementSelector}
  1987. {
  1988. display: none !important;
  1989. }
  1990. `;
  1991. }
  1992.  
  1993. function isValidURL(string) {
  1994. log(DEBUG, 'isValidURL()');
  1995.  
  1996. const urlPattern = /^(https?:\/\/)?([\w.]+)\.([a-z]{2,6}\.?)(\/[\w.]*)*\/?$/i;
  1997. return urlPattern.test(string);
  1998. }
  1999.  
  2000. function escapeRegExp(string) {
  2001. log(DEBUG, 'escapeRegExp()');
  2002.  
  2003. return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  2004. }
  2005.  
  2006. function compareObjects(firstObject, secondObject, firstName, secondName) {
  2007. log(DEBUG, 'compareObjects()');
  2008.  
  2009. if (typeof firstObject !== 'object' || typeof secondObject !== 'object') {
  2010. return 'Invalid input. Please provide valid objects.';
  2011. }
  2012.  
  2013. const differences = [];
  2014.  
  2015. function findKeyDifferences(obj1, obj2, path = '') {
  2016. const keys1 = Object.keys(obj1);
  2017. const keys2 = Object.keys(obj2);
  2018.  
  2019. keys1.forEach(key => {
  2020. const nestedPath = path ? `${path}.${key}` : key;
  2021. if (!keys2.includes(key)) {
  2022. differences.push(`Found "${nestedPath}" in ${firstName} but not in ${secondName}`);
  2023. } else if (typeof obj1[key] === 'object' && typeof obj2[key] === 'object') {
  2024. findKeyDifferences(obj1[key], obj2[key], nestedPath);
  2025. }
  2026. });
  2027.  
  2028. keys2.forEach(key => {
  2029. const nestedPath = path ? `${path}.${key}` : key;
  2030. if (!keys1.includes(key)) {
  2031. differences.push(`Found "${nestedPath}" in ${secondName} but not in ${firstName}`);
  2032. }
  2033. });
  2034. }
  2035.  
  2036. findKeyDifferences(firstObject, secondObject);
  2037. return differences.length > 0 ? differences : [];
  2038. }
  2039.  
  2040. // eslint-disable-next-line no-unused-vars
  2041. function checkConfigConsistency(configs) {
  2042. log(DEBUG, 'checkConfigConsistency()');
  2043.  
  2044. const lightDarkDifference = compareObjects(
  2045. configs.happyMedium.light,
  2046. configs.happyMedium.dark,
  2047. 'Happy Medium Light',
  2048. 'Happy Medium Dark',
  2049. );
  2050.  
  2051. if (lightDarkDifference.length > 0) {
  2052. logError('lightDarkDifference', lightDarkDifference);
  2053.  
  2054. return false;
  2055. }
  2056.  
  2057. const typeDifference = compareObjects(
  2058. configs.happyMedium,
  2059. configs.oldSchool,
  2060. 'Happy Medium',
  2061. 'Old School',
  2062. );
  2063.  
  2064. if (typeDifference.length > 0) {
  2065. logError('typeDifference', typeDifference);
  2066.  
  2067. return false;
  2068. }
  2069.  
  2070. return true;
  2071. }
  2072.  
  2073. function updateSelectors() {
  2074. log(DEBUG, 'updateSelectors()');
  2075.  
  2076. const toolTips = Array.from(HEADER.querySelectorAll('tool-tip'));
  2077. SELECTORS.toolTips = {
  2078. copilot: toolTips.find(
  2079. tooltip => tooltip.getAttribute('for') === 'copilot-chat-header-button',
  2080. ),
  2081. create: toolTips.find(
  2082. tooltip => tooltip.textContent.includes('Create new'),
  2083. ),
  2084. pullRequests: toolTips.find(
  2085. tooltip => tooltip.textContent.includes('Your pull requests'),
  2086. ),
  2087. issues: toolTips.find(
  2088. tooltip => tooltip.textContent.includes('Your issues'),
  2089. ),
  2090. notifications: toolTips.find(
  2091. tooltip => tooltip.getAttribute('data-target') === 'notification-indicator.tooltip',
  2092. ),
  2093. };
  2094. }
  2095.  
  2096. function waitForFeaturePreviewButton() {
  2097. log(VERBOSE, 'waitForFeaturePreviewButton()');
  2098.  
  2099. if (!HEADER) return;
  2100.  
  2101. const liElementId = 'custom-global-navigation-menu-item';
  2102.  
  2103. if (HEADER.querySelector(createId(liElementId))) return;
  2104.  
  2105. const featurePreviewSearch = Array.from(
  2106. document.querySelectorAll('[data-position-regular="right"] span'),
  2107. )?.find(element => element.textContent === 'Feature preview') || null;
  2108.  
  2109. if (featurePreviewSearch) {
  2110. const featurePreviewSpan = featurePreviewSearch;
  2111. const featurePreviewLabelDiv = featurePreviewSpan.parentNode;
  2112. const featurePreviewLi = featurePreviewLabelDiv.parentNode;
  2113.  
  2114. const newLiElement = featurePreviewLi.cloneNode(true);
  2115. newLiElement.setAttribute('id', liElementId);
  2116.  
  2117. newLiElement.onclick = () => {
  2118. const closeButton = document.querySelector(SELECTORS.sidebars.right.closeButton);
  2119. if (!closeButton) {
  2120. logError(`Selector '${SELECTORS.sidebars.right.closeButton}' not found`);
  2121. } else {
  2122. closeButton.click();
  2123. }
  2124.  
  2125. GMC.open();
  2126. };
  2127.  
  2128. const textElement = newLiElement.querySelector('button > span > span');
  2129. textElement.textContent = GMC.get('menu_item_title');
  2130.  
  2131. const oldSvg = newLiElement.querySelector('svg');
  2132.  
  2133. const menuItemIcon = GMC.get('menu_item_icon');
  2134. if (menuItemIcon === 'logo') {
  2135. const newSvg = document.createElement('img');
  2136. newSvg.setAttribute('height', '16px');
  2137. newSvg.setAttribute('width', '16px');
  2138. newSvg.src = `https://raw.githubusercontent.com/blakegearin/github-custom-global-navigation/main/img/${THEME}_logo.svg`;
  2139.  
  2140. oldSvg.parentNode.replaceChild(newSvg, oldSvg);
  2141. } else {
  2142. let svgString;
  2143.  
  2144. if (menuItemIcon === 'cog') {
  2145. svgString = `
  2146. <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gear">
  2147. <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path>
  2148. </svg>
  2149. `;
  2150. } else if (menuItemIcon === 'compass') {
  2151. svgString = `
  2152. <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
  2153. <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  2154. <path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/>
  2155. </svg>
  2156. `;
  2157. }
  2158.  
  2159. const parser = new DOMParser();
  2160. const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
  2161. const newSvg = svgDoc.documentElement;
  2162.  
  2163. oldSvg.parentNode.replaceChild(newSvg, oldSvg);
  2164. }
  2165.  
  2166. const parentUl = featurePreviewLi.parentNode;
  2167. const settingsLi = document.querySelector('[data-position-regular="right"] a[href="/settings/profile"]').parentNode;
  2168.  
  2169. parentUl.insertBefore(newLiElement, settingsLi.nextSibling);
  2170.  
  2171. const divider = featurePreviewLi.parentNode.querySelector(SELECTORS.sidebars.right.divider);
  2172. if (!divider) {
  2173. logError(`Selector '${SELECTORS.sidebars.right.divider}' not found`);
  2174. return;
  2175. }
  2176. const newDivider = divider.cloneNode(true);
  2177.  
  2178. parentUl.insertBefore(newDivider, settingsLi.nextSibling);
  2179. } else {
  2180. setTimeout(waitForFeaturePreviewButton, 100);
  2181. }
  2182. }
  2183.  
  2184. function generateCustomConfig() {
  2185. log(DEBUG, 'generateCustomConfig()');
  2186.  
  2187. const customConfig = {
  2188. light: {},
  2189. dark: {},
  2190. };
  2191.  
  2192. function recursivelyGenerateCustomConfig(obj, customObj, themePrefix, parentKey = '') {
  2193. for (const key in obj) {
  2194. const currentKey = parentKey ? `${parentKey}.${key}` : key;
  2195. if (typeof obj[key] === 'object') {
  2196. customObj[key] = {};
  2197. recursivelyGenerateCustomConfig(obj[key], customObj[key], themePrefix, currentKey);
  2198. } else {
  2199. const gmcKey = `${themePrefix}_${currentKey.replace(/\./g, '_')}`;
  2200.  
  2201. if (gmcKey in GMC.fields) {
  2202. customObj[key] = GMC.get(gmcKey);
  2203. } else {
  2204. logError(`GMC field not found for key: ${gmcKey}`);
  2205. return;
  2206. }
  2207. }
  2208. }
  2209. }
  2210.  
  2211. recursivelyGenerateCustomConfig(configs.happyMedium.light, customConfig.light, 'light');
  2212. recursivelyGenerateCustomConfig(configs.happyMedium.dark, customConfig.dark, 'dark');
  2213.  
  2214. return customConfig;
  2215. }
  2216.  
  2217. function setTheme() {
  2218. log(DEBUG, 'setTheme()');
  2219.  
  2220. const dataColorMode = document.querySelector('html').getAttribute('data-color-mode');
  2221.  
  2222. if (dataColorMode === 'auto') {
  2223. if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  2224. THEME = 'dark';
  2225. }
  2226. } else if (dataColorMode === 'dark') {
  2227. THEME = 'dark';
  2228. } else if (dataColorMode !== 'light') {
  2229. logError('Unknown color mode');
  2230. }
  2231.  
  2232. log(VERBOSE, `THEME: ${THEME}`);
  2233. }
  2234.  
  2235. function gmcInitialized() {
  2236. log(DEBUG, 'gmcInitialized()');
  2237.  
  2238. updateLogLevel();
  2239.  
  2240. log(QUIET, 'Running');
  2241.  
  2242. GMC.css.basic = '';
  2243.  
  2244. startObserving();
  2245. }
  2246.  
  2247. function gmcAddSavedSpan(div) {
  2248. log(DEBUG, 'gmcAddSavedSpan()');
  2249.  
  2250. const savedDiv = document.createElement('div');
  2251. savedDiv.setAttribute('id', 'gmc-saved');
  2252.  
  2253. const iconSpan = document.createElement('span');
  2254. iconSpan.style = 'margin-right: 4px;';
  2255.  
  2256. iconSpan.innerHTML = `
  2257. <svg aria-hidden="true" focusable="false" role="img" class="octicon octicon-check-circle-fill" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" style="display: inline-block;user-select: none;vertical-align: text-bottom;">
  2258. <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path>
  2259. </svg>
  2260. `;
  2261.  
  2262. const textSpan = document.createElement('span');
  2263. textSpan.innerText = 'Saved';
  2264.  
  2265. savedDiv.appendChild(iconSpan);
  2266. savedDiv.appendChild(textSpan);
  2267.  
  2268. div.insertBefore(savedDiv, div.firstChild);
  2269. }
  2270.  
  2271. function gmcAddNewIssueButton(div) {
  2272. log(DEBUG, 'gmcAddNewIssueButton()');
  2273.  
  2274. const small = document.createElement('small');
  2275. small.classList.add('left-aligned');
  2276. small.setAttribute('title', 'Submit bug or feature request');
  2277.  
  2278. const link = document.createElement('a');
  2279. link.href = 'https://github.com/blakegearin/github-custom-global-navigation/issues';
  2280. link.innerText = 'submit bug or feature request';
  2281.  
  2282. small.appendChild(link);
  2283.  
  2284. div.insertBefore(small, div.firstChild);
  2285. }
  2286.  
  2287. function gmcOpened() {
  2288. log(DEBUG, 'gmcOpened()');
  2289.  
  2290. function updateCheckboxes() {
  2291. log(DEBUG, 'updateCheckboxes()');
  2292.  
  2293. const checkboxes = document.querySelectorAll('#gmc-frame input[type="checkbox"]');
  2294.  
  2295. if (checkboxes.length > 0) {
  2296. checkboxes.forEach(checkbox => {
  2297. checkbox.classList.add('gmc-checkbox');
  2298. });
  2299. } else {
  2300. setTimeout(updateCheckboxes, 100);
  2301. }
  2302. }
  2303.  
  2304. updateCheckboxes();
  2305.  
  2306. const configVars = document.querySelectorAll('.config_var');
  2307.  
  2308. configVars.forEach(configVar => {
  2309. const label = configVar.querySelector('.field_label');
  2310. const input = configVar.querySelector('input');
  2311.  
  2312. if (label && input && input.type === 'text') label.style.lineHeight = '33px';
  2313.  
  2314. const select = configVar.querySelector('select');
  2315.  
  2316. if (label && select) label.style.lineHeight = '33px';
  2317. });
  2318.  
  2319. modifyThenObserve(() => {
  2320. document.querySelector('#gmc-frame .reset_holder').remove();
  2321.  
  2322. const buttonHolderSelector = '#gmc-frame_buttons_holder';
  2323. const parentDiv = document.querySelector(buttonHolderSelector);
  2324.  
  2325. if (!parentDiv) {
  2326. logError(`Selector ${buttonHolderSelector} not found`);
  2327. return;
  2328. }
  2329.  
  2330. gmcAddSavedSpan(parentDiv);
  2331. gmcAddNewIssueButton(parentDiv);
  2332. });
  2333.  
  2334. document.querySelector('#gmc').classList.remove('hidden');
  2335. }
  2336.  
  2337. function gmcRefreshTab() {
  2338. location.reload();
  2339. }
  2340.  
  2341. function gmcRunScript() {
  2342. applyCustomizations(true);
  2343. }
  2344.  
  2345. function updateLogLevel() {
  2346. CURRENT_LOG_LEVEL = {
  2347. silent: SILENT,
  2348. quiet: QUIET,
  2349. info: INFO,
  2350. debug: DEBUG,
  2351. verbose: VERBOSE,
  2352. trace: TRACE,
  2353. }[GMC.get('log_level')];
  2354.  
  2355. if (LOG_LEVEL_OVERRIDE) CURRENT_LOG_LEVEL = LOG_LEVEL_OVERRIDE;
  2356. }
  2357.  
  2358. function gmcSaved() {
  2359. log(DEBUG, 'gmcSaved()');
  2360.  
  2361. const gmcSaved = document.getElementById('gmc-saved');
  2362.  
  2363. gmcSaved.style.display = 'block';
  2364.  
  2365. setTimeout(
  2366. () => gmcSaved.style.display = 'none',
  2367. 2750,
  2368. );
  2369.  
  2370. updateLogLevel();
  2371.  
  2372. switch (GMC.get('on_save')) {
  2373. case 'refresh tab':
  2374. gmcRefreshTab();
  2375. break;
  2376. case 'refresh tab and close':
  2377. gmcRefreshTab();
  2378. GMC.close();
  2379. break;
  2380. case 'run script':
  2381. gmcRunScript();
  2382. break;
  2383. case 'run script and close':
  2384. gmcRunScript();
  2385. GMC.close();
  2386. break;
  2387. }
  2388. }
  2389.  
  2390. function gmcClosed() {
  2391. log(DEBUG, 'gmcClosed()');
  2392.  
  2393. switch (GMC.get('on_close')) {
  2394. case 'refresh tab':
  2395. gmcRefreshTab();
  2396. break;
  2397. case 'run script':
  2398. gmcRunScript();
  2399. break;
  2400. }
  2401.  
  2402. document.querySelector('#gmc').classList.add('hidden');
  2403. }
  2404.  
  2405. function gmcClearCustom() {
  2406. log(DEBUG, 'gmcClearCustom()');
  2407.  
  2408. const confirmed = confirm('Are you sure you want to clear your custom configuration? This is irreversible.');
  2409.  
  2410. if (confirmed) {
  2411. const currentType = GMC.get('type');
  2412. GMC.reset();
  2413. GMC.save();
  2414.  
  2415. GMC.set('type', currentType);
  2416. GMC.save();
  2417. }
  2418. }
  2419.  
  2420. function configsToGMC(config, path = []) {
  2421. log(DEBUG, 'configsToGMC()');
  2422.  
  2423. for (const key in config) {
  2424. if (typeof config[key] === 'object' && !Array.isArray(config[key])) {
  2425. configsToGMC(config[key], path.concat(key));
  2426. } else {
  2427. const fieldName = path.concat(key).join('_');
  2428. const fieldValue = config[key];
  2429.  
  2430. log(VERBOSE, 'fieldName', fieldName);
  2431. GMC.set(fieldName, fieldValue);
  2432. }
  2433. }
  2434. }
  2435.  
  2436. function gmcApplyCustomHappyMediumConfig() {
  2437. log(DEBUG, 'gmcApplyCustomHappyMediumConfig()');
  2438.  
  2439. const confirmed = confirm('Are you sure you want to overwrite your custom configuration with Happy Medium? This is irreversible.');
  2440.  
  2441. if (confirmed) {
  2442. configsToGMC(configs.happyMedium);
  2443. GMC.save();
  2444. }
  2445. }
  2446.  
  2447. function gmcApplyCustomOldSchoolConfig() {
  2448. log(DEBUG, 'gmcApplyCustomOldSchoolConfig()');
  2449.  
  2450. const confirmed = confirm('Are you sure you want to overwrite your custom configuration with Old School? This is irreversible.');
  2451.  
  2452. if (confirmed) {
  2453. configsToGMC(configs.oldSchool);
  2454. GMC.save();
  2455. }
  2456. }
  2457.  
  2458. function gmcBuildStyle() {
  2459. log(DEBUG, 'gmcBuildStyle()');
  2460.  
  2461. const headerIdPartials = [
  2462. 'hamburgerButton_remove_var',
  2463. 'logo_remove_var',
  2464. 'pageTitle_remove_var',
  2465. 'search_remove_var',
  2466. 'divider_remove_var',
  2467. 'create_remove_var',
  2468. 'issues_remove_var',
  2469. 'pullRequests_remove_var',
  2470. 'marketplace_add_var',
  2471. 'explore_add_var',
  2472. 'notifications_remove_var',
  2473. 'light_avatar_remove_var',
  2474. 'dark_avatar_remove_var',
  2475. 'globalBar_boxShadowColor_var',
  2476. 'localBar_backgroundColor_var',
  2477. 'sidebars_backdrop_color_var',
  2478. 'repositoryHeader_import_var',
  2479. 'flipCreateInbox_var',
  2480. 'flipIssuesPullRequests_var',
  2481. ];
  2482.  
  2483. const sectionSelectors = headerIdPartials
  2484. .map(varName => `#gmc-frame .config_var[id*='${varName}']`)
  2485. .join(',\n');
  2486.  
  2487. const gmcFrameStyle = document.createElement('style');
  2488. gmcFrameStyle.textContent += `
  2489. /* Modal */
  2490.  
  2491. #gmc
  2492. {
  2493. display: inline-flex !important;
  2494. justify-content: center !important;
  2495. align-items: center !important;
  2496. position: fixed !important;
  2497. top: 0 !important;
  2498. left: 0 !important;
  2499. width: 100vw !important;
  2500. height: 100vh !important;
  2501. z-index: 9999;
  2502. background: none !important;
  2503.  
  2504. pointer-events: none;
  2505. }
  2506.  
  2507. #gmc.hidden
  2508. {
  2509. display: none !important;
  2510. }
  2511.  
  2512. #gmc-frame
  2513. {
  2514. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  2515. text-align: left;
  2516.  
  2517. inset: initial !important;
  2518. border: none !important;
  2519. max-height: initial !important;
  2520. max-width: initial !important;
  2521. opacity: 1 !important;
  2522. position: static !important;
  2523. z-index: initial !important;
  2524.  
  2525. width: 85% !important;
  2526. height: 75% !important;
  2527. overflow-y: auto !important;
  2528.  
  2529. border: none !important;
  2530. border-radius: 0.375rem !important;
  2531.  
  2532. pointer-events: auto;
  2533. }
  2534.  
  2535. #gmc-frame_wrapper
  2536. {
  2537. display: flow-root !important;
  2538. padding: 2rem !important;
  2539. }
  2540.  
  2541. /* Sections */
  2542.  
  2543. #gmc-frame #gmc-frame_section_0
  2544. {
  2545. width: 100%;
  2546. border-radius: 6px;
  2547. display: table;
  2548. }
  2549.  
  2550. #gmc-frame #gmc-frame_section_1,
  2551. #gmc-frame #gmc-frame_section_2,
  2552. #gmc-frame #gmc-frame_section_3,
  2553. #gmc-frame #gmc-frame_section_4
  2554. {
  2555. margin-top: 2rem;
  2556. width: 49%;
  2557. box-sizing: border-box;
  2558. }
  2559.  
  2560. #gmc-frame #gmc-frame_section_1
  2561. {
  2562. border-radius: 6px;
  2563. float: left;
  2564. }
  2565.  
  2566. #gmc-frame #gmc-frame_section_2
  2567. {
  2568. border-radius: 6px;
  2569. float: right;
  2570. }
  2571.  
  2572. #gmc-frame #gmc-frame_section_3
  2573. {
  2574. width: 49%;
  2575. margin-top: 2rem;
  2576. box-sizing: border-box;
  2577. border-radius: 6px;
  2578. float: left;
  2579. }
  2580.  
  2581. #gmc-frame #gmc-frame_section_4
  2582. {
  2583. display: inline-grid;
  2584. width: 49%;
  2585. margin-top: 2rem;
  2586. box-sizing: border-box;
  2587. border-radius: 6px;
  2588. float: right
  2589. }
  2590.  
  2591. #gmc-frame #gmc-frame_section_3 .config_var:not(:last-child),
  2592. #gmc-frame #gmc-frame_section_4 .config_var:not(:last-child)
  2593. {
  2594. padding-bottom: 1rem;
  2595. }
  2596.  
  2597. /* Fields */
  2598.  
  2599. #gmc-frame .config_header
  2600. {
  2601. font-size: 2em;
  2602. font-weight: 400;
  2603. line-height: 1.25;
  2604.  
  2605. padding-bottom: 0.3em;
  2606. margin-bottom: 16px;
  2607. }
  2608.  
  2609. #gmc-frame #gmc-frame_type_var
  2610. {
  2611. display: inline-flex;
  2612. }
  2613.  
  2614. #gmc-frame .section_header
  2615. {
  2616. font-size: 1.5em;
  2617. font-weight: 600;
  2618. line-height: 1.25;
  2619.  
  2620. margin-bottom: 16px;
  2621. padding: 1rem 1.5rem;
  2622. }
  2623.  
  2624. #gmc-frame .section_desc,
  2625. #gmc-frame h3
  2626. {
  2627. background: none;
  2628. border: none;
  2629. font-size: 1.25em;
  2630.  
  2631. margin-bottom: 16px;
  2632. font-weight: 600;
  2633. line-height: 1.25;
  2634. text-align: left;
  2635. }
  2636.  
  2637. #gmc-frame .config_var
  2638. {
  2639. padding: 0rem 1.5rem;
  2640. margin-bottom: 1rem;
  2641. display: flex;
  2642. }
  2643.  
  2644. ${sectionSelectors}
  2645. {
  2646. display: flow;
  2647. padding-top: 1rem;
  2648. }
  2649.  
  2650. #gmc-frame .config_var[id*='flipCreateInbox_var'],
  2651. #gmc-frame .config_var[id*='flipIssuesPullRequests_var']
  2652. {
  2653. display: flex;
  2654. }
  2655.  
  2656. #gmc-frame .field_label
  2657. {
  2658. font-weight: 600;
  2659. margin-right: 0.5rem;
  2660. }
  2661.  
  2662. #gmc-frame .field_label,
  2663. #gmc-frame .gmc-label
  2664. {
  2665. width: 15vw;
  2666. }
  2667.  
  2668. #gmc-frame .radio_label:not(:last-child)
  2669. {
  2670. margin-right: 4rem;
  2671. }
  2672.  
  2673. #gmc-frame .radio_label
  2674. {
  2675. line-height: 17px;
  2676. }
  2677.  
  2678. #gmc-frame .gmc-label
  2679. {
  2680. display: table-caption;
  2681. line-height: 17px;
  2682. }
  2683.  
  2684. #gmc-frame input[type="radio"]
  2685. {
  2686. appearance: none;
  2687. border-style: solid;
  2688. cursor: pointer;
  2689. height: 1rem;
  2690. place-content: center;
  2691. position: relative;
  2692. width: 1rem;
  2693. border-radius: 624rem;
  2694. transition: background-color 0s ease 0s, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s;
  2695. margin-right: 0.5rem;
  2696. flex: none;
  2697. }
  2698.  
  2699. #gmc-frame input[type="checkbox"]
  2700. {
  2701. appearance: none;
  2702. border-style: solid;
  2703. border-width: 1px;
  2704. cursor: pointer;
  2705. place-content: center;
  2706. position: relative;
  2707. height: 17px;
  2708. width: 17px;
  2709. border-radius: 3px;
  2710. transition: background-color 0s ease 0s, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s;
  2711. }
  2712.  
  2713. #gmc-frame #gmc-frame_field_type
  2714. {
  2715. display: flex;
  2716. }
  2717.  
  2718. #gmc-frame input[type="radio"]:checked
  2719. {
  2720. border-width: 0.25rem;
  2721. }
  2722.  
  2723. #gmc-frame input[type="radio"]:checked,
  2724. #gmc-frame .gmc-checkbox:checked
  2725. {
  2726. border-color: #2f81f7;
  2727. }
  2728.  
  2729. #gmc-frame .gmc-checkbox:checked
  2730. {
  2731. background-color: #2f81f7;
  2732. }
  2733.  
  2734. #gmc-frame .gmc-checkbox:checked::before
  2735. {
  2736. visibility: visible;
  2737. transition: visibility 0s linear 0s;
  2738. }
  2739.  
  2740. #gmc-frame .gmc-checkbox::before,
  2741. #gmc-frame .gmc-checkbox:indeterminate::before
  2742. {
  2743. animation: 80ms cubic-bezier(0.65, 0, 0.35, 1) 80ms 1 normal forwards running checkmarkIn;
  2744. }
  2745.  
  2746. #gmc-frame .gmc-checkbox::before
  2747. {
  2748. width: 1rem;
  2749. height: 1rem;
  2750. visibility: hidden;
  2751. content: "";
  2752. background-color: #FFFFFF;
  2753. clip-path: inset(1rem 0 0 0);
  2754. -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
  2755. -webkit-mask-size: 75%;
  2756. -webkit-mask-repeat: no-repeat;
  2757. -webkit-mask-position: center center;
  2758. display: block;
  2759. }
  2760.  
  2761. #gmc-frame .gmc-checkbox
  2762. {
  2763. appearance: none;
  2764. border-style: solid;
  2765. border-width: 1px;
  2766. cursor: pointer;
  2767.  
  2768. height: var(--base-size-16,16px);
  2769. margin: 0.125rem 0px 0px;
  2770. place-content: center;
  2771. position: relative;
  2772. width: var(--base-size-16,16px);
  2773. border-radius: 3px;
  2774. transition: background-color 0s ease 0s, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s;
  2775. }
  2776.  
  2777. #gmc-frame input
  2778. {
  2779. color: fieldtext;
  2780. letter-spacing: normal;
  2781. word-spacing: normal;
  2782. text-transform: none;
  2783. text-indent: 0px;
  2784. text-shadow: none;
  2785. display: inline-block;
  2786. text-align: start;
  2787. appearance: auto;
  2788. -webkit-rtl-ordering: logical;
  2789. }
  2790.  
  2791. #gmc-frame .gmc-checkbox:checked
  2792. {
  2793. transition: background-color 0s ease 0s, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;
  2794. }
  2795.  
  2796. #gmc-frame input[type="text"],
  2797. #gmc-frame textarea,
  2798. #gmc-frame select
  2799. {
  2800. padding: 5px 12px;
  2801. border-radius: 6px;
  2802. }
  2803.  
  2804. #gmc-frame input[type="text"]:focus,
  2805. #gmc-frame textarea:focus,
  2806. #gmc-frame select:focus
  2807. {
  2808. border-color: #2f81f7;
  2809. outline: 1px solid #2f81f7;
  2810. }
  2811.  
  2812. #gmc-frame svg
  2813. {
  2814. height: 17px;
  2815. width: 17px;
  2816. margin-left: 0.5rem;
  2817. }
  2818.  
  2819. #gmc small
  2820. {
  2821. font-size: x-small;
  2822. font-weight: 600;
  2823. margin-left: 3px;
  2824. }
  2825.  
  2826. /* Button bar */
  2827.  
  2828. #gmc-frame #gmc-frame_buttons_holder
  2829. {
  2830. position: fixed;
  2831. width: 85%;
  2832. text-align: right;
  2833.  
  2834. left: 50%;
  2835. bottom: 2%;
  2836. transform: translate(-50%, 0%);
  2837. padding: 1rem;
  2838.  
  2839. border-radius: 0.375rem;
  2840.  
  2841. display: flex;
  2842. align-items: center;
  2843. }
  2844.  
  2845. #gmc-frame #gmc-frame_buttons_holder .left-aligned
  2846. {
  2847. order: 1;
  2848. margin-right: auto;
  2849. }
  2850.  
  2851. #gmc-frame #gmc-frame_buttons_holder > *
  2852. {
  2853. order: 2;
  2854. }
  2855.  
  2856. #gmc-frame .saveclose_buttons
  2857. {
  2858. margin-left: 0.5rem;
  2859. }
  2860.  
  2861. #gmc-frame [type=button],
  2862. #gmc-frame .saveclose_buttons
  2863. {
  2864. position: relative;
  2865. display: inline-block;
  2866. padding: 5px 16px;
  2867. font-size: 14px;
  2868. font-weight: 500;
  2869. line-height: 20px;
  2870. white-space: nowrap;
  2871. vertical-align: middle;
  2872. cursor: pointer;
  2873. -webkit-user-select: none;
  2874. user-select: none;
  2875. border: 1px solid;
  2876. border-radius: 6px;
  2877. -webkit-appearance: none;
  2878. appearance: none;
  2879.  
  2880. font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  2881. }
  2882.  
  2883. @keyframes fadeOut
  2884. {
  2885. from {
  2886. opacity: 1;
  2887. }
  2888. to {
  2889. opacity: 0;
  2890. }
  2891. }
  2892.  
  2893. #gmc-saved
  2894. {
  2895. display: none;
  2896. margin-right: 10px;
  2897. animation: fadeOut 0.75s ease 2s forwards;
  2898. }
  2899. `;
  2900.  
  2901. if (THEME === 'light') {
  2902. gmcFrameStyle.textContent += `
  2903. #gmc-frame
  2904. {
  2905. background-color: #F6F8FA;
  2906. color: #1F2328;
  2907. box-shadow: 0 0 0 1px #D0D7DE, 0 16px 32px rgba(1,4,9,0.2) !important;
  2908. }
  2909.  
  2910. #gmc-frame .section_header_holder
  2911. {
  2912. background-color: #FFFFFF;
  2913. border: 1px solid #D0D7DE;
  2914. }
  2915.  
  2916. #gmc-frame_buttons_holder
  2917. {
  2918. background-color: #FFFFFF;
  2919. box-shadow: 0 0 0 1px #D0D7DE, 0 16px 32px rgba(1,4,9,0.2) !important;
  2920. }
  2921.  
  2922. #gmc-frame input[type="text"],
  2923. #gmc-frame textarea,
  2924. #gmc-frame select
  2925. {
  2926. border: 1px solid #D0D7DE;
  2927. }
  2928.  
  2929. #gmc-frame select
  2930. {
  2931. background-color: #F6F8FA;
  2932. }
  2933.  
  2934. #gmc-frame select:hover
  2935. {
  2936. background-color: #F3F4F6;
  2937. border-color: #1F232826;
  2938. }
  2939.  
  2940. #gmc-frame input[type="text"],
  2941. #gmc-frame textarea
  2942. {
  2943. background-color: #F6F8FA;
  2944. color: #1F2328;
  2945. }
  2946.  
  2947. #gmc-frame input[type="text"]:focus,
  2948. #gmc-frame textarea:focus
  2949. {
  2950. background-color: #FFFFFF;
  2951. }
  2952.  
  2953. #gmc-frame [type=button],
  2954. #gmc-frame .saveclose_buttons
  2955. {
  2956. background-color: #f6f8fa;
  2957. border-color: #1f232826;
  2958. box-shadow: 0 1px 0 rgba(31,35,40,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
  2959. color: #24292f;
  2960. }
  2961.  
  2962. #gmc-frame [type=button]:hover,
  2963. #gmc-frame .saveclose_buttons:hover
  2964. {
  2965. background-color: #f3f4f6;
  2966. border-color: #1f232826;
  2967. }
  2968.  
  2969. #gmc-frame .gmc-checkbox
  2970. {
  2971. border-color: #6E7781;
  2972. }
  2973.  
  2974. #gmc-frame input[type="radio"]
  2975. {
  2976. color: #6E7781;
  2977. }
  2978.  
  2979. #gmc-frame svg
  2980. {
  2981. fill: #000000;
  2982. }
  2983.  
  2984. #gmc-frame .section_header
  2985. {
  2986. border-bottom: 1px solid #D0D7DE;
  2987. }
  2988.  
  2989. ${sectionSelectors}
  2990. {
  2991. border-top: 1px solid #D0D7DE;
  2992. }
  2993.  
  2994. #gmc-frame #gmc-frame_section_3 .config_var:not(:last-child),
  2995. #gmc-frame #gmc-frame_section_4 .config_var:not(:last-child)
  2996. {
  2997. border-bottom: 1px solid #D0D7DE;
  2998. }
  2999.  
  3000. #gmc-frame #gmc-frame_saveBtn
  3001. {
  3002. background-color: #1F883D;
  3003. border-color: rgba(31, 35, 40, 0.15);
  3004. box-shadow: rgba(31, 35, 40, 0.1) 0px 1px 0px;
  3005. color: #FFFFFF;
  3006. }
  3007.  
  3008. #gmc-frame #gmc-frame_saveBtn:hover
  3009. {
  3010. background-color: rgb(26, 127, 55);
  3011. }
  3012.  
  3013. #gmc-frame #gmc-frame_section_4
  3014. {
  3015. border: 1px solid #FF818266;
  3016. }
  3017.  
  3018. #gmc-frame #gmc-frame_section_4 input
  3019. {
  3020. background-color: #F6F8FA;
  3021. border-color: #1F232826;
  3022. box-shadow: 0 1px 0 rgba(31,35,40,0.04), inset 0 1px 0 rgba(255,255,255,0.25);
  3023. color: #CF222E;
  3024. }
  3025.  
  3026. #gmc-frame #gmc-frame_section_4 input:hover
  3027. {
  3028. background-color: #A40E26;
  3029. border-color: #1F232826;
  3030. box-shadow: 0 1px 0 rgba(31,35,40,0.04);
  3031. color: #ffffff;
  3032. }
  3033.  
  3034. #gmc-saved
  3035. {
  3036. color: #1a7f37;
  3037. }
  3038.  
  3039. #gmc-saved svg path
  3040. {
  3041. fill: #1a7f37;
  3042. }
  3043. `;
  3044. } else if (THEME === 'dark') {
  3045. gmcFrameStyle.textContent += `
  3046. #gmc-frame
  3047. {
  3048. background-color: #161B22;
  3049. color: #E6EDF3;
  3050. box-shadow: 0 0 0 1px #30363D, 0 16px 32px #010409 !important;
  3051. }
  3052.  
  3053. #gmc-frame .section_header_holder
  3054. {
  3055. background-color: #0D1117;
  3056. border: 1px solid #30363D;
  3057. }
  3058.  
  3059. #gmc-frame_buttons_holder
  3060. {
  3061. background-color: #161B22;
  3062. box-shadow: 0 0 0 1px #30363D, 0 16px 32px #010409 !important;
  3063. }
  3064.  
  3065. #gmc-frame input[type="text"],
  3066. #gmc-frame textarea,
  3067. #gmc-frame select
  3068. {
  3069. border: 1px solid #5B626C;
  3070. }
  3071.  
  3072. #gmc-frame input[type="text"],
  3073. #gmc-frame textarea
  3074. {
  3075. background-color: #010409;
  3076. color: #FFFFFF;
  3077. }
  3078.  
  3079. #gmc-frame [type=button]:hover,
  3080. #gmc-frame .saveclose_buttons:hover
  3081. {
  3082. background-color: #30363d;
  3083. border-color: #8b949e;
  3084. }
  3085.  
  3086. #gmc-frame .gmc-checkbox
  3087. {
  3088. border-color: #6E7681;
  3089. }
  3090.  
  3091. #gmc-frame input[type="radio"]
  3092. {
  3093. color: #6D7681;
  3094. }
  3095.  
  3096. #gmc-frame input[type="text"]:focus,
  3097. textarea:focus
  3098. {
  3099. background-color: #0D1117;
  3100. }
  3101.  
  3102. #gmc-frame [type=button],
  3103. #gmc-frame .saveclose_buttons
  3104. {
  3105. color: #c9d1d9;
  3106. background-color: #21262d;
  3107. border-color: #f0f6fc1a;
  3108. }
  3109.  
  3110. #gmc-frame svg
  3111. {
  3112. fill: #E6EDF3;
  3113. }
  3114.  
  3115. #gmc-frame .section_header
  3116. {
  3117. border-bottom: 1px solid #30363D;
  3118. }
  3119.  
  3120. ${sectionSelectors}
  3121. {
  3122. border-top: 1px solid #30363D;
  3123. }
  3124.  
  3125. #gmc-frame #gmc-frame_section_3 .config_var:not(:last-child),
  3126. #gmc-frame #gmc-frame_section_4 .config_var:not(:last-child)
  3127. {
  3128. padding-bottom: 1rem;
  3129. border-bottom: 1px solid #30363D;
  3130. }
  3131.  
  3132. #gmc-frame #gmc-frame_saveBtn
  3133. {
  3134. background-color: #238636;
  3135. border-color: #F0F6FC1A;
  3136. box-shadow: 0 0 transparent;
  3137. color: #FFFFFF;
  3138. }
  3139.  
  3140. #gmc-frame #gmc-frame_saveBtn:hover
  3141. {
  3142. background-color: #2EA043;
  3143. border-color: #F0F6FC1A;
  3144. }
  3145.  
  3146. #gmc-frame #gmc-frame_section_4
  3147. {
  3148. border: 1px solid #f8514966;
  3149. }
  3150.  
  3151. #gmc-frame #gmc-frame_section_4 input
  3152. {
  3153. background-color: #21262D;
  3154. border-color: #F0F6FC1A;
  3155. }
  3156.  
  3157. #gmc-frame #gmc-frame_section_4 input
  3158. {
  3159. color: #F85149;
  3160. }
  3161.  
  3162. #gmc-frame #gmc-frame_section_4 input:hover
  3163. {
  3164. background-color: #DA3633;
  3165. border-color: #F85149;
  3166. color: #FFFFFF;
  3167. }
  3168.  
  3169. #gmc-saved
  3170. {
  3171. color: #3FB950;
  3172. }
  3173.  
  3174. #gmc-saved svg path
  3175. {
  3176. fill: #3FB950;
  3177. }
  3178. `;
  3179. }
  3180.  
  3181. document.head.appendChild(gmcFrameStyle);
  3182. }
  3183.  
  3184. function gmcBuildFrame() {
  3185. log(DEBUG, 'gmcBuildFrame()');
  3186.  
  3187. const body = document.querySelector('body');
  3188. const gmcDiv = document.createElement('div');
  3189.  
  3190. gmcDiv.setAttribute('id', 'gmc');
  3191. gmcDiv.classList.add('hidden');
  3192.  
  3193. body.appendChild(gmcDiv);
  3194.  
  3195. const gmcFrameDiv = document.createElement('div');
  3196. gmcFrameDiv.setAttribute('id', 'gmc-frame');
  3197.  
  3198. gmcDiv.appendChild(gmcFrameDiv);
  3199.  
  3200. gmcBuildStyle();
  3201.  
  3202. return gmcFrameDiv;
  3203. }
  3204.  
  3205. function applyCustomizations(refresh = false) {
  3206. log(DEBUG, 'applyCustomizations()');
  3207.  
  3208. log(DEBUG, 'refresh', refresh);
  3209.  
  3210. HEADER = document.querySelector(SELECTORS.header.self);
  3211.  
  3212. if (!HEADER) return 'continue';
  3213.  
  3214. const featurePreviewButton = document.querySelector(SELECTORS.avatar.button);
  3215.  
  3216. if (!featurePreviewButton) {
  3217. logError(`Selector ${SELECTORS.avatar.button} not found`);
  3218. return 'break';
  3219. }
  3220.  
  3221. featurePreviewButton.addEventListener('click', waitForFeaturePreviewButton);
  3222.  
  3223. CONFIG_NAME = {
  3224. 'Off': 'off',
  3225. 'Happy Medium': 'happyMedium',
  3226. 'Old School': 'oldSchool',
  3227. 'Custom': 'custom',
  3228. }[GMC.get('type')];
  3229.  
  3230. log(DEBUG, 'CONFIG_NAME', CONFIG_NAME);
  3231.  
  3232. if (CONFIG_NAME === 'off') return 'break';
  3233.  
  3234. if (CONFIG_NAME === 'custom') configs.custom = generateCustomConfig();
  3235.  
  3236. CONFIG = configs[CONFIG_NAME][THEME];
  3237.  
  3238. log(VERBOSE, 'CONFIG', CONFIG);
  3239.  
  3240. const headerSuccessFlag = 'customizedHeader';
  3241.  
  3242. const foundHeaderSuccessFlag = document.getElementById(headerSuccessFlag);
  3243. log(DEBUG, 'foundHeaderSuccessFlag', foundHeaderSuccessFlag);
  3244.  
  3245. const configurationApplied = HEADER.classList.contains(CONFIG_NAME);
  3246.  
  3247. if (!configurationApplied && (foundHeaderSuccessFlag === null || refresh)) {
  3248. updateSelectors();
  3249.  
  3250. if (refresh) {
  3251. modifyThenObserve(() => {
  3252. document.querySelector(createId(SELECTORS.header.style))?.remove();
  3253. HEADER_STYLE.textContent = '';
  3254.  
  3255. HEADER.classList.remove(OLD_CONFIG_NAME);
  3256. NEW_ELEMENTS.forEach((element) => element.remove());
  3257. });
  3258. }
  3259.  
  3260. if (CONFIG_NAME === 'oldSchool') {
  3261. HEADER_STYLE.textContent += `
  3262. @media (max-width: 767.98px)
  3263. {
  3264. action-menu
  3265. {
  3266. display: none !important;
  3267. }
  3268. }
  3269.  
  3270. .AppHeader .AppHeader-globalBar .AppHeader-search input[type=search],
  3271. .AppHeader .AppHeader-globalBar .AppHeader-search .AppHeader-searchButton
  3272. {
  3273. padding-right: 4px;
  3274. }
  3275. `;
  3276. }
  3277.  
  3278. HEADER_UPDATES_COUNT++;
  3279. updateHeader();
  3280.  
  3281. HEADER.setAttribute('id', headerSuccessFlag);
  3282. HEADER.classList.add(CONFIG_NAME);
  3283.  
  3284. OLD_CONFIG_NAME = CONFIG_NAME;
  3285.  
  3286. log(QUIET, 'Complete');
  3287.  
  3288. return 'break';
  3289. } else {
  3290. if (CONFIG.avatar.dropdownIcon) insertAvatarDropdown();
  3291.  
  3292. if (CONFIG.repositoryHeader.import) {
  3293. // When starting in a repository tab like Issues, the proper repository header
  3294. // (including Unwatch, Star, and Fork) is not present per GitHub's design.
  3295. // If page title is removed, the page will be missing any location context in the header.
  3296. // To improve this experience, a temporary repository header is created with the
  3297. // page title or breadcrumbs.
  3298. // The proper repository header replaces the temporary one when navigating to the Code tab.
  3299. if (
  3300. !document.querySelector(SELECTORS.repositoryHeader.id)?.hidden &&
  3301. (
  3302. document.querySelector(createId(TEMP_REPOSITORY_HEADER_FLAG)) ||
  3303. !document.querySelector(`.${REPOSITORY_HEADER_SUCCESS_FLAG}`)
  3304. )
  3305. ) {
  3306. const updated = importRepositoryHeader();
  3307.  
  3308. if (updated) {
  3309. HEADER_UPDATES_COUNT++;
  3310. log(QUIET, 'Repository header updated');
  3311. } else {
  3312. IDLE_MUTATION_COUNT++;
  3313. }
  3314.  
  3315. return 'break';
  3316. }
  3317. }
  3318. }
  3319.  
  3320. if (CONFIG.avatar.dropdownIcon) insertAvatarDropdown();
  3321. }
  3322.  
  3323. function startObserving() {
  3324. log(DEBUG, 'startObserving()');
  3325.  
  3326. OBSERVER.observe(
  3327. document.body,
  3328. {
  3329. childList: true,
  3330. subtree: true,
  3331. },
  3332. );
  3333. }
  3334.  
  3335. function modifyThenObserve(callback) {
  3336. log(DEBUG, 'modifyThenObserve()');
  3337. OBSERVER.disconnect();
  3338.  
  3339. callback();
  3340.  
  3341. startObserving();
  3342. }
  3343.  
  3344. function observeAndModify(mutationsList) {
  3345. log(VERBOSE, 'observeAndModify()');
  3346.  
  3347. if (IDLE_MUTATION_COUNT > MAX_IDLE_MUTATIONS) {
  3348. // This is a failsafe to prevent infinite loops
  3349. logError('MAX_IDLE_MUTATIONS exceeded');
  3350. OBSERVER.disconnect();
  3351.  
  3352. return;
  3353. } else if (HEADER_UPDATES_COUNT >= MAX_HEADER_UPDATES) {
  3354. // This is a failsafe to prevent infinite loops
  3355. logError('MAX_HEADER_UPDATES exceeded');
  3356. OBSERVER.disconnect();
  3357.  
  3358. return;
  3359. }
  3360.  
  3361. for (const mutation of mutationsList) {
  3362. // Use header id to determine if updates have already been applied
  3363. if (mutation.type !== 'childList') return;
  3364.  
  3365. log(TRACE, 'mutation', mutation);
  3366.  
  3367. const outcome = applyCustomizations();
  3368.  
  3369. log(DEBUG, 'outcome', outcome);
  3370.  
  3371. if (outcome === 'continue') continue;
  3372. if (outcome === 'break') break;
  3373. }
  3374. }
  3375.  
  3376. const UNICODE_NON_BREAKING_SPACE = '\u00A0';
  3377. const REPOSITORY_HEADER_SUCCESS_FLAG = 'permCustomizedRepositoryHeader';
  3378. const TEMP_REPOSITORY_HEADER_FLAG = 'tempCustomizedRepositoryHeader';
  3379. const REPOSITORY_HEADER_CLASS = 'customizedRepositoryHeader';
  3380. const MAX_IDLE_MUTATIONS = 1000;
  3381. const MAX_HEADER_UPDATES = 100;
  3382.  
  3383. let CONFIG;
  3384. let CONFIG_NAME;
  3385. let OLD_CONFIG_NAME;
  3386. let HEADER;
  3387.  
  3388. let HEADER_STYLE = document.createElement('style');
  3389. let THEME = 'light';
  3390. let NEW_ELEMENTS = [];
  3391. let LEFT_SIDEBAR_PRELOADED = false;
  3392. let RIGHT_SIDEBAR_PRELOADED = false;
  3393. let IDLE_MUTATION_COUNT = 0;
  3394. let HEADER_UPDATES_COUNT = 0;
  3395. let SELECTORS = {
  3396. header: {
  3397. self: 'header.AppHeader',
  3398. actionsDiv: '.AppHeader-actions',
  3399. globalBar: '.AppHeader-globalBar',
  3400. localBar: {
  3401. topDiv: '.AppHeader-localBar',
  3402. underlineNavActions: '.UnderlineNav-actions',
  3403. },
  3404. leftAligned: '.AppHeader-globalBar-start',
  3405. rightAligned: '.AppHeader-globalBar-end',
  3406. style: 'customHeaderStyle',
  3407. },
  3408. logo: {
  3409. topDiv: '.AppHeader-globalBar-start .AppHeader-logo',
  3410. svg: '.AppHeader-logo svg',
  3411. },
  3412. hamburgerButton: '.AppHeader-globalBar-start deferred-side-panel',
  3413. pageTitle: {
  3414. id: 'custom-page-title',
  3415. topDiv: '.AppHeader-context',
  3416. links: '.AppHeader-context a',
  3417. separator: '.AppHeader-context-item-separator',
  3418. },
  3419. search: {
  3420. id: 'search-div',
  3421. topDiv: '.AppHeader-search',
  3422. input: '.search-input',
  3423. button: '[data-target="qbsearch-input.inputButton"]',
  3424. magnifyingGlassIcon: '.AppHeader-search-control label',
  3425. commandPalette: '#AppHeader-commandPalette-button',
  3426. placeholderSpan: '#qb-input-query',
  3427. placeholderDiv: '.AppHeader-search-control .overflow-hidden',
  3428. modal: '[data-target="qbsearch-input.queryBuilderContainer"]',
  3429. },
  3430. copilot: {
  3431. id: 'copilot-div',
  3432. topDiv: '.AppHeader-CopilotChat',
  3433. button: '#copilot-chat-header-button',
  3434. textContent: 'copilot-text-content-span',
  3435. },
  3436. create: {
  3437. id: 'create-div',
  3438. topDiv: '.AppHeader-actions react-partial-anchor',
  3439. button: '#global-create-menu-anchor',
  3440. overlay: '#global-create-menu-overlay',
  3441. plusIcon: '#global-create-menu-anchor .Button-visual.Button-leadingVisual',
  3442. dropdownIcon: '#global-create-menu-anchor .Button-label',
  3443. textContent: 'create-text-content-span',
  3444. },
  3445. issues: {
  3446. id: 'issues',
  3447. textContent: 'issues-text-content-span',
  3448. },
  3449. pullRequests: {
  3450. id: 'pullRequests',
  3451. link: '.AppHeader-globalBar-end .AppHeader-actions a[href="/pulls"]',
  3452. textContent: 'pullRequests-text-content-span',
  3453. },
  3454. marketplace: {
  3455. id: 'marketplace',
  3456. link: '.AppHeader-globalBar-end .AppHeader-actions a[href="/marketplace"]',
  3457. textContent: 'marketplace-text-content-span',
  3458. },
  3459. explore: {
  3460. id: 'explore',
  3461. link: '.AppHeader-globalBar-end .AppHeader-actions a[href="/explore"]',
  3462. textContent: 'explore-text-content-span',
  3463. },
  3464. notifications: {
  3465. id: 'custom-notifications',
  3466. indicator: 'notification-indicator',
  3467. dot: '.AppHeader-button.AppHeader-button--hasIndicator::before',
  3468. textContent: 'textContent-text-content-spa',
  3469. },
  3470. avatar: {
  3471. topDiv: '.AppHeader-user',
  3472. button: '.AppHeader-user button',
  3473. img: '.AppHeader-user button img.avatar',
  3474. svg: 'avatar-dropdown',
  3475. },
  3476. repositoryHeader: {
  3477. id: '#repository-container-header',
  3478. ownerImg: `.${REPOSITORY_HEADER_CLASS} img`,
  3479. name: `.${REPOSITORY_HEADER_CLASS} strong`,
  3480. links: `.${REPOSITORY_HEADER_CLASS} nav[role="navigation"] a`,
  3481. details: '#repository-details-container',
  3482. bottomBorder: `.${REPOSITORY_HEADER_CLASS} .border-bottom.mx-xl-5`,
  3483. },
  3484. sidebars: {
  3485. left: {
  3486. backdrop: 'dialog[data-target="deferred-side-panel.panel"]::backdrop',
  3487. modalDialog: '.Overlay--placement-left',
  3488. },
  3489. right: {
  3490. topDiv: '#__primerPortalRoot__',
  3491. wrapper: '#__primerPortalRoot__ > div',
  3492. backdrop: '#__primerPortalRoot__ > div > [data-position-regular="right"]',
  3493. modalDialog: '#__primerPortalRoot__ > div > [data-position-regular="right"] > div',
  3494. closeButton: '#__primerPortalRoot__ button[aria-label="Close"]',
  3495. divider: 'li[data-component="ActionList.Divider"]',
  3496. },
  3497. },
  3498. };
  3499.  
  3500. HEADER_STYLE.setAttribute('id', SELECTORS.header.style);
  3501.  
  3502. setTheme();
  3503.  
  3504. const oldSchoolColor = '#F0F6FC';
  3505. const oldSchoolHoverColor = '#FFFFFFB3';
  3506. const oldSchoolHoverBackgroundColor = 'transparent';
  3507. let configs = {
  3508. happyMedium: {
  3509. light: {
  3510. backgroundColor: '',
  3511. hamburgerButton: {
  3512. remove: false,
  3513. },
  3514. logo: {
  3515. remove: false,
  3516. color: '',
  3517. customSvg: '',
  3518. },
  3519. pageTitle: {
  3520. remove: false,
  3521. color: '',
  3522. hover: {
  3523. backgroundColor: '',
  3524. color: '',
  3525. },
  3526. },
  3527. search: {
  3528. remove: false,
  3529. backgroundColor: '',
  3530. borderColor: '',
  3531. boxShadow: '',
  3532. alignLeft: false,
  3533. width: 'max',
  3534. margin: {
  3535. left: '',
  3536. right: '',
  3537. },
  3538. magnifyingGlassIcon: {
  3539. remove: false,
  3540. },
  3541. placeholder: {
  3542. text: '',
  3543. color: '',
  3544. },
  3545. rightButton: 'command palette',
  3546. modal: {
  3547. width: '',
  3548. },
  3549. },
  3550. copilot: {
  3551. remove: false,
  3552. border: true,
  3553. tooltip: false,
  3554. alignLeft: false,
  3555. boxShadow: '',
  3556. icon: {
  3557. remove: false,
  3558. color: '',
  3559. },
  3560. text: {
  3561. content: 'Copilot',
  3562. color: '',
  3563. },
  3564. hover: {
  3565. backgroundColor: '',
  3566. color: '',
  3567. },
  3568. },
  3569. divider: {
  3570. remove: true,
  3571. },
  3572. flipCreateInbox: false,
  3573. create: {
  3574. remove: false,
  3575. border: true,
  3576. tooltip: false,
  3577. boxShadow: '',
  3578. hoverBackgroundColor: '',
  3579. plusIcon: {
  3580. remove: false,
  3581. color: '',
  3582. marginRight: '0.25rem',
  3583. hover: {
  3584. color: '',
  3585. },
  3586. },
  3587. text: {
  3588. content: 'Create',
  3589. color: '',
  3590. },
  3591. dropdownIcon: {
  3592. remove: false,
  3593. color: '',
  3594. hover: {
  3595. color: '',
  3596. },
  3597. },
  3598. },
  3599. flipIssuesPullRequests: true,
  3600. issues: {
  3601. remove: false,
  3602. border: true,
  3603. tooltip: false,
  3604. alignLeft: false,
  3605. boxShadow: '',
  3606. icon: {
  3607. remove: false,
  3608. color: '',
  3609. },
  3610. text: {
  3611. content: 'Issues',
  3612. color: '',
  3613. },
  3614. hover: {
  3615. backgroundColor: '',
  3616. color: '',
  3617. },
  3618. },
  3619. pullRequests: {
  3620. remove: false,
  3621. border: true,
  3622. tooltip: false,
  3623. alignLeft: false,
  3624. boxShadow: '',
  3625. icon: {
  3626. remove: false,
  3627. color: '',
  3628. },
  3629. text: {
  3630. content: 'Pull requests',
  3631. color: '',
  3632. },
  3633. hover: {
  3634. backgroundColor: '',
  3635. color: '',
  3636. },
  3637. },
  3638. marketplace: {
  3639. add: false,
  3640. border: false,
  3641. alignLeft: false,
  3642. boxShadow: '',
  3643. icon: {
  3644. remove: false,
  3645. color: '',
  3646. },
  3647. text: {
  3648. content: 'Marketplace',
  3649. color: '',
  3650. },
  3651. hover: {
  3652. backgroundColor: '',
  3653. color: '',
  3654. },
  3655. },
  3656. explore: {
  3657. add: false,
  3658. border: false,
  3659. alignLeft: false,
  3660. boxShadow: '',
  3661. icon: {
  3662. remove: false,
  3663. color: '',
  3664. },
  3665. text: {
  3666. content: 'Explore',
  3667. color: '',
  3668. },
  3669. hover: {
  3670. backgroundColor: '',
  3671. color: '',
  3672. },
  3673. },
  3674. notifications: {
  3675. remove: false,
  3676. border: true,
  3677. tooltip: false,
  3678. boxShadow: '',
  3679. hoverBackgroundColor: '',
  3680. icon: {
  3681. symbol: 'bell', // Accepts 'inbox', 'bell', or ''
  3682. color: '',
  3683. hover: {
  3684. color: '',
  3685. },
  3686. },
  3687. text: {
  3688. content: 'Inbox',
  3689. color: '',
  3690. },
  3691. dot: {
  3692. remove: false,
  3693. boxShadowColor: '',
  3694. color: '',
  3695. displayOverIcon: true,
  3696. },
  3697. },
  3698. avatar: {
  3699. remove: false,
  3700. size: '',
  3701. dropdownIcon: false,
  3702. },
  3703. globalBar: {
  3704. boxShadowColor: '',
  3705. leftAligned: {
  3706. gap: '',
  3707. },
  3708. rightAligned: {
  3709. gap: '',
  3710. },
  3711. },
  3712. localBar: {
  3713. backgroundColor: '#F6F8FA',
  3714. alignCenter: false,
  3715. boxShadow: {
  3716. consistentColor: true,
  3717. },
  3718. links: {
  3719. color: '',
  3720. },
  3721. },
  3722. sidebars: {
  3723. backdrop: {
  3724. color: 'transparent',
  3725. },
  3726. left: {
  3727. preload: true,
  3728. },
  3729. right: {
  3730. preload: true,
  3731. floatUnderneath: false,
  3732. width: '',
  3733. maxHeight: '',
  3734. },
  3735. },
  3736. repositoryHeader: {
  3737. import: true,
  3738. alignCenter: false,
  3739. removePageTitle: true,
  3740. backgroundColor: '#F6F8FA',
  3741. avatar: {
  3742. remove: false,
  3743. customSvg: '',
  3744. },
  3745. link: {
  3746. color: '',
  3747. hover: {
  3748. backgroundColor: 'transparent',
  3749. color: 'var(--color-accent-fg)',
  3750. textDecoration: 'underline',
  3751. },
  3752. },
  3753. },
  3754. },
  3755. dark: {
  3756. backgroundColor: '',
  3757. hamburgerButton: {
  3758. remove: false,
  3759. },
  3760. logo: {
  3761. remove: false,
  3762. color: '',
  3763. customSvg: '',
  3764. },
  3765. pageTitle: {
  3766. remove: false,
  3767. color: '',
  3768. hover: {
  3769. backgroundColor: '',
  3770. color: '',
  3771. },
  3772. },
  3773. search: {
  3774. remove: false,
  3775. backgroundColor: '',
  3776. borderColor: '',
  3777. boxShadow: '',
  3778. alignLeft: false,
  3779. width: 'max',
  3780. margin: {
  3781. left: '',
  3782. right: '',
  3783. },
  3784. magnifyingGlassIcon: {
  3785. remove: false,
  3786. },
  3787. placeholder: {
  3788. text: '',
  3789. color: '',
  3790. },
  3791. rightButton: 'command palette',
  3792. modal: {
  3793. width: '',
  3794. },
  3795. },
  3796. copilot: {
  3797. remove: false,
  3798. border: true,
  3799. tooltip: false,
  3800. alignLeft: false,
  3801. boxShadow: '',
  3802. icon: {
  3803. remove: false,
  3804. color: '',
  3805. },
  3806. text: {
  3807. content: 'Copilot',
  3808. color: '',
  3809. },
  3810. hover: {
  3811. backgroundColor: '',
  3812. color: '',
  3813. },
  3814. },
  3815. divider: {
  3816. remove: true,
  3817. },
  3818. flipCreateInbox: false,
  3819. create: {
  3820. remove: false,
  3821. border: true,
  3822. tooltip: false,
  3823. boxShadow: '',
  3824. hoverBackgroundColor: '',
  3825. plusIcon: {
  3826. remove: false,
  3827. color: '',
  3828. marginRight: '0.25rem',
  3829. hover: {
  3830. color: '',
  3831. },
  3832. },
  3833. text: {
  3834. content: 'Create',
  3835. color: '',
  3836. },
  3837. dropdownIcon: {
  3838. remove: false,
  3839. color: '',
  3840. hover: {
  3841. color: '',
  3842. },
  3843. },
  3844. },
  3845. flipIssuesPullRequests: true,
  3846. issues: {
  3847. remove: false,
  3848. border: true,
  3849. tooltip: false,
  3850. alignLeft: false,
  3851. boxShadow: '',
  3852. icon: {
  3853. remove: false,
  3854. color: '',
  3855. },
  3856. text: {
  3857. content: 'Issues',
  3858. color: '',
  3859. },
  3860. hover: {
  3861. backgroundColor: '',
  3862. color: '',
  3863. },
  3864. },
  3865. pullRequests: {
  3866. remove: false,
  3867. border: true,
  3868. tooltip: false,
  3869. alignLeft: false,
  3870. boxShadow: '',
  3871. icon: {
  3872. remove: false,
  3873. color: '',
  3874. },
  3875. text: {
  3876. content: 'Pull requests',
  3877. color: '',
  3878. },
  3879. hover: {
  3880. backgroundColor: '',
  3881. color: '',
  3882. },
  3883. },
  3884. marketplace: {
  3885. add: false,
  3886. border: false,
  3887. alignLeft: false,
  3888. boxShadow: '',
  3889. icon: {
  3890. remove: false,
  3891. color: '',
  3892. },
  3893. text: {
  3894. content: 'Marketplace',
  3895. color: '',
  3896. },
  3897. hover: {
  3898. backgroundColor: '',
  3899. color: '',
  3900. },
  3901. },
  3902. explore: {
  3903. add: false,
  3904. border: false,
  3905. alignLeft: false,
  3906. boxShadow: '',
  3907. icon: {
  3908. remove: false,
  3909. color: '',
  3910. },
  3911. text: {
  3912. content: 'Explore',
  3913. color: '',
  3914. },
  3915. hover: {
  3916. backgroundColor: '',
  3917. color: '',
  3918. },
  3919. },
  3920. notifications: {
  3921. remove: false,
  3922. border: true,
  3923. tooltip: false,
  3924. boxShadow: '',
  3925. hoverBackgroundColor: '',
  3926. icon: {
  3927. symbol: 'bell', // Accepts 'inbox', 'bell', or ''
  3928. color: '',
  3929. hover: {
  3930. color: '',
  3931. },
  3932. },
  3933. text: {
  3934. content: 'Inbox',
  3935. color: '',
  3936. },
  3937. dot: {
  3938. remove: false,
  3939. boxShadowColor: '',
  3940. color: '',
  3941. displayOverIcon: true,
  3942. },
  3943. },
  3944. avatar: {
  3945. remove: false,
  3946. size: '',
  3947. dropdownIcon: false,
  3948. },
  3949. globalBar: {
  3950. boxShadowColor: '',
  3951. leftAligned: {
  3952. gap: '',
  3953. },
  3954. rightAligned: {
  3955. gap: '',
  3956. },
  3957. },
  3958. localBar: {
  3959. backgroundColor: '#02040A',
  3960. alignCenter: false,
  3961. boxShadow: {
  3962. consistentColor: true,
  3963. },
  3964. links: {
  3965. color: '',
  3966. },
  3967. },
  3968. sidebars: {
  3969. backdrop: {
  3970. color: 'transparent',
  3971. },
  3972. left: {
  3973. preload: true,
  3974. },
  3975. right: {
  3976. preload: true,
  3977. floatUnderneath: false,
  3978. width: '',
  3979. maxHeight: '',
  3980. },
  3981. },
  3982. repositoryHeader: {
  3983. import: true,
  3984. alignCenter: false,
  3985. removePageTitle: true,
  3986. backgroundColor: '#02040A',
  3987. avatar: {
  3988. remove: false,
  3989. customSvg: '',
  3990. },
  3991. link: {
  3992. color: '#6AAFF9',
  3993. hover: {
  3994. backgroundColor: 'transparent',
  3995. color: 'var(--color-accent-fg)',
  3996. textDecoration: 'underline',
  3997. },
  3998. },
  3999. },
  4000. },
  4001. },
  4002. oldSchool: {
  4003. light: {
  4004. backgroundColor: '#161C20',
  4005. hamburgerButton: {
  4006. remove: true,
  4007. },
  4008. logo: {
  4009. remove: false,
  4010. color: '#e6edf3',
  4011. customSvg: '',
  4012. },
  4013. pageTitle: {
  4014. remove: true,
  4015. color: oldSchoolColor,
  4016. hover: {
  4017. backgroundColor: oldSchoolHoverBackgroundColor,
  4018. color: oldSchoolHoverColor,
  4019. },
  4020. },
  4021. search: {
  4022. remove: false,
  4023. backgroundColor: '#494D54',
  4024. borderColor: '#30363d',
  4025. boxShadow: 'none',
  4026. alignLeft: true,
  4027. width: 'calc(var(--feed-sidebar) - 67px)',
  4028. margin: {
  4029. left: '',
  4030. right: '',
  4031. },
  4032. magnifyingGlassIcon: {
  4033. remove: true,
  4034. },
  4035. placeholder: {
  4036. text: 'Search or jump to...',
  4037. color: '#B3B3B5',
  4038. },
  4039. rightButton: 'slash key',
  4040. modal: {
  4041. width: '450px',
  4042. },
  4043. },
  4044. copilot: {
  4045. remove: true,
  4046. border: false,
  4047. tooltip: false,
  4048. alignLeft: true,
  4049. boxShadow: 'none',
  4050. icon: {
  4051. remove: false,
  4052. color: '',
  4053. },
  4054. text: {
  4055. content: 'Copilot',
  4056. color: oldSchoolColor,
  4057. },
  4058. hover: {
  4059. backgroundColor: oldSchoolHoverBackgroundColor,
  4060. color: oldSchoolHoverColor,
  4061. },
  4062. },
  4063. divider: {
  4064. remove: true,
  4065. },
  4066. flipCreateInbox: true,
  4067. create: {
  4068. remove: false,
  4069. border: false,
  4070. tooltip: false,
  4071. boxShadow: 'none',
  4072. hoverBackgroundColor: oldSchoolHoverBackgroundColor,
  4073. plusIcon: {
  4074. remove: false,
  4075. color: oldSchoolColor,
  4076. marginRight: '0px',
  4077. hover: {
  4078. color: oldSchoolHoverColor,
  4079. },
  4080. },
  4081. text: {
  4082. content: '',
  4083. color: '',
  4084. },
  4085. dropdownIcon: {
  4086. remove: false,
  4087. color: oldSchoolColor,
  4088. hover: {
  4089. color: oldSchoolHoverColor,
  4090. },
  4091. },
  4092. },
  4093. flipIssuesPullRequests: true,
  4094. issues: {
  4095. remove: false,
  4096. border: false,
  4097. tooltip: false,
  4098. alignLeft: true,
  4099. boxShadow: 'none',
  4100. icon: {
  4101. remove: true,
  4102. color: '',
  4103. },
  4104. text: {
  4105. content: 'Issues',
  4106. color: oldSchoolColor,
  4107. },
  4108. hover: {
  4109. backgroundColor: oldSchoolHoverBackgroundColor,
  4110. color: oldSchoolHoverColor,
  4111. },
  4112. },
  4113. pullRequests: {
  4114. remove: false,
  4115. border: false,
  4116. tooltip: false,
  4117. alignLeft: true,
  4118. boxShadow: 'none',
  4119. icon: {
  4120. remove: true,
  4121. color: '',
  4122. },
  4123. text: {
  4124. content: 'Pull requests',
  4125. color: oldSchoolColor,
  4126. },
  4127. hover: {
  4128. backgroundColor: oldSchoolHoverBackgroundColor,
  4129. color: oldSchoolHoverColor,
  4130. },
  4131. },
  4132. marketplace: {
  4133. add: true,
  4134. border: false,
  4135. tooltip: false,
  4136. alignLeft: true,
  4137. boxShadow: 'none',
  4138. icon: {
  4139. remove: true,
  4140. color: '',
  4141. },
  4142. text: {
  4143. content: 'Marketplace',
  4144. color: oldSchoolColor,
  4145. },
  4146. hover: {
  4147. backgroundColor: oldSchoolHoverBackgroundColor,
  4148. color: oldSchoolHoverColor,
  4149. },
  4150. },
  4151. explore: {
  4152. add: true,
  4153. border: false,
  4154. tooltip: false,
  4155. alignLeft: true,
  4156. boxShadow: 'none',
  4157. icon: {
  4158. remove: true,
  4159. color: '',
  4160. },
  4161. text: {
  4162. content: 'Explore',
  4163. color: oldSchoolColor,
  4164. },
  4165. hover: {
  4166. backgroundColor: oldSchoolHoverBackgroundColor,
  4167. color: oldSchoolHoverColor,
  4168. },
  4169. },
  4170. notifications: {
  4171. remove: false,
  4172. border: false,
  4173. tooltip: false,
  4174. boxShadow: 'none',
  4175. hoverBackgroundColor: oldSchoolHoverBackgroundColor,
  4176. icon: {
  4177. symbol: 'bell',
  4178. color: oldSchoolColor,
  4179. hover: {
  4180. color: oldSchoolHoverColor,
  4181. },
  4182. },
  4183. text: {
  4184. content: '',
  4185. color: '',
  4186. },
  4187. dot: {
  4188. remove: false,
  4189. boxShadowColor: '#161C20',
  4190. color: '#2f81f7',
  4191. displayOverIcon: true,
  4192. },
  4193. },
  4194. avatar: {
  4195. remove: false,
  4196. size: '24px',
  4197. dropdownIcon: true,
  4198. },
  4199. globalBar: {
  4200. boxShadowColor: '#21262D',
  4201. leftAligned: {
  4202. gap: '0.75rem',
  4203. },
  4204. rightAligned: {
  4205. gap: '2px',
  4206. },
  4207. },
  4208. localBar: {
  4209. backgroundColor: '#FAFBFD',
  4210. alignCenter: true,
  4211. boxShadow: {
  4212. consistentColor: true,
  4213. },
  4214. links: {
  4215. color: '',
  4216. },
  4217. },
  4218. sidebars: {
  4219. backdrop: {
  4220. color: oldSchoolHoverBackgroundColor,
  4221. },
  4222. left: {
  4223. preload: true,
  4224. },
  4225. right: {
  4226. preload: true,
  4227. floatUnderneath: true,
  4228. width: '',
  4229. maxHeight: '60vh',
  4230. },
  4231. },
  4232. repositoryHeader: {
  4233. import: true,
  4234. alignCenter: true,
  4235. removePageTitle: true,
  4236. backgroundColor: '#FAFBFD',
  4237. avatar: {
  4238. remove: false,
  4239. customSvg: '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo mr-1 color-fg-muted"><path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path></svg>',
  4240. },
  4241. link: {
  4242. color: '#2F81F7',
  4243. hover: {
  4244. backgroundColor: 'transparent',
  4245. color: '#0969da',
  4246. textDecoration: 'underline',
  4247. },
  4248. },
  4249. },
  4250. },
  4251. dark: {
  4252. backgroundColor: '#161C20',
  4253. hamburgerButton: {
  4254. remove: true,
  4255. },
  4256. logo: {
  4257. remove: false,
  4258. color: '#e6edf3',
  4259. customSvg: '',
  4260. },
  4261. pageTitle: {
  4262. remove: true,
  4263. color: oldSchoolColor,
  4264. hover: {
  4265. backgroundColor: oldSchoolHoverBackgroundColor,
  4266. color: oldSchoolHoverColor,
  4267. },
  4268. },
  4269. search: {
  4270. remove: false,
  4271. backgroundColor: '#0E1217',
  4272. borderColor: '#30363d',
  4273. boxShadow: 'none',
  4274. alignLeft: true,
  4275. width: 'calc(var(--feed-sidebar) - 67px)',
  4276. margin: {
  4277. left: '',
  4278. right: '',
  4279. },
  4280. magnifyingGlassIcon: {
  4281. remove: true,
  4282. },
  4283. placeholder: {
  4284. text: 'Search or jump to...',
  4285. color: '#B3B3B5',
  4286. },
  4287. rightButton: 'slash key',
  4288. modal: {
  4289. width: '450px',
  4290. },
  4291. },
  4292. copilot: {
  4293. remove: true,
  4294. border: false,
  4295. tooltip: false,
  4296. alignLeft: true,
  4297. boxShadow: 'none',
  4298. icon: {
  4299. remove: false,
  4300. color: '',
  4301. },
  4302. text: {
  4303. content: 'Copilot',
  4304. color: oldSchoolColor,
  4305. },
  4306. hover: {
  4307. backgroundColor: oldSchoolHoverBackgroundColor,
  4308. color: oldSchoolHoverColor,
  4309. },
  4310. },
  4311. divider: {
  4312. remove: true,
  4313. },
  4314. flipCreateInbox: true,
  4315. create: {
  4316. remove: false,
  4317. border: false,
  4318. tooltip: false,
  4319. boxShadow: 'none',
  4320. hoverBackgroundColor: oldSchoolHoverBackgroundColor,
  4321. plusIcon: {
  4322. remove: false,
  4323. color: oldSchoolColor,
  4324. marginRight: '0px',
  4325. hover: {
  4326. color: oldSchoolHoverColor,
  4327. },
  4328. },
  4329. text: {
  4330. content: '',
  4331. color: '',
  4332. },
  4333. dropdownIcon: {
  4334. remove: false,
  4335. color: oldSchoolColor,
  4336. hover: {
  4337. color: oldSchoolHoverColor,
  4338. },
  4339. },
  4340. },
  4341. flipIssuesPullRequests: true,
  4342. issues: {
  4343. remove: false,
  4344. border: false,
  4345. tooltip: false,
  4346. alignLeft: true,
  4347. boxShadow: 'none',
  4348. icon: {
  4349. remove: true,
  4350. color: '',
  4351. },
  4352. text: {
  4353. content: 'Issues',
  4354. color: oldSchoolColor,
  4355. },
  4356. hover: {
  4357. backgroundColor: oldSchoolHoverBackgroundColor,
  4358. color: oldSchoolHoverColor,
  4359. },
  4360. },
  4361. pullRequests: {
  4362. remove: false,
  4363. border: false,
  4364. tooltip: false,
  4365. alignLeft: true,
  4366. boxShadow: 'none',
  4367. icon: {
  4368. remove: true,
  4369. color: '',
  4370. },
  4371. text: {
  4372. content: 'Pull requests',
  4373. color: oldSchoolColor,
  4374. },
  4375. hover: {
  4376. backgroundColor: oldSchoolHoverBackgroundColor,
  4377. color: oldSchoolHoverColor,
  4378. },
  4379. },
  4380. marketplace: {
  4381. add: true,
  4382. border: false,
  4383. alignLeft: true,
  4384. boxShadow: 'none',
  4385. icon: {
  4386. remove: true,
  4387. color: '',
  4388. },
  4389. text: {
  4390. content: 'Marketplace',
  4391. color: oldSchoolColor,
  4392. },
  4393. hover: {
  4394. backgroundColor: oldSchoolHoverBackgroundColor,
  4395. color: oldSchoolHoverColor,
  4396. },
  4397. },
  4398. explore: {
  4399. add: true,
  4400. border: false,
  4401. alignLeft: true,
  4402. boxShadow: 'none',
  4403. icon: {
  4404. remove: true,
  4405. color: '',
  4406. },
  4407. text: {
  4408. content: 'Explore',
  4409. color: oldSchoolColor,
  4410. },
  4411. hover: {
  4412. backgroundColor: oldSchoolHoverBackgroundColor,
  4413. color: oldSchoolHoverColor,
  4414. },
  4415. },
  4416. notifications: {
  4417. remove: false,
  4418. border: false,
  4419. tooltip: false,
  4420. boxShadow: 'none',
  4421. hoverBackgroundColor: oldSchoolHoverBackgroundColor,
  4422. icon: {
  4423. symbol: 'bell',
  4424. color: oldSchoolColor,
  4425. hover: {
  4426. color: oldSchoolHoverColor,
  4427. },
  4428. },
  4429. text: {
  4430. content: '',
  4431. color: '',
  4432. },
  4433. dot: {
  4434. remove: false,
  4435. boxShadowColor: '#161C20',
  4436. color: '#2f81f7',
  4437. displayOverIcon: true,
  4438. },
  4439. },
  4440. avatar: {
  4441. remove: false,
  4442. size: '24px',
  4443. dropdownIcon: true,
  4444. },
  4445. globalBar: {
  4446. boxShadowColor: '#21262D',
  4447. leftAligned: {
  4448. gap: '0.75rem',
  4449. },
  4450. rightAligned: {
  4451. gap: '2px',
  4452. },
  4453. },
  4454. localBar: {
  4455. backgroundColor: '#0D1117',
  4456. alignCenter: true,
  4457. boxShadow: {
  4458. consistentColor: true,
  4459. },
  4460. links: {
  4461. color: '#e6edf3',
  4462. },
  4463. },
  4464. sidebars: {
  4465. backdrop: {
  4466. color: oldSchoolHoverBackgroundColor,
  4467. },
  4468. left: {
  4469. preload: true,
  4470. },
  4471. right: {
  4472. preload: true,
  4473. floatUnderneath: true,
  4474. width: '',
  4475. maxHeight: '60vh',
  4476. },
  4477. },
  4478. repositoryHeader: {
  4479. import: true,
  4480. alignCenter: true,
  4481. removePageTitle: true,
  4482. backgroundColor: '#0D1116',
  4483. avatar: {
  4484. remove: false,
  4485. customSvg: '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo mr-1 color-fg-muted"><path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path></svg>',
  4486. },
  4487. link: {
  4488. color: '#58A6FF',
  4489. hover: {
  4490. backgroundColor: 'transparent',
  4491. color: '#2F81F7',
  4492. textDecoration: 'underline',
  4493. },
  4494. },
  4495. },
  4496. },
  4497. },
  4498. };
  4499.  
  4500. // For testing purposes
  4501. // if (!checkConfigConsistency(configs)) return;
  4502.  
  4503. let OBSERVER = new MutationObserver(observeAndModify);
  4504.  
  4505. let GMC = new GM_config({
  4506. id: 'gmc-frame',
  4507. title: `
  4508. Custom Global Navigation
  4509. <small>
  4510. <a
  4511. href="https://github.com/blakegearin/github-custom-global-navigation"
  4512. target="_blank"
  4513. >
  4514. source
  4515. </a>
  4516. </small>
  4517. `,
  4518. events: {
  4519. init: gmcInitialized,
  4520. open: gmcOpened,
  4521. save: gmcSaved,
  4522. close: gmcClosed,
  4523. },
  4524. frame: gmcBuildFrame(),
  4525. fields: {
  4526. type: {
  4527. section: [
  4528. `
  4529. Configuration Type
  4530. <small>
  4531. <a
  4532. href="https://github.com/blakegearin/github-custom-global-navigation#configurations"
  4533. target="_blank"
  4534. >
  4535. learn more
  4536. </a>
  4537. </small>
  4538. `,
  4539. ],
  4540. type: 'radio',
  4541. options: [
  4542. 'Off',
  4543. 'Happy Medium',
  4544. 'Old School',
  4545. 'Custom',
  4546. ],
  4547. default: 'Old School',
  4548. },
  4549. light_backgroundColor: {
  4550. label: 'Background color',
  4551. section: [
  4552. 'Custom Light',
  4553. ],
  4554. type: 'text',
  4555. default: '',
  4556. },
  4557. light_hamburgerButton_remove: {
  4558. label: '<h3>Hamburger button</h3><div class="gmc-label">Remove</div>',
  4559. type: 'checkbox',
  4560. default: false,
  4561. },
  4562. light_logo_remove: {
  4563. label: '<h3>Logo</h3><div class="gmc-label">Remove</div>',
  4564. type: 'checkbox',
  4565. default: false,
  4566. },
  4567. light_logo_color: {
  4568. label: 'Color',
  4569. type: 'text',
  4570. default: '',
  4571. },
  4572. light_logo_customSvg: {
  4573. label: 'Custom SVG (URL or text)',
  4574. type: 'textarea',
  4575. default: '',
  4576. },
  4577. light_pageTitle_remove: {
  4578. label: '<h3>Page title</h3><div class="gmc-label">Remove</div>',
  4579. type: 'checkbox',
  4580. default: false,
  4581. },
  4582. light_pageTitle_color: {
  4583. label: 'Color',
  4584. type: 'text',
  4585. default: '',
  4586. },
  4587. light_pageTitle_hover_backgroundColor: {
  4588. label: 'Hover background color',
  4589. type: 'text',
  4590. default: '',
  4591. },
  4592. light_pageTitle_hover_color: {
  4593. label: 'Hover color',
  4594. type: 'text',
  4595. default: '',
  4596. },
  4597. light_search_remove: {
  4598. label: '<h3>Search</h3><div class="gmc-label">Remove</div>',
  4599. type: 'checkbox',
  4600. default: false,
  4601. },
  4602. light_search_backgroundColor: {
  4603. label: 'Background color',
  4604. type: 'text',
  4605. default: '',
  4606. },
  4607. light_search_borderColor: {
  4608. label: 'Border color',
  4609. type: 'text',
  4610. default: '',
  4611. },
  4612. light_search_boxShadow: {
  4613. label: 'Box shadow',
  4614. type: 'text',
  4615. default: '',
  4616. },
  4617. light_search_alignLeft: {
  4618. label: 'Left aligned',
  4619. type: 'checkbox',
  4620. default: false,
  4621. },
  4622. light_search_width: {
  4623. label: 'Width',
  4624. type: 'text',
  4625. default: '',
  4626. },
  4627. light_search_margin_left: {
  4628. label: 'Margin left',
  4629. type: 'text',
  4630. default: '',
  4631. },
  4632. light_search_margin_right: {
  4633. label: 'Margin right',
  4634. type: 'text',
  4635. default: '',
  4636. },
  4637. light_search_magnifyingGlassIcon_remove: {
  4638. label: 'Magnifying glass icon remove',
  4639. type: 'checkbox',
  4640. default: false,
  4641. },
  4642. light_search_placeholder_text: {
  4643. label: 'Placeholder text',
  4644. type: 'text',
  4645. default: '',
  4646. },
  4647. light_search_placeholder_color: {
  4648. label: 'Placeholder color',
  4649. type: 'text',
  4650. default: '',
  4651. },
  4652. light_search_rightButton: {
  4653. label: 'Right button',
  4654. type: 'select',
  4655. options: [
  4656. 'none',
  4657. 'command palette',
  4658. 'slash key',
  4659. ],
  4660. default: 'command palette',
  4661. },
  4662. light_search_modal_width: {
  4663. label: 'Modal width',
  4664. type: 'text',
  4665. default: '',
  4666. },
  4667. light_divider_remove: {
  4668. label: '<h3>Divider</h3><div class="gmc-label">Remove</div>',
  4669. type: 'checkbox',
  4670. default: false,
  4671. },
  4672. light_flipCreateInbox: {
  4673. label: 'Flip the order of Create and Notifications',
  4674. type: 'checkbox',
  4675. default: false,
  4676. },
  4677. light_create_remove: {
  4678. label: '<h3>Create button</h3><div class="gmc-label">Remove</div>',
  4679. type: 'checkbox',
  4680. default: false,
  4681. },
  4682. light_create_border: {
  4683. label: 'Border',
  4684. type: 'checkbox',
  4685. default: true,
  4686. },
  4687. light_create_tooltip: {
  4688. label: 'Tooltip',
  4689. type: 'checkbox',
  4690. default: true,
  4691. },
  4692. light_create_boxShadow: {
  4693. label: 'Box shadow',
  4694. type: 'text',
  4695. default: '',
  4696. },
  4697. light_create_hoverBackgroundColor: {
  4698. label: 'Hover background color',
  4699. type: 'text',
  4700. default: '',
  4701. },
  4702. light_create_plusIcon_remove: {
  4703. label: 'Plus icon remove',
  4704. type: 'checkbox',
  4705. default: false,
  4706. },
  4707. light_create_plusIcon_color: {
  4708. label: 'Plus icon color',
  4709. type: 'text',
  4710. default: '',
  4711. },
  4712. light_create_plusIcon_marginRight: {
  4713. label: 'Plus icon margin right',
  4714. type: 'text',
  4715. default: '',
  4716. },
  4717. light_create_plusIcon_hover_color: {
  4718. label: 'Plus icon hover color',
  4719. type: 'text',
  4720. default: '',
  4721. },
  4722. light_create_text_content: {
  4723. label: 'Text content',
  4724. type: 'text',
  4725. default: '',
  4726. },
  4727. light_create_text_color: {
  4728. label: 'Text color',
  4729. type: 'text',
  4730. default: '',
  4731. },
  4732. light_create_dropdownIcon_remove: {
  4733. label: 'Dropdown icon remove',
  4734. type: 'checkbox',
  4735. default: false,
  4736. },
  4737. light_create_dropdownIcon_color: {
  4738. label: 'Dropdown icon color',
  4739. type: 'text',
  4740. default: '',
  4741. },
  4742. light_create_dropdownIcon_hover_color: {
  4743. label: 'Dropdown icon hover color',
  4744. type: 'text',
  4745. default: '',
  4746. },
  4747. light_flipIssuesPullRequests: {
  4748. label: 'Flip the order of Issues and Pull requests',
  4749. type: 'checkbox',
  4750. default: false,
  4751. },
  4752. light_issues_remove: {
  4753. label: '<h3>Issues button</h3><div class="gmc-label">Remove</div>',
  4754. type: 'checkbox',
  4755. default: false,
  4756. },
  4757. light_issues_border: {
  4758. label: 'Border',
  4759. type: 'checkbox',
  4760. default: true,
  4761. },
  4762. light_issues_tooltip: {
  4763. label: 'Tooltip',
  4764. type: 'checkbox',
  4765. default: true,
  4766. },
  4767. light_issues_alignLeft: {
  4768. label: 'Align left',
  4769. type: 'checkbox',
  4770. default: false,
  4771. },
  4772. light_issues_boxShadow: {
  4773. label: 'Box shadow',
  4774. type: 'text',
  4775. default: '',
  4776. },
  4777. light_issues_icon_remove: {
  4778. label: 'Icon remove',
  4779. type: 'checkbox',
  4780. default: false,
  4781. },
  4782. light_issues_icon_color: {
  4783. label: 'Icon color',
  4784. type: 'text',
  4785. default: '',
  4786. },
  4787. light_issues_text_content: {
  4788. label: 'Text content',
  4789. type: 'text',
  4790. default: '',
  4791. },
  4792. light_issues_text_color: {
  4793. label: 'Text color',
  4794. type: 'text',
  4795. default: '',
  4796. },
  4797. light_issues_hover_backgroundColor: {
  4798. label: 'Hover background color',
  4799. type: 'text',
  4800. default: '',
  4801. },
  4802. light_issues_hover_color: {
  4803. label: 'Hover color',
  4804. type: 'text',
  4805. default: '',
  4806. },
  4807. light_pullRequests_remove: {
  4808. label: '<h3>Pull requests button</h3><div class="gmc-label">Remove</div>',
  4809. type: 'checkbox',
  4810. default: false,
  4811. },
  4812. light_pullRequests_border: {
  4813. label: 'Border',
  4814. type: 'checkbox',
  4815. default: true,
  4816. },
  4817. light_pullRequests_tooltip: {
  4818. label: 'Tooltip',
  4819. type: 'checkbox',
  4820. default: true,
  4821. },
  4822. light_pullRequests_alignLeft: {
  4823. label: 'Align left',
  4824. type: 'checkbox',
  4825. default: false,
  4826. },
  4827. light_pullRequests_boxShadow: {
  4828. label: 'Box shadow',
  4829. type: 'text',
  4830. default: '',
  4831. },
  4832. light_pullRequests_icon_remove: {
  4833. label: 'Icon remove',
  4834. type: 'checkbox',
  4835. default: false,
  4836. },
  4837. light_pullRequests_icon_color: {
  4838. label: 'Icon color',
  4839. type: 'text',
  4840. default: '',
  4841. },
  4842. light_pullRequests_text_content: {
  4843. label: 'Text content',
  4844. type: 'text',
  4845. default: '',
  4846. },
  4847. light_pullRequests_text_color: {
  4848. label: 'Text color',
  4849. type: 'text',
  4850. default: '',
  4851. },
  4852. light_pullRequests_hover_backgroundColor: {
  4853. label: 'Hover background color',
  4854. type: 'text',
  4855. default: '',
  4856. },
  4857. light_pullRequests_hover_color: {
  4858. label: 'Hover color',
  4859. type: 'text',
  4860. default: '',
  4861. },
  4862. light_marketplace_add: {
  4863. label: '<h3>Marketplace</h3><div class="gmc-label">Add</div>',
  4864. type: 'checkbox',
  4865. default: false,
  4866. },
  4867. light_marketplace_border: {
  4868. label: 'Border',
  4869. type: 'checkbox',
  4870. default: true,
  4871. },
  4872. light_marketplace_alignLeft: {
  4873. label: 'Align left',
  4874. type: 'checkbox',
  4875. default: false,
  4876. },
  4877. light_marketplace_boxShadow: {
  4878. label: 'Box shadow',
  4879. type: 'text',
  4880. default: '',
  4881. },
  4882. light_marketplace_icon_remove: {
  4883. label: 'Icon remove',
  4884. type: 'checkbox',
  4885. default: false,
  4886. },
  4887. light_marketplace_icon_color: {
  4888. label: 'Icon color',
  4889. type: 'text',
  4890. default: '',
  4891. },
  4892. light_marketplace_text_content: {
  4893. label: 'Text content',
  4894. type: 'text',
  4895. default: '',
  4896. },
  4897. light_marketplace_text_color: {
  4898. label: 'Text color',
  4899. type: 'text',
  4900. default: '',
  4901. },
  4902. light_marketplace_hover_backgroundColor: {
  4903. label: 'Hover background color',
  4904. type: 'text',
  4905. default: '',
  4906. },
  4907. light_marketplace_hover_color: {
  4908. label: 'Hover color',
  4909. type: 'text',
  4910. default: '',
  4911. },
  4912. light_explore_add: {
  4913. label: '<h3>Explore</h3><div class="gmc-label">Add</div>',
  4914. type: 'checkbox',
  4915. default: false,
  4916. },
  4917. light_explore_border: {
  4918. label: 'Border',
  4919. type: 'checkbox',
  4920. default: true,
  4921. },
  4922. light_explore_alignLeft: {
  4923. label: 'Align left',
  4924. type: 'checkbox',
  4925. default: false,
  4926. },
  4927. light_explore_boxShadow: {
  4928. label: 'Box shadow',
  4929. type: 'text',
  4930. default: '',
  4931. },
  4932. light_explore_icon_remove: {
  4933. label: 'Icon remove',
  4934. type: 'checkbox',
  4935. default: false,
  4936. },
  4937. light_explore_icon_color: {
  4938. label: 'Icon color',
  4939. type: 'text',
  4940. default: '',
  4941. },
  4942. light_explore_text_content: {
  4943. label: 'Text content',
  4944. type: 'text',
  4945. default: '',
  4946. },
  4947. light_explore_text_color: {
  4948. label: 'Text color',
  4949. type: 'text',
  4950. default: '',
  4951. },
  4952. light_explore_hover_backgroundColor: {
  4953. label: 'Hover background color',
  4954. type: 'text',
  4955. default: '',
  4956. },
  4957. light_explore_hover_color: {
  4958. label: 'Hover color',
  4959. type: 'text',
  4960. default: '',
  4961. },
  4962. light_notifications_remove: {
  4963. label: '<h3>Notifications button</h3><div class="gmc-label">Remove</div>',
  4964. type: 'checkbox',
  4965. default: false,
  4966. },
  4967. light_notifications_border: {
  4968. label: 'Border',
  4969. type: 'checkbox',
  4970. default: true,
  4971. },
  4972. light_notifications_tooltip: {
  4973. label: 'Tooltip',
  4974. type: 'checkbox',
  4975. default: true,
  4976. },
  4977. light_notifications_boxShadow: {
  4978. label: 'Box shadow',
  4979. type: 'text',
  4980. default: '',
  4981. },
  4982. light_notifications_hoverBackgroundColor: {
  4983. label: 'Hover background color',
  4984. type: 'text',
  4985. default: '',
  4986. },
  4987. light_notifications_icon_symbol: {
  4988. label: 'Icon symbol',
  4989. type: 'select',
  4990. options: [
  4991. 'none',
  4992. 'inbox',
  4993. 'bell',
  4994. ],
  4995. default: 'inbox',
  4996. },
  4997. light_notifications_icon_color: {
  4998. label: 'Icon color',
  4999. type: 'text',
  5000. default: '',
  5001. },
  5002. light_notifications_icon_hover_color: {
  5003. label: 'Icon hover color',
  5004. type: 'text',
  5005. default: '',
  5006. },
  5007. light_notifications_text_content: {
  5008. label: 'Text content',
  5009. type: 'text',
  5010. default: '',
  5011. },
  5012. light_notifications_text_color: {
  5013. label: 'Text color',
  5014. type: 'text',
  5015. default: '',
  5016. },
  5017. light_notifications_dot_remove: {
  5018. label: 'Dot remove',
  5019. type: 'checkbox',
  5020. default: false,
  5021. },
  5022. light_notifications_dot_boxShadowColor: {
  5023. label: 'Dot hover color',
  5024. type: 'text',
  5025. default: '',
  5026. },
  5027. light_notifications_dot_color: {
  5028. label: 'Dot color',
  5029. type: 'text',
  5030. default: '',
  5031. },
  5032. light_notifications_dot_displayOverIcon: {
  5033. label: 'Dot display over icon',
  5034. type: 'checkbox',
  5035. default: false,
  5036. },
  5037. light_avatar_remove: {
  5038. label: '<h3>Avatar</h3><div class="gmc-label">Remove</div>',
  5039. type: 'checkbox',
  5040. default: false,
  5041. },
  5042. light_avatar_size: {
  5043. label: 'Size',
  5044. type: 'text',
  5045. default: '',
  5046. },
  5047. light_avatar_dropdownIcon: {
  5048. label: 'Dropdown icon',
  5049. type: 'checkbox',
  5050. default: false,
  5051. },
  5052. light_globalBar_boxShadowColor: {
  5053. label: '<h3>Global bar</h3><div class="gmc-label">Box shadow color</div>',
  5054. type: 'text',
  5055. default: '',
  5056. },
  5057. light_globalBar_leftAligned_gap: {
  5058. label: 'Left aligned gap',
  5059. type: 'text',
  5060. default: '',
  5061. },
  5062. light_globalBar_rightAligned_gap: {
  5063. label: 'Right aligned gap',
  5064. type: 'text',
  5065. default: '',
  5066. },
  5067. light_localBar_backgroundColor: {
  5068. label: '<h3>Local bar</h3><div class="gmc-label">Background color</div>',
  5069. type: 'text',
  5070. default: '',
  5071. },
  5072. light_localBar_alignCenter: {
  5073. label: 'Align center',
  5074. type: 'checkbox',
  5075. default: false,
  5076. },
  5077. light_localBar_boxShadow_consistentColor: {
  5078. label: 'Box shadow consistent color',
  5079. type: 'checkbox',
  5080. default: false,
  5081. },
  5082. light_localBar_links_color: {
  5083. label: 'Links color',
  5084. type: 'text',
  5085. default: '',
  5086. },
  5087. light_sidebars_backdrop_color: {
  5088. label: '<h3>Sidebars</h3><div class="gmc-label">Backdrop color</div>',
  5089. type: 'text',
  5090. default: '',
  5091. },
  5092. light_sidebars_left_preload: {
  5093. label: 'Left preload',
  5094. type: 'checkbox',
  5095. default: false,
  5096. },
  5097. light_sidebars_right_preload: {
  5098. label: 'Right preload',
  5099. type: 'checkbox',
  5100. default: false,
  5101. },
  5102. light_sidebars_right_floatUnderneath: {
  5103. label: 'Right float underneath',
  5104. type: 'checkbox',
  5105. default: false,
  5106. },
  5107. light_sidebars_right_width: {
  5108. label: 'Right width',
  5109. type: 'text',
  5110. default: '',
  5111. },
  5112. light_sidebars_right_maxHeight: {
  5113. label: 'Right max height',
  5114. type: 'text',
  5115. default: '',
  5116. },
  5117. light_repositoryHeader_import: {
  5118. label: '<h3>Repository header</h3><div class="gmc-label">Import</div>',
  5119. type: 'checkbox',
  5120. default: false,
  5121. },
  5122. light_repositoryHeader_alignCenter: {
  5123. label: 'Align center',
  5124. type: 'checkbox',
  5125. default: false,
  5126. },
  5127. light_repositoryHeader_removePageTitle: {
  5128. label: 'Remove page title',
  5129. type: 'checkbox',
  5130. default: false,
  5131. },
  5132. light_repositoryHeader_backgroundColor: {
  5133. label: 'Background color',
  5134. type: 'text',
  5135. default: '',
  5136. },
  5137. light_repositoryHeader_avatar_remove: {
  5138. label: 'Avatar remove',
  5139. type: 'checkbox',
  5140. default: false,
  5141. },
  5142. light_repositoryHeader_avatar_customSvg: {
  5143. label: 'Custom SVG (URL or text)',
  5144. type: 'textarea',
  5145. default: '',
  5146. },
  5147. light_repositoryHeader_link_color: {
  5148. label: 'Link color',
  5149. type: 'text',
  5150. default: '',
  5151. },
  5152. light_repositoryHeader_link_hover_backgroundColor: {
  5153. label: 'Link hover background color',
  5154. type: 'text',
  5155. default: '',
  5156. },
  5157. light_repositoryHeader_link_hover_color: {
  5158. label: 'Link hover color',
  5159. type: 'text',
  5160. default: '',
  5161. },
  5162. light_repositoryHeader_link_hover_textDecoration: {
  5163. label: 'Link hover text decoration',
  5164. type: 'text',
  5165. default: '',
  5166. },
  5167. dark_backgroundColor: {
  5168. label: 'Background color',
  5169. section: [
  5170. 'Custom Dark',
  5171. ],
  5172. type: 'text',
  5173. default: '',
  5174. },
  5175. dark_hamburgerButton_remove: {
  5176. label: '<h3>Hamburger button</h3><div class="gmc-label">Remove</div>',
  5177. type: 'checkbox',
  5178. default: false,
  5179. },
  5180. dark_logo_remove: {
  5181. label: '<h3>Logo</h3><div class="gmc-label">Remove</div>',
  5182. type: 'checkbox',
  5183. default: false,
  5184. },
  5185. dark_logo_color: {
  5186. label: 'Color',
  5187. type: 'text',
  5188. default: '',
  5189. },
  5190. dark_logo_customSvg: {
  5191. label: 'Custom SVG (URL or text)',
  5192. type: 'textarea',
  5193. default: '',
  5194. },
  5195. dark_pageTitle_remove: {
  5196. label: '<h3>Page title</h3><div class="gmc-label">Remove</div>',
  5197. type: 'checkbox',
  5198. default: false,
  5199. },
  5200. dark_pageTitle_color: {
  5201. label: 'Color',
  5202. type: 'text',
  5203. default: '',
  5204. },
  5205. dark_pageTitle_hover_backgroundColor: {
  5206. label: 'Hover background color',
  5207. type: 'text',
  5208. default: '',
  5209. },
  5210. dark_pageTitle_hover_color: {
  5211. label: 'Hover color',
  5212. type: 'text',
  5213. default: '',
  5214. },
  5215. dark_search_remove: {
  5216. label: '<h3>Search</h3><div class="gmc-label">Remove</div>',
  5217. type: 'checkbox',
  5218. default: false,
  5219. },
  5220. dark_search_backgroundColor: {
  5221. label: 'Background color',
  5222. type: 'text',
  5223. default: '',
  5224. },
  5225. dark_search_borderColor: {
  5226. label: 'Border color',
  5227. type: 'text',
  5228. default: '',
  5229. },
  5230. dark_search_boxShadow: {
  5231. label: 'Box shadow',
  5232. type: 'text',
  5233. default: '',
  5234. },
  5235. dark_search_alignLeft: {
  5236. label: 'Left aligned',
  5237. type: 'checkbox',
  5238. default: false,
  5239. },
  5240. dark_search_width: {
  5241. label: 'Width',
  5242. type: 'text',
  5243. default: '',
  5244. },
  5245. dark_search_margin_left: {
  5246. label: 'Margin left',
  5247. type: 'text',
  5248. default: '',
  5249. },
  5250. dark_search_margin_right: {
  5251. label: 'Margin right',
  5252. type: 'text',
  5253. default: '',
  5254. },
  5255. dark_search_magnifyingGlassIcon_remove: {
  5256. label: 'Magnifying glass icon remove',
  5257. type: 'checkbox',
  5258. default: false,
  5259. },
  5260. dark_search_placeholder_text: {
  5261. label: 'Placeholder text',
  5262. type: 'text',
  5263. default: '',
  5264. },
  5265. dark_search_placeholder_color: {
  5266. label: 'Placeholder color',
  5267. type: 'text',
  5268. default: '',
  5269. },
  5270. dark_search_rightButton: {
  5271. label: 'Right button',
  5272. type: 'select',
  5273. options: [
  5274. 'none',
  5275. 'command palette',
  5276. 'slash key',
  5277. ],
  5278. default: 'command palette',
  5279. },
  5280. dark_search_modal_width: {
  5281. label: 'Modal width',
  5282. type: 'text',
  5283. default: '',
  5284. },
  5285. dark_divider_remove: {
  5286. label: '<h3>Divider</h3><div class="gmc-label">Remove</div>',
  5287. type: 'checkbox',
  5288. default: false,
  5289. },
  5290. dark_flipCreateInbox: {
  5291. label: 'Flip the order of Create and Notifications',
  5292. type: 'checkbox',
  5293. default: false,
  5294. },
  5295. dark_create_remove: {
  5296. label: '<h3>Create button</h3><div class="gmc-label">Remove</div>',
  5297. type: 'checkbox',
  5298. default: false,
  5299. },
  5300. dark_create_border: {
  5301. label: 'Border',
  5302. type: 'checkbox',
  5303. default: true,
  5304. },
  5305. dark_create_tooltip: {
  5306. label: 'Tooltip',
  5307. type: 'checkbox',
  5308. default: true,
  5309. },
  5310. dark_create_boxShadow: {
  5311. label: 'Box shadow',
  5312. type: 'text',
  5313. default: '',
  5314. },
  5315. dark_create_hoverBackgroundColor: {
  5316. label: 'Hover background color',
  5317. type: 'text',
  5318. default: '',
  5319. },
  5320. dark_create_plusIcon_remove: {
  5321. label: 'Plus icon remove',
  5322. type: 'checkbox',
  5323. default: false,
  5324. },
  5325. dark_create_plusIcon_color: {
  5326. label: 'Plus icon color',
  5327. type: 'text',
  5328. default: '',
  5329. },
  5330. dark_create_plusIcon_marginRight: {
  5331. label: 'Plus icon margin right',
  5332. type: 'text',
  5333. default: '',
  5334. },
  5335. dark_create_plusIcon_hover_color: {
  5336. label: 'Plus icon hover color',
  5337. type: 'text',
  5338. default: '',
  5339. },
  5340. dark_create_text_content: {
  5341. label: 'Text content',
  5342. type: 'text',
  5343. default: '',
  5344. },
  5345. dark_create_text_color: {
  5346. label: 'Text color',
  5347. type: 'text',
  5348. default: '',
  5349. },
  5350. dark_create_dropdownIcon_remove: {
  5351. label: 'Dropdown icon remove',
  5352. type: 'checkbox',
  5353. default: false,
  5354. },
  5355. dark_create_dropdownIcon_color: {
  5356. label: 'Dropdown icon color',
  5357. type: 'text',
  5358. default: '',
  5359. },
  5360. dark_create_dropdownIcon_hover_color: {
  5361. label: 'Dropdown icon hover color',
  5362. type: 'text',
  5363. default: '',
  5364. },
  5365. dark_flipIssuesPullRequests: {
  5366. label: 'Flip the order of Issues and Pull requests',
  5367. type: 'checkbox',
  5368. default: false,
  5369. },
  5370. dark_issues_remove: {
  5371. label: '<h3>Issues button</h3><div class="gmc-label">Remove</div>',
  5372. type: 'checkbox',
  5373. default: false,
  5374. },
  5375. dark_issues_border: {
  5376. label: 'Border',
  5377. type: 'checkbox',
  5378. default: true,
  5379. },
  5380. dark_issues_tooltip: {
  5381. label: 'Tooltip',
  5382. type: 'checkbox',
  5383. default: true,
  5384. },
  5385. dark_issues_boxShadow: {
  5386. label: 'Box shadow',
  5387. type: 'text',
  5388. default: '',
  5389. },
  5390. dark_issues_alignLeft: {
  5391. label: 'Align left',
  5392. type: 'checkbox',
  5393. default: false,
  5394. },
  5395. dark_issues_icon_remove: {
  5396. label: 'Icon remove',
  5397. type: 'checkbox',
  5398. default: false,
  5399. },
  5400. dark_issues_icon_color: {
  5401. label: 'Icon color',
  5402. type: 'text',
  5403. default: '',
  5404. },
  5405. dark_issues_text_content: {
  5406. label: 'Text content',
  5407. type: 'text',
  5408. default: '',
  5409. },
  5410. dark_issues_text_color: {
  5411. label: 'Text color',
  5412. type: 'text',
  5413. default: '',
  5414. },
  5415. dark_issues_hover_backgroundColor: {
  5416. label: 'Hover background color',
  5417. type: 'text',
  5418. default: '',
  5419. },
  5420. dark_issues_hover_color: {
  5421. label: 'Hover color',
  5422. type: 'text',
  5423. default: '',
  5424. },
  5425. dark_pullRequests_remove: {
  5426. label: '<h3>Pull requests button</h3><div class="gmc-label">Remove</div>',
  5427. type: 'checkbox',
  5428. default: false,
  5429. },
  5430. dark_pullRequests_border: {
  5431. label: 'Border',
  5432. type: 'checkbox',
  5433. default: true,
  5434. },
  5435. dark_pullRequests_tooltip: {
  5436. label: 'Tooltip',
  5437. type: 'checkbox',
  5438. default: true,
  5439. },
  5440. dark_pullRequests_alignLeft: {
  5441. label: 'Align left',
  5442. type: 'checkbox',
  5443. default: false,
  5444. },
  5445. dark_pullRequests_boxShadow: {
  5446. label: 'Box shadow',
  5447. type: 'text',
  5448. default: '',
  5449. },
  5450. dark_pullRequests_icon_remove: {
  5451. label: 'Icon remove',
  5452. type: 'checkbox',
  5453. default: false,
  5454. },
  5455. dark_pullRequests_icon_color: {
  5456. label: 'Icon color',
  5457. type: 'text',
  5458. default: '',
  5459. },
  5460. dark_pullRequests_text_content: {
  5461. label: 'Text content',
  5462. type: 'text',
  5463. default: '',
  5464. },
  5465. dark_pullRequests_text_color: {
  5466. label: 'Text color',
  5467. type: 'text',
  5468. default: '',
  5469. },
  5470. dark_pullRequests_hover_backgroundColor: {
  5471. label: 'Hover background color',
  5472. type: 'text',
  5473. default: '',
  5474. },
  5475. dark_pullRequests_hover_color: {
  5476. label: 'Hover color',
  5477. type: 'text',
  5478. default: '',
  5479. },
  5480. dark_marketplace_add: {
  5481. label: '<h3>Marketplace</h3><div class="gmc-label">Add</div>',
  5482. type: 'checkbox',
  5483. default: false,
  5484. },
  5485. dark_marketplace_border: {
  5486. label: 'Border',
  5487. type: 'checkbox',
  5488. default: true,
  5489. },
  5490. dark_marketplace_alignLeft: {
  5491. label: 'Align left',
  5492. type: 'checkbox',
  5493. default: false,
  5494. },
  5495. dark_marketplace_boxShadow: {
  5496. label: 'Box shadow',
  5497. type: 'text',
  5498. default: '',
  5499. },
  5500. dark_marketplace_icon_remove: {
  5501. label: 'Icon remove',
  5502. type: 'checkbox',
  5503. default: false,
  5504. },
  5505. dark_marketplace_icon_color: {
  5506. label: 'Icon color',
  5507. type: 'text',
  5508. default: '',
  5509. },
  5510. dark_marketplace_text_content: {
  5511. label: 'Text content',
  5512. type: 'text',
  5513. default: '',
  5514. },
  5515. dark_marketplace_text_color: {
  5516. label: 'Text color',
  5517. type: 'text',
  5518. default: '',
  5519. },
  5520. dark_marketplace_hover_backgroundColor: {
  5521. label: 'Hover background color',
  5522. type: 'text',
  5523. default: '',
  5524. },
  5525. dark_marketplace_hover_color: {
  5526. label: 'Hover color',
  5527. type: 'text',
  5528. default: '',
  5529. },
  5530. dark_explore_add: {
  5531. label: '<h3>Explore</h3><div class="gmc-label">Add</div>',
  5532. type: 'checkbox',
  5533. default: false,
  5534. },
  5535. dark_explore_border: {
  5536. label: 'Border',
  5537. type: 'checkbox',
  5538. default: true,
  5539. },
  5540. dark_explore_alignLeft: {
  5541. label: 'Align left',
  5542. type: 'checkbox',
  5543. default: false,
  5544. },
  5545. dark_explore_boxShadow: {
  5546. label: 'Box shadow',
  5547. type: 'text',
  5548. default: '',
  5549. },
  5550. dark_explore_icon_remove: {
  5551. label: 'Icon remove',
  5552. type: 'checkbox',
  5553. default: false,
  5554. },
  5555. dark_explore_icon_color: {
  5556. label: 'Icon color',
  5557. type: 'text',
  5558. default: '',
  5559. },
  5560. dark_explore_text_content: {
  5561. label: 'Text content',
  5562. type: 'text',
  5563. default: '',
  5564. },
  5565. dark_explore_text_color: {
  5566. label: 'Text color',
  5567. type: 'text',
  5568. default: '',
  5569. },
  5570. dark_explore_hover_backgroundColor: {
  5571. label: 'Hover background color',
  5572. type: 'text',
  5573. default: '',
  5574. },
  5575. dark_explore_hover_color: {
  5576. label: 'Hover color',
  5577. type: 'text',
  5578. default: '',
  5579. },
  5580. dark_notifications_remove: {
  5581. label: '<h3>Notifications button</h3><div class="gmc-label">Remove</div>',
  5582. type: 'checkbox',
  5583. default: false,
  5584. },
  5585. dark_notifications_border: {
  5586. label: 'Border',
  5587. type: 'checkbox',
  5588. default: true,
  5589. },
  5590. dark_notifications_tooltip: {
  5591. label: 'Tooltip',
  5592. type: 'checkbox',
  5593. default: true,
  5594. },
  5595. dark_notifications_boxShadow: {
  5596. label: 'Box shadow',
  5597. type: 'text',
  5598. default: '',
  5599. },
  5600. dark_notifications_hoverBackgroundColor: {
  5601. label: 'Hover background color',
  5602. type: 'text',
  5603. default: '',
  5604. },
  5605. dark_notifications_icon_symbol: {
  5606. label: 'Icon symbol',
  5607. type: 'select',
  5608. options: [
  5609. 'none',
  5610. 'inbox',
  5611. 'bell',
  5612. ],
  5613. default: 'inbox',
  5614. },
  5615. dark_notifications_icon_color: {
  5616. label: 'Icon color',
  5617. type: 'text',
  5618. default: '',
  5619. },
  5620. dark_notifications_icon_hover_color: {
  5621. label: 'Icon hover color',
  5622. type: 'text',
  5623. default: '',
  5624. },
  5625. dark_notifications_text_content: {
  5626. label: 'Text content',
  5627. type: 'text',
  5628. default: '',
  5629. },
  5630. dark_notifications_text_color: {
  5631. label: 'Text color',
  5632. type: 'text',
  5633. default: '',
  5634. },
  5635. dark_notifications_dot_remove: {
  5636. label: 'Dot remove',
  5637. type: 'checkbox',
  5638. default: false,
  5639. },
  5640. dark_notifications_dot_boxShadowColor: {
  5641. label: 'Dot hover color',
  5642. type: 'text',
  5643. default: '',
  5644. },
  5645. dark_notifications_dot_color: {
  5646. label: 'Dot color',
  5647. type: 'text',
  5648. default: '',
  5649. },
  5650. dark_notifications_dot_displayOverIcon: {
  5651. label: 'Dot display over icon',
  5652. type: 'checkbox',
  5653. default: false,
  5654. },
  5655. dark_avatar_remove: {
  5656. label: '<h3>Avatar</h3><div class="gmc-label">Remove</div>',
  5657. type: 'checkbox',
  5658. default: false,
  5659. },
  5660. dark_avatar_size: {
  5661. label: 'Size',
  5662. type: 'text',
  5663. default: '',
  5664. },
  5665. dark_avatar_dropdownIcon: {
  5666. label: 'Dropdown icon',
  5667. type: 'checkbox',
  5668. default: false,
  5669. },
  5670. dark_globalBar_boxShadowColor: {
  5671. label: '<h3>Global bar</h3><div class="gmc-label">Box shadow color</div>',
  5672. type: 'text',
  5673. default: '',
  5674. },
  5675. dark_globalBar_leftAligned_gap: {
  5676. label: 'Left aligned gap',
  5677. type: 'text',
  5678. default: '',
  5679. },
  5680. dark_globalBar_rightAligned_gap: {
  5681. label: 'Right aligned gap',
  5682. type: 'text',
  5683. default: '',
  5684. },
  5685. dark_localBar_backgroundColor: {
  5686. label: '<h3>Local bar</h3><div class="gmc-label">Background color</div>',
  5687. type: 'text',
  5688. default: '',
  5689. },
  5690. dark_localBar_alignCenter: {
  5691. label: 'Align center',
  5692. type: 'checkbox',
  5693. default: false,
  5694. },
  5695. dark_localBar_boxShadow_consistentColor: {
  5696. label: 'Box shadow consistent color',
  5697. type: 'checkbox',
  5698. default: false,
  5699. },
  5700. dark_localBar_links_color: {
  5701. label: 'Links color',
  5702. type: 'text',
  5703. default: '',
  5704. },
  5705. dark_sidebars_backdrop_color: {
  5706. label: '<h3>Sidebars</h3><div class="gmc-label">Backdrop color</div>',
  5707. type: 'text',
  5708. default: '',
  5709. },
  5710. dark_sidebars_left_preload: {
  5711. label: 'Left preload',
  5712. type: 'checkbox',
  5713. default: false,
  5714. },
  5715. dark_sidebars_right_preload: {
  5716. label: 'Right preload',
  5717. type: 'checkbox',
  5718. default: false,
  5719. },
  5720. dark_sidebars_right_floatUnderneath: {
  5721. label: 'Right float underneath',
  5722. type: 'checkbox',
  5723. default: false,
  5724. },
  5725. dark_sidebars_right_width: {
  5726. label: 'Right width',
  5727. type: 'text',
  5728. default: '',
  5729. },
  5730. dark_sidebars_right_maxHeight: {
  5731. label: 'Right max height',
  5732. type: 'text',
  5733. default: '',
  5734. },
  5735. dark_repositoryHeader_import: {
  5736. label: '<h3>Repository header</h3><div class="gmc-label">Import</div>',
  5737. type: 'checkbox',
  5738. default: false,
  5739. },
  5740. dark_repositoryHeader_alignCenter: {
  5741. label: 'Align enter',
  5742. type: 'checkbox',
  5743. default: false,
  5744. },
  5745. dark_repositoryHeader_removePageTitle: {
  5746. label: 'Remove page title',
  5747. type: 'checkbox',
  5748. default: false,
  5749. },
  5750. dark_repositoryHeader_backgroundColor: {
  5751. label: 'Background color',
  5752. type: 'text',
  5753. default: '',
  5754. },
  5755. dark_repositoryHeader_avatar_remove: {
  5756. label: 'Avatar remove',
  5757. type: 'checkbox',
  5758. default: false,
  5759. },
  5760. dark_repositoryHeader_avatar_customSvg: {
  5761. label: 'Custom SVG (URL or text)',
  5762. type: 'textarea',
  5763. default: '',
  5764. },
  5765. dark_repositoryHeader_link_color: {
  5766. label: 'Link color',
  5767. type: 'text',
  5768. default: '',
  5769. },
  5770. dark_repositoryHeader_link_hover_backgroundColor: {
  5771. label: 'Link hover background color',
  5772. type: 'text',
  5773. default: '',
  5774. },
  5775. dark_repositoryHeader_link_hover_color: {
  5776. label: 'Link hover color',
  5777. type: 'text',
  5778. default: '',
  5779. },
  5780. dark_repositoryHeader_link_hover_textDecoration: {
  5781. label: 'Link hover text decoration',
  5782. type: 'text',
  5783. default: '',
  5784. },
  5785. on_save: {
  5786. label: 'On save',
  5787. section: ['Settings'],
  5788. type: 'select',
  5789. options: [
  5790. 'do nothing',
  5791. 'refresh tab',
  5792. 'refresh tab and close',
  5793. 'run script',
  5794. 'run script and close',
  5795. ],
  5796. default: 'do nothing',
  5797. },
  5798. on_close: {
  5799. label: 'On close',
  5800. type: 'select',
  5801. options: [
  5802. 'do nothing',
  5803. 'refresh tab',
  5804. 'run script',
  5805. ],
  5806. default: 'do nothing',
  5807. },
  5808. menu_item_title: {
  5809. label: 'Menu item title',
  5810. type: 'text',
  5811. default: 'Custom global navigation',
  5812. },
  5813. menu_item_icon: {
  5814. label: 'Menu item icon',
  5815. type: 'select',
  5816. options: [
  5817. 'logo',
  5818. 'compass',
  5819. 'cog',
  5820. ],
  5821. default: 'logo',
  5822. },
  5823. log_level: {
  5824. label: 'Log level',
  5825. type: 'select',
  5826. options: [
  5827. 'silent',
  5828. 'quiet',
  5829. 'debug',
  5830. 'verbose',
  5831. 'trace',
  5832. ],
  5833. default: 'quiet',
  5834. },
  5835. clear_custom_config: {
  5836. label: 'Clear Custom',
  5837. section: ['Danger Zone'],
  5838. type: 'button',
  5839. click: gmcClearCustom,
  5840. },
  5841. apply_happyMedium_config: {
  5842. label: 'Overwrite Custom with Happy Medium',
  5843. type: 'button',
  5844. click: gmcApplyCustomHappyMediumConfig,
  5845. },
  5846. apply_oldSchool_config: {
  5847. label: 'Overwrite Custom with Old School',
  5848. type: 'button',
  5849. click: gmcApplyCustomOldSchoolConfig,
  5850. },
  5851. },
  5852. });
  5853. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址