GitHub Custom Global Navigation

Customize GitHub's new global navigation

当前为 2025-04-24 提交的版本,查看 最新版本

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