GitHub Custom Global Navigation

Customize GitHub's new global navigation

目前為 2023-11-04 提交的版本,檢視 最新版本

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