GitHub Custom Global Navigation

Customize GitHub's new global navigation

当前为 2024-07-23 提交的版本,查看 最新版本

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