GitHub Custom Global Navigation

Customize GitHub's new global navigation

当前为 2025-03-07 提交的版本,查看 最新版本

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