GitHub Custom Global Navigation

Customize GitHub's new global navigation

当前为 2024-12-04 提交的版本,查看 最新版本

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