Commit c24314d9 authored by Fabiano Brito's avatar Fabiano Brito Committed by Ian Schmitz
Browse files

Dark scheme overlay (#7052)

parent a51729cb
main 3.x amyrlam-patch-1 dependabot/npm_and_yarn/follow-redirects-1.14.8 dependabot/npm_and_yarn/nanoid-3.3.1 dependabot/npm_and_yarn/prismjs-1.27.0 feat/audits github-actions-ci github/fork/AMS777/patch-3 github/fork/Aghassi/patch-1 github/fork/AkiJoey/master github/fork/AlexWebLab/patch-1 github/fork/Amila-Rukshan/patch-1 github/fork/AmyShackles/patch-1 github/fork/Andarist/fix/manifest-handle-all-entrypoints github/fork/Andarist/improve-code-comments github/fork/Andarist/remove-babel-core-from-preset-deps github/fork/AriPerkkio/pr/fix-slow-app-creation github/fork/AryaAnish121/patch-1 github/fork/AshmeetSingh987/master github/fork/Ayushparikh-code/patch-1 github/fork/BenBonno/main github/fork/Bluefitdev/master github/fork/Bnaya/webpack-ignore-irrelevant-warnings github/fork/BogdanDor/remove-webpackHotDevClient github/fork/BrainEno/yakai911 github/fork/CarlRibbegaardh/feature/filename github/fork/CarlRibbegaardh/feature/tsconfig-config github/fork/CharlesStover/001 github/fork/ChithurajMsys/patch-1 github/fork/CommanderRoot/refactor/rm-deprecated-substr github/fork/DanielBailey-web/patch-1 github/fork/DavidKessel/website-update github/fork/DemonHa/add-fullySpecified-cofiguration github/fork/Ekwuno/add-cloudflare-pages-to-deploy github/fork/Emanisay/emanisay27-patch-2 github/fork/ErfanMirzapour/master github/fork/FeatherBlack/master github/fork/Ferri0/patch-1 github/fork/FezVrasta/feat/profile-env-variable github/fork/FezVrasta/patch-5 github/fork/FezVrasta/patch-6 github/fork/FezVrasta/wp5-worker-url-plugin github/fork/FloydJohn/fix-browser-env github/fork/FontEndArt/main github/fork/Garciaa94/patch-1 github/fork/GiaKhai/patch-1 github/fork/HAMED-NIYAZI/patch-1 github/fork/Haosik/patch-1 github/fork/HewlettPackard/main github/fork/HollyPony/main github/fork/HugoGEORGET/fix-proxy-middleware-documentation github/fork/HumbertoL/fix/remove-extra-period github/fork/JLHwung/fix-failing-master github/fork/Jarryxin/main github/fork/Jarryxin/wp5 github/fork/JensColman/patch-1 github/fork/Jhinpan/patch-1 github/fork/Jiacheng787/main github/fork/KennethSundqvist/mocking-node-modules github/fork/Kingwl/InlineChunkHtmlPlugin_defer github/fork/KurtGokhan/lint-command github/fork/Lesliemicheal111/patch-1 github/fork/LinusU/disable-tsc-plugin github/fork/M-Usman-Tahir/patch-1 github/fork/M779-star/patch-1 github/fork/Manc/patch github/fork/ManishINN/main github/fork/MarcusMorba/patch-3 github/fork/MartijnHols/fix/12044-dont-install-tailwindcss github/fork/Methuselah96/add-missing-peer-dependencies github/fork/MichaelDeBoey/patch-1 github/fork/MichaelDeBoey/patch-2 github/fork/MozhganShafiee/main github/fork/Mrman/core-js-config-change github/fork/Nareshdhori/circleci-project-setup github/fork/NeoLegends/fix/create-element github/fork/NightWalker9/patch-2 github/fork/NoamGaash/patch-1 github/fork/PeteSchuster/patch-1 github/fork/Ph0enixKM/patch-1 github/fork/PranavSenthilnathan/setupProxyTs github/fork/Rahim-Chan/fix/filename github/fork/RakeshPotnuru/patch-1 github/fork/RomainTHD/main github/fork/Seokkitdo/patch-1 github/fork/SiegfriedEhret/patch-1 github/fork/Skyscanner/leop-317-sassfunction github/fork/SyedMuhammedBilal/patch-2 github/fork/SyedMuhammedBilal/patch-4 github/fork/TheAli711/main github/fork/TitusEfferian/titusefferian/docs/pre-render github/fork/TrySound/upgrade-svgr-6 github/fork/VNDRMKT/main github/fork/VoloshchenkoAl/babel-plugin-formatjs github/fork/WesCossick/fix-missing-build-error-paths github/fork/YehudaKremer/patch-1 github/fork/YuanXingH/fix/webpack-tsc-compile-on-error github/fork/ace4port/patch-1 github/fork/acusti/template-comment-typo-fix github/fork/adebiyi-al/docs/deployment github/fork/admindivyansh/patch-2 github/fork/adrielcodeco/main github/fork/aixfox/master github/fork/ajbogh/main github/fork/akolade011/dev github/fork/akuji1993/master github/fork/alexandr-g/deps/husky-v5 github/fork/alexkev/running-tests-recommended-wording github/fork/alexxyzeng/main github/fork/allanzi/patch-1 github/fork/amatissart/fix-webpack-config-glob github/fork/amcgee/feat-auto-publicpath github/fork/amehdaly/master github/fork/andrearota/master github/fork/andrzej-erli/patch-1 github/fork/ankitmadhwani24/main github/fork/annie-kat/patch-1 github/fork/antzshrek/master github/fork/anuragarwalkar/patch-1 github/fork/atefBB/patch-1 github/fork/await-ovo/fix-docs-add-typescript github/fork/await-ovo/fix-missing-postcss-plugins github/fork/aymans/patch-1 github/fork/ayush987goyal/pr/chunk-minsize github/fork/barionleg/amyrlam-patch-1 github/fork/barionleg/unpin-babel-loader github/fork/bbrk24/main github/fork/bdenhollander/patch-1 github/fork/behnammodi/total-size github/fork/benjaminr-ps/add-wds-socket-protocol github/fork/benjaminr-ps/patch-1 github/fork/bhardwajhimanshu219/svgr-webpack-version-upgrade github/fork/binary-person/patch-1 github/fork/bkrausz/patch-1 github/fork/bluenote10/bugfix/attempt_to_fix_custom_loader_race_condition github/fork/bmuenzenmeyer/master github/fork/bradjones1/patch-1 github/fork/bradoyler/patch-1 github/fork/breyed/patch-1 github/fork/buuug7/patch-1 github/fork/c-w/remove-style-loader github/fork/camjackson/master github/fork/candrews/dropconsole github/fork/carlosparreno/v5-fix-splitchunks-issue-prod-build github/fork/caub/patch-1 github/fork/ceithir/editorconfig github/fork/chadwithuhc/patch-1 github/fork/challet/patch-launchEditor github/fork/cheesestringer/fix-package-lock-json github/fork/cheesestringer/update-measuring-performance github/fork/christopher-francisco/dart-sass github/fork/chybisov/patch-1 github/fork/cindyledev/issue-7886 github/fork/codybentson2/patch-1 github/fork/cprecioso/no-svgr-url-import github/fork/cszo/homepage-fix github/fork/cybermerlin/hotfix/jest_upgrade github/fork/daceynolan/typescript-ambiet-modules-docs github/fork/dan-valentine/Allow-Proxy-to-be-set-by-environment-variables github/fork/danconnell/react-error-overlay-nonce github/fork/danvc/all_add_multiple_entry_points_1084 github/fork/darthmaim/patch-1 github/fork/daschaa/main github/fork/daylesalmon/patch-1 github/fork/dblazheski96/entry-path-variable github/fork/ddzz/gha-update github/fork/dedo1911/main github/fork/demurgos/fix/12625-ts-node16 github/fork/demurgos/fix/7147-ts-composite github/fork/derbyshire10/main github/fork/dilanx/patch-1 github/fork/donnygitsome/main github/fork/draculapile/fix/babel-parser-error github/fork/dtran320/patch-1 github/fork/dylan8902/patch-1 github/fork/easyandme/patch-1 github/fork/eckdanny/docs/add-skip-preflight-check-docs github/fork/elrumordelaluz/patch-1 github/fork/elrumordelaluz/patch-2 github/fork/entropitor/fix-no-emit github/fork/etalab/cra-envs github/fork/eventualbuddha/add-@babel/plugin-proposal-private-property-in-object-dependency github/fork/fanny/master github/fork/fivecar/cache_clear_docs github/fork/fkirc/fix_slow_recompile_times github/fork/forana/clear-console github/fork/fupengl/master github/fork/gabrieldejesus/patch-1 github/fork/gdethier/main github/fork/geewoo94/config/tailwind github/fork/gergelypap/fix/remove-noopener github/fork/getzelus/patch-1 github/fork/giovannibenussi/loading-indicator github/fork/giovannibenussi/master github/fork/gminova/fix/remove-redundant-imports github/fork/happymonday/master github/fork/hasanayan/module-federation github/fork/herbievine/patch-1 github/fork/hermansje/feat/jsxImportSource github/fork/heygrady/preset-env-modern github/fork/hoangle4/patch-1 github/fork/huyenltnguyen/patch-1 github/fork/iamayushdas/codeblocks github/fork/iamstarkov/patch-1 github/fork/iansu/drop-node-14 github/fork/iansu/node-17-ci github/fork/improper/bugfix/version-check-breaks-file-path-usage github/fork/ivanmcgregor/patch-1 github/fork/izzygld/patch-1 github/fork/jaime-ez/patch-1 github/fork/jakejakeho/patch-1 github/fork/jamescostian/improve-setup-proxy-extension-support github/fork/jamescostian/improve_ts_extension_support github/fork/jameswithers89/patch-1 github/fork/jamidwyer/fix/error-overlay-iframe-axe github/fork/jamirvin/main github/fork/jayeshmann/patch-1 github/fork/jean-smaug/bump-jest-in-react-scripts github/fork/jmgregory/stable-env-var-order github/fork/joeldenning/cjs-support github/fork/joelparkerhenderson/main github/fork/joey-laminar/patch-1 github/fork/johnnyreilly/patch-1 github/fork/jomarquez21/avoid-casting-on-root-element github/fork/jonatanklosko/jk-stdin-close-exit github/fork/joostlubach/joostlubach-open-browser github/fork/judycodes/patch-1 github/fork/jwalton9/main github/fork/karlhorky/patch-1 github/fork/karlhorky/patch-2 github/fork/kavinkuma6/patch-1 github/fork/kayuapi/patch-1 github/fork/khalidwaleed0/patch-1 github/fork/kiancross/sass-loader-peer-dep github/fork/kidroca/patch-1 github/fork/kingsmendv/patch-for-pnp github/fork/kitsunekyo/feat/allow-postcss-config-override github/fork/kixxer01/patch-1 github/fork/knopp10000/patch-1 github/fork/kopyl/patch-1 github/fork/krotovic/master github/fork/krreet/swap-babel-out-with-swc-in-start-build-and-test-2 github/fork/larixer/main github/fork/laxsuryavanshi/main github/fork/ldeninski/bugfix/add-missing-cjs-extension-to-webpack-config github/fork/levrik/editor-detection-wsl github/fork/lfshr/issue-8596/fix-win32-resolve-url-loader github/fork/limal/patch-1 github/fork/llshicc/master github/fork/louy2/patch-1 github/fork/luanorlandi/docs/react-scripts-dependency github/fork/lucabattistini/feat/webpack-svgr-loader github/fork/lucasff/patch-1 github/fork/ludofischer/reduce-noise github/fork/luffy84217/fix-webpack-dev-server-deprecated-option github/fork/luwuer/logo-cannot-be-selected github/fork/luxp/master github/fork/maksimdegtyarev/remove-react-import github/fork/manavm1990/main github/fork/maoqxxmm/fix/typo github/fork/marcofugaro/cache-directory-jest github/fork/marvelsrp/hotfix-lint-treads github/fork/mcfedr/cjs-support github/fork/mdevils/update-html-entities-with-flow-types github/fork/merceyz/merceyz/fix/missing-dependencies github/fork/milesibastos/patch-1 github/fork/mkarajohn/fix-absolute-paths-in-jest-config-modulePaths github/fork/mmazzarolo/patch-1 github/fork/modernizer-bot/explicit-path-5 github/fork/mohd-akram/add-eslint-context-rule github/fork/morellodev/patch-1 github/fork/mrduguo/main github/fork/msaaddev/primary-branch-main github/fork/mwangel/master github/fork/nategiraudeau/patch-1 github/fork/nattwasm/main github/fork/nfriend/nfriend-add-_redirects-file github/fork/nicgirault/patch-1 github/fork/nickmccurdy/add-prettier-config-to-app github/fork/nickmccurdy/feature/remove-remaining-react-imports github/fork/nickmccurdy/move-e2e-tests-to-github-actions github/fork/nickmccurdy/patch-1 github/fork/nickmccurdy/patch-2 github/fork/nickmccurdy/replace-npx github/fork/nickmccurdy/revert-web-vitals github/fork/nico-martin/manifets-json-to-serviceworker github/fork/nnmax/fix/throwAnUnknowError github/fork/nvh95/file-transform github/fork/omar-bakhsh/patch-1 github/fork/oparaskos/patch-1 github/fork/p-avital/patch-2 github/fork/p12tic/fix-dev-server-proxy-broken-origin-header github/fork/pan-alexey/main github/fork/paramt/patch-2 github/fork/pdsouza/patch-1 github/fork/pedr0ni/main github/fork/pedro-demeu/patch-1 github/fork/pedromello/patch-1 github/fork/penx/patch-3 github/fork/ph-fritsche/update-template github/fork/phated/phated/postcss-loader-upgrade github/fork/philn5d-ar/patch-1 github/fork/pradhul-dev/patch-1 github/fork/priyankgandhi/patch-1 github/fork/pstrh/pr/increase-css-module-hash-uniqueness github/fork/purelledhand/feat/support-disable-incremental-build github/fork/pushred/resolve-url-loader-v5 github/fork/puxiao/main github/fork/qubbit/patch-1 github/fork/raix/swap-babel-out-with-swc-in-start-build-and-test github/fork/raix/v5-add-back-support-for-node-builtins github/fork/raix/v5-add-react-runtime-aliases github/fork/raix/v5-fix-react-error-overlay-build github/fork/raix/v5-fix-split-chunks-issue-prod-build github/fork/rannn505/patch-1 github/fork/redbmk/full-homepage-url github/fork/revolunet/patch-1 github/fork/rgbutov/patch-2 github/fork/rheh/main github/fork/rluvaton/use-module-ids github/fork/rojo20/react-testing-library-docs github/fork/rpivo/master github/fork/rreckonerr/patch-1 github/fork/rsylvian/patch-1 github/fork/ruckc/websocketurl github/fork/ryo-kagawa/doc-troubleshooting github/fork/ryota-murakami/feat/disableModuleScopePlugin github/fork/ryota-murakami/fix/format github/fork/sashashura/patch-1 github/fork/saurabhjdas786/patch-1 github/fork/saurabhjdas786/patch-2 github/fork/sbindass-deal/patch-1 github/fork/schalkventer/patch-1 github/fork/scottlamb/pr-print-stack github/fork/segheysens/main github/fork/serghei77/patch-1 github/fork/serranom/patch-1 github/fork/sheepsteak/paths github/fork/sheerun/wasm github/fork/shfshanyue/fix-inline-chunk github/fork/shhnjk/main github/fork/shian15810/no-const-enum github/fork/siddhantvirus/master github/fork/siddharthborderwala/patch-1 github/fork/siddtheone/patch-1 github/fork/silvareal/patch-1 github/fork/skoging/patch-2 github/fork/sumanthratna/image-optimization2 github/fork/sunil-sharma-999/main github/fork/swayamTA/test_branch github/fork/tanify/patch-1 github/fork/tanvirstreame/fix-project-directory github/fork/tanvirstreame/update-jest github/fork/tanvirstreame/update-type github/fork/tarikhamilton/patch-1 github/fork/tcope25/patch-1 github/fork/teemezzy/patch-2 github/fork/testower/patch-1 github/fork/tetedacier/patch-1 github/fork/textbook/dont-lint-deps github/fork/th13vn/main github/fork/thexpand/patch-1 github/fork/thisgeek/patch-1 github/fork/tmclo/main github/fork/tobiasbueschel/docs/docusaurus-readme github/fork/tobiasbueschel/master github/fork/tobiasbueschel/refactor/const github/fork/tomvalorsa/patch-1 github/fork/treuherz/main github/fork/unclechu/sandbox/wenzel/customizable-proxy-env-var github/fork/user7564/main github/fork/viswa84/patch-1 github/fork/vlio20/patch-1 github/fork/webbertakken/patch-1 github/fork/wozzo/master github/fork/wsergent/patch-1 github/fork/xdiegors/patch-2 github/fork/xiaoxiangmoe/master github/fork/xtech-guru/add-less-support github/fork/yamankatby/patch-2 github/fork/yanneves/feature/no-restricted-globals github/fork/yicheny/fix_webpack5_cache_invalidation github/fork/ylemkimon/allowed-hosts github/fork/yvettep321/wp5 github/fork/zalox/master github/fork/zamarawka/feat/css-loacal-ident github/fork/zanemayo/patch-1 github/fork/zenotsai/mr/main/fix_build_cache github/fork/zhaomengfan/main github/fork/zhixiaoqiang/feature/react-dev-utils-export-guessEditor github/fork/zhoujingchao/main github/fork/zingbretsen/mdx-webpack-bugfix github/fork/zjffun/master lk/refactor-tests unpin-babel-loader wp5 v5.0.1 v5.0.0 v4.0.3 v4.0.2 v4.0.1 v4.0.0 v3.4.4 v3.4.3 v3.4.2 v3.4.1 v3.4.0 v3.3.1 v3.3.0 react-scripts@5.0.1 react-scripts@5.0.0 react-scripts@4.0.3 react-scripts@4.0.2 react-scripts@4.0.1 react-scripts@4.0.0 react-scripts@3.4.1 react-scripts@3.4.0 react-scripts@3.3.1 react-scripts@3.3.0 react-error-overlay@6.0.11 react-error-overlay@6.0.10 react-error-overlay@6.0.9 react-error-overlay@6.0.8 react-error-overlay@6.0.7 react-error-overlay@6.0.6 react-error-overlay@6.0.5 react-error-overlay@6.0.4 react-dev-utils@12.0.1 react-dev-utils@12.0.0 react-dev-utils@11.0.3 react-dev-utils@11.0.2 react-dev-utils@11.0.1 react-dev-utils@11.0.0 react-dev-utils@10.2.1 react-dev-utils@10.2.0 react-dev-utils@10.1.0 react-dev-utils@10.0.0 react-app-polyfill@3.0.0 react-app-polyfill@2.0.0 react-app-polyfill@1.0.6 react-app-polyfill@1.0.5 eslint-config-react-app@7.0.1 eslint-config-react-app@7.0.0 eslint-config-react-app@6.0.0 eslint-config-react-app@5.2.1 eslint-config-react-app@5.2.0 eslint-config-react-app@5.1.0 create-react-app@5.0.1 create-react-app@5.0.0 create-react-app@4.0.3 create-react-app@4.0.2 create-react-app@4.0.1 create-react-app@4.0.0 create-react-app@3.4.1 create-react-app@3.4.0 create-react-app@3.3.1 create-react-app@3.3.0 cra-template-typescript@1.2.0 cra-template-typescript@1.1.3 cra-template-typescript@1.1.2 cra-template-typescript@1.1.1 cra-template-typescript@1.1.0 cra-template-typescript@1.0.3 cra-template-typescript@1.0.2 cra-template-typescript@1.0.1 cra-template-typescript@1.0.0 cra-template@1.2.0 cra-template@1.1.3 cra-template@1.1.2 cra-template@1.1.1 cra-template@1.1.0 cra-template@1.0.3 cra-template@1.0.2 cra-template@1.0.1 cra-template@1.0.0 confusing-browser-globals@1.0.11 confusing-browser-globals@1.0.10 babel-preset-react-app@10.0.1 babel-preset-react-app@10.0.0 babel-preset-react-app@9.1.2 babel-preset-react-app@9.1.1 babel-preset-react-app@9.1.0 babel-plugin-named-asset-import@0.3.8 babel-plugin-named-asset-import@0.3.7 babel-plugin-named-asset-import@0.3.6 babel-plugin-named-asset-import@0.3.5
2 merge requests!12191Lim.Pisey.168:/Identified - We are currently investigating reports of missing build logs. The issue has been identified and a resolution is in progress. We will provide a further update when available.Mar 21, 09:02 UTC,!12853brikk
Showing with 442 additions and 370 deletions
+442 -370
......@@ -1577,20 +1577,20 @@ Unhandled Promise rejections will now crash tests. You can fix them by explicitl
After the regular update procedure above, add these line to `<head>` in `public/index.html`:
```html
<meta name="theme-color" content="#000000">
<!--
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
```
Add `<noscript>` to `<body>` in `public/index.html`:
```html
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
```
Then create a file called `public/manifest.json` that looks like this:
......
......@@ -23,4 +23,4 @@ You can adjust various development and production settings by setting environmen
| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. |
| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. |
| EXTEND_ESLINT | ✅ Used | ✅ Used | When set to `true`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building. |
| TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. |
| TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. |
......@@ -248,7 +248,9 @@ function createApp(
if (npmInfo.npmVersion) {
console.log(
chalk.yellow(
`You are using npm ${npmInfo.npmVersion} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
`You are using npm ${
npmInfo.npmVersion
} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
`Please update to npm 5 or higher for a better, fully supported experience.\n`
)
);
......@@ -262,7 +264,9 @@ function createApp(
if (yarnInfo.yarnVersion) {
console.log(
chalk.yellow(
`You are using Yarn ${yarnInfo.yarnVersion} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
`You are using Yarn ${
yarnInfo.yarnVersion
} together with the --use-pnp flag, but Plug'n'Play is only supported starting from the 1.12 release.\n\n` +
`Please update to Yarn 1.12 or higher for a better, fully supported experience.\n`
)
);
......
......@@ -50,7 +50,7 @@
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.14.3",
"flow-bin": "^0.63.1",
"flow-bin": "^0.110.0",
"html-entities": "1.2.1",
"jest": "24.9.0",
"jest-fetch-mock": "2.1.2",
......
......@@ -6,11 +6,12 @@
*/
/* @flow */
import React from 'react';
import { black } from '../styles';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Theme } from '../styles';
const closeButtonStyle = {
color: black,
const closeButtonStyle = (theme: Theme) => ({
color: theme.closeColor,
lineHeight: '1rem',
fontSize: '1.5rem',
padding: '1rem',
......@@ -18,15 +19,19 @@ const closeButtonStyle = {
position: 'absolute',
right: 0,
top: 0,
};
});
type CloseCallback = () => void;
function CloseButton({ close }: {| close: CloseCallback |}) {
type CloseButtonPropsType = {|
close: () => void,
|};
function CloseButton({ close }: CloseButtonPropsType) {
const theme = useContext(ThemeContext);
return (
<span
title="Click or press Escape to dismiss."
onClick={close}
style={closeButtonStyle}
style={closeButtonStyle(theme)}
>
×
</span>
......
......@@ -6,8 +6,8 @@
*/
/* @flow */
import React from 'react';
import { redTransparent, yellowTransparent } from '../styles';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
const _preStyle = {
position: 'relative',
......@@ -20,16 +20,6 @@ const _preStyle = {
borderRadius: '0.25rem',
};
const primaryPreStyle = {
..._preStyle,
backgroundColor: redTransparent,
};
const secondaryPreStyle = {
..._preStyle,
backgroundColor: yellowTransparent,
};
const codeStyle = {
fontFamily: 'Consolas, Menlo, monospace',
};
......@@ -39,9 +29,20 @@ type CodeBlockPropsType = {|
codeHTML: string,
|};
function CodeBlock(props: CodeBlockPropsType) {
const preStyle = props.main ? primaryPreStyle : secondaryPreStyle;
const codeBlock = { __html: props.codeHTML };
function CodeBlock({ main, codeHTML }: CodeBlockPropsType) {
const theme = useContext(ThemeContext);
const primaryPreStyle = {
..._preStyle,
backgroundColor: theme.primaryPreBackground,
color: theme.primaryPreColor,
};
const secondaryPreStyle = {
..._preStyle,
backgroundColor: theme.secondaryPreBackground,
color: theme.secondaryPreColor,
};
const preStyle = main ? primaryPreStyle : secondaryPreStyle;
const codeBlock = { __html: codeHTML };
return (
<pre style={preStyle}>
......
......@@ -6,81 +6,76 @@
*/
/* @flow */
import React, { Component } from 'react';
import { black } from '../styles';
import React, { useState, useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Element as ReactElement } from 'react';
import type { Theme } from '../styles';
const _collapsibleStyle = {
color: black,
cursor: 'pointer',
border: 'none',
display: 'block',
width: '100%',
textAlign: 'left',
background: '#fff',
fontFamily: 'Consolas, Menlo, monospace',
fontSize: '1em',
padding: '0px',
lineHeight: '1.5',
};
const collapsibleCollapsedStyle = {
const collapsibleCollapsedStyle = (theme: Theme) => ({
..._collapsibleStyle,
color: theme.color,
background: theme.background,
marginBottom: '1.5em',
};
});
const collapsibleExpandedStyle = {
const collapsibleExpandedStyle = (theme: Theme) => ({
..._collapsibleStyle,
color: theme.color,
background: theme.background,
marginBottom: '0.6em',
};
});
type Props = {|
type CollapsiblePropsType = {|
children: ReactElement<any>[],
|};
type State = {|
collapsed: boolean,
|};
class Collapsible extends Component<Props, State> {
state = {
collapsed: true,
};
function Collapsible(props: CollapsiblePropsType) {
const theme = useContext(ThemeContext);
const [collapsed, setCollapsed] = useState(true);
toggleCollapsed = () => {
this.setState(state => ({
collapsed: !state.collapsed,
}));
const toggleCollapsed = () => {
setCollapsed(!collapsed);
};
render() {
const count = this.props.children.length;
const collapsed = this.state.collapsed;
return (
<div>
const count = props.children.length;
return (
<div>
<button
onClick={toggleCollapsed}
style={
collapsed
? collapsibleCollapsedStyle(theme)
: collapsibleExpandedStyle(theme)
}
>
{(collapsed ? '' : '') +
` ${count} stack frames were ` +
(collapsed ? 'collapsed.' : 'expanded.')}
</button>
<div style={{ display: collapsed ? 'none' : 'block' }}>
{props.children}
<button
onClick={this.toggleCollapsed}
style={
collapsed ? collapsibleCollapsedStyle : collapsibleExpandedStyle
}
onClick={toggleCollapsed}
style={collapsibleExpandedStyle(theme)}
>
{(collapsed ? '' : '') +
` ${count} stack frames were ` +
(collapsed ? 'collapsed.' : 'expanded.')}
{`▲ ${count} stack frames were expanded.`}
</button>
<div style={{ display: collapsed ? 'none' : 'block' }}>
{this.props.children}
<button
onClick={this.toggleCollapsed}
style={collapsibleExpandedStyle}
>
{`▲ ${count} stack frames were expanded.`}
</button>
</div>
</div>
);
}
</div>
);
}
export default Collapsible;
......@@ -6,12 +6,13 @@
*/
/* @flow */
import React, { Component } from 'react';
import { black } from '../styles';
import React, { useContext, useEffect } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Node as ReactNode } from 'react';
import type { Theme } from '../styles';
const overlayStyle = {
const overlayStyle = (theme: Theme) => ({
position: 'relative',
display: 'inline-flex',
flexDirection: 'column',
......@@ -28,56 +29,50 @@ const overlayStyle = {
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
lineHeight: 1.5,
color: black,
};
color: theme.color,
});
type Props = {|
type ErrorOverlayPropsType = {|
children: ReactNode,
shortcutHandler?: (eventKey: string) => void,
|};
type State = {|
collapsed: boolean,
|};
let iframeWindow: window = null;
class ErrorOverlay extends Component<Props, State> {
iframeWindow: window = null;
function ErrorOverlay(props: ErrorOverlayPropsType) {
const theme = useContext(ThemeContext);
getIframeWindow = (element: ?HTMLDivElement) => {
const getIframeWindow = (element: ?HTMLDivElement) => {
if (element) {
const document = element.ownerDocument;
this.iframeWindow = document.defaultView;
}
};
onKeyDown = (e: KeyboardEvent) => {
const { shortcutHandler } = this.props;
if (shortcutHandler) {
shortcutHandler(e.key);
iframeWindow = document.defaultView;
}
};
const { shortcutHandler } = props;
componentDidMount() {
window.addEventListener('keydown', this.onKeyDown);
if (this.iframeWindow) {
this.iframeWindow.addEventListener('keydown', this.onKeyDown);
}
}
componentWillUnmount() {
window.removeEventListener('keydown', this.onKeyDown);
if (this.iframeWindow) {
this.iframeWindow.removeEventListener('keydown', this.onKeyDown);
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if (shortcutHandler) {
shortcutHandler(e.key);
}
};
window.addEventListener('keydown', onKeyDown);
if (iframeWindow) {
iframeWindow.addEventListener('keydown', onKeyDown);
}
}
return () => {
window.removeEventListener('keydown', onKeyDown);
if (iframeWindow) {
iframeWindow.removeEventListener('keydown', onKeyDown);
}
};
}, [shortcutHandler]);
render() {
return (
<div style={overlayStyle} ref={this.getIframeWindow}>
{this.props.children}
</div>
);
}
return (
<div style={overlayStyle(theme)} ref={getIframeWindow}>
{props.children}
</div>
);
}
export default ErrorOverlay;
......@@ -6,15 +6,16 @@
*/
/* @flow */
import React from 'react';
import { darkGray } from '../styles';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Theme } from '../styles';
const footerStyle = {
const footerStyle = (theme: Theme) => ({
fontFamily: 'sans-serif',
color: darkGray,
color: theme.footer,
marginTop: '0.5rem',
flex: '0 0 auto',
};
});
type FooterPropsType = {|
line1: string,
......@@ -22,8 +23,9 @@ type FooterPropsType = {|
|};
function Footer(props: FooterPropsType) {
const theme = useContext(ThemeContext);
return (
<div style={footerStyle}>
<div style={footerStyle(theme)}>
{props.line1}
<br />
{props.line2}
......
......@@ -6,13 +6,14 @@
*/
/* @flow */
import React from 'react';
import { red } from '../styles';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Theme } from '../styles';
const headerStyle = {
const headerStyle = (theme: Theme) => ({
fontSize: '2em',
fontFamily: 'sans-serif',
color: red,
color: theme.headerColor,
whiteSpace: 'pre-wrap',
// Top bottom margin spaces header
// Right margin revents overlap with close button
......@@ -20,14 +21,15 @@ const headerStyle = {
flex: '0 0 auto',
maxHeight: '50%',
overflow: 'auto',
};
});
type HeaderPropType = {|
headerText: string,
|};
function Header(props: HeaderPropType) {
return <div style={headerStyle}>{props.headerText}</div>;
const theme = useContext(ThemeContext);
return <div style={headerStyle(theme)}>{props.headerText}</div>;
}
export default Header;
......@@ -6,8 +6,9 @@
*/
/* @flow */
import React from 'react';
import { red, redTransparent } from '../styles';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import type { Theme } from '../styles';
const navigationBarStyle = {
marginBottom: '0.5rem',
......@@ -18,26 +19,28 @@ const buttonContainerStyle = {
};
const _navButtonStyle = {
backgroundColor: redTransparent,
color: red,
border: 'none',
borderRadius: '4px',
padding: '3px 6px',
cursor: 'pointer',
};
const leftButtonStyle = {
const leftButtonStyle = (theme: Theme) => ({
..._navButtonStyle,
backgroundColor: theme.navBackground,
color: theme.navArrow,
borderTopRightRadius: '0px',
borderBottomRightRadius: '0px',
marginRight: '1px',
};
});
const rightButtonStyle = {
const rightButtonStyle = (theme: Theme) => ({
..._navButtonStyle,
backgroundColor: theme.navBackground,
color: theme.navArrow,
borderTopLeftRadius: '0px',
borderBottomLeftRadius: '0px',
};
});
type Callback = () => void;
......@@ -49,14 +52,15 @@ type NavigationBarPropsType = {|
|};
function NavigationBar(props: NavigationBarPropsType) {
const theme = useContext(ThemeContext);
const { currentError, totalErrors, previous, next } = props;
return (
<div style={navigationBarStyle}>
<span style={buttonContainerStyle}>
<button onClick={previous} style={leftButtonStyle}>
<button onClick={previous} style={leftButtonStyle(theme)}>
</button>
<button onClick={next} style={rightButtonStyle}>
<button onClick={next} style={rightButtonStyle(theme)}>
</button>
</span>
......
......@@ -6,7 +6,8 @@
*/
/* @flow */
import React, { PureComponent } from 'react';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import ErrorOverlay from '../components/ErrorOverlay';
import Footer from '../components/Footer';
import Header from '../components/Header';
......@@ -19,31 +20,28 @@ const codeAnchorStyle = {
cursor: 'pointer',
};
type Props = {|
type CompileErrorContainerPropsType = {|
error: string,
editorHandler: (errorLoc: ErrorLocation) => void,
|};
class CompileErrorContainer extends PureComponent<Props, void> {
render() {
const { error, editorHandler } = this.props;
const errLoc: ?ErrorLocation = parseCompileError(error);
const canOpenInEditor = errLoc !== null && editorHandler !== null;
return (
<ErrorOverlay>
<Header headerText="Failed to compile" />
<div
onClick={
canOpenInEditor && errLoc ? () => editorHandler(errLoc) : null
}
style={canOpenInEditor ? codeAnchorStyle : null}
>
<CodeBlock main={true} codeHTML={generateAnsiHTML(error)} />
</div>
<Footer line1="This error occurred during the build time and cannot be dismissed." />
</ErrorOverlay>
);
}
function CompileErrorContainer(props: CompileErrorContainerPropsType) {
const theme = useContext(ThemeContext);
const { error, editorHandler } = props;
const errLoc: ?ErrorLocation = parseCompileError(error);
const canOpenInEditor = errLoc !== null && editorHandler !== null;
return (
<ErrorOverlay>
<Header headerText="Failed to compile" />
<div
onClick={canOpenInEditor && errLoc ? () => editorHandler(errLoc) : null}
style={canOpenInEditor ? codeAnchorStyle : null}
>
<CodeBlock main={true} codeHTML={generateAnsiHTML(error, theme)} />
</div>
<Footer line1="This error occurred during the build time and cannot be dismissed." />
</ErrorOverlay>
);
}
export default CompileErrorContainer;
......@@ -6,45 +6,46 @@
*/
/* @flow */
import React, { Component } from 'react';
import React, { useState, useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import CodeBlock from './StackFrameCodeBlock';
import { getPrettyURL } from '../utils/getPrettyURL';
import { darkGray } from '../styles';
import type { StackFrame as StackFrameType } from '../utils/stack-frame';
import type { ErrorLocation } from '../utils/parseCompileError';
import type { Theme } from '../styles';
const linkStyle = {
const linkStyle = (theme: Theme) => ({
fontSize: '0.9em',
marginBottom: '0.9em',
};
});
const anchorStyle = {
const anchorStyle = (theme: Theme) => ({
textDecoration: 'none',
color: darkGray,
color: theme.anchorColor,
cursor: 'pointer',
};
});
const codeAnchorStyle = {
const codeAnchorStyle = (theme: Theme) => ({
cursor: 'pointer',
};
});
const toggleStyle = {
const toggleStyle = (theme: Theme) => ({
marginBottom: '1.5em',
color: darkGray,
color: theme.toggleColor,
cursor: 'pointer',
border: 'none',
display: 'block',
width: '100%',
textAlign: 'left',
background: '#fff',
background: theme.toggleBackground,
fontFamily: 'Consolas, Menlo, monospace',
fontSize: '1em',
padding: '0px',
lineHeight: '1.5',
};
});
type Props = {|
type StackFramePropsType = {|
frame: StackFrameType,
contextSize: number,
critical: boolean,
......@@ -52,26 +53,19 @@ type Props = {|
editorHandler: (errorLoc: ErrorLocation) => void,
|};
type State = {|
compiled: boolean,
|};
class StackFrame extends Component<Props, State> {
state = {
compiled: false,
};
function StackFrame(props: StackFramePropsType) {
const theme = useContext(ThemeContext);
const [compiled, setCompiled] = useState(false);
toggleCompiled = () => {
this.setState(state => ({
compiled: !state.compiled,
}));
const toggleCompiled = () => {
setCompiled(!compiled);
};
getErrorLocation(): ErrorLocation | null {
const getErrorLocation = (): ErrorLocation | null => {
const {
_originalFileName: fileName,
_originalLineNumber: lineNumber,
} = this.props.frame;
} = props.frame;
// Unknown file
if (!fileName) {
return null;
......@@ -83,109 +77,106 @@ class StackFrame extends Component<Props, State> {
}
// Code is in a real file
return { fileName, lineNumber: lineNumber || 1 };
}
};
editorHandler = () => {
const errorLoc = this.getErrorLocation();
const editorHandler = () => {
const errorLoc = getErrorLocation();
if (!errorLoc) {
return;
}
this.props.editorHandler(errorLoc);
props.editorHandler(errorLoc);
};
onKeyDown = (e: SyntheticKeyboardEvent<>) => {
const onKeyDown = (e: SyntheticKeyboardEvent<any>) => {
if (e.key === 'Enter') {
this.editorHandler();
editorHandler();
}
};
render() {
const { frame, contextSize, critical, showCode } = this.props;
const {
fileName,
lineNumber,
columnNumber,
_scriptCode: scriptLines,
_originalFileName: sourceFileName,
_originalLineNumber: sourceLineNumber,
_originalColumnNumber: sourceColumnNumber,
_originalScriptCode: sourceLines,
} = frame;
const functionName = frame.getFunctionName();
const compiled = this.state.compiled;
const url = getPrettyURL(
sourceFileName,
sourceLineNumber,
sourceColumnNumber,
fileName,
lineNumber,
columnNumber,
compiled
);
let codeBlockProps = null;
if (showCode) {
if (
compiled &&
scriptLines &&
scriptLines.length !== 0 &&
lineNumber != null
) {
codeBlockProps = {
lines: scriptLines,
lineNum: lineNumber,
columnNum: columnNumber,
contextSize,
main: critical,
};
} else if (
!compiled &&
sourceLines &&
sourceLines.length !== 0 &&
sourceLineNumber != null
) {
codeBlockProps = {
lines: sourceLines,
lineNum: sourceLineNumber,
columnNum: sourceColumnNumber,
contextSize,
main: critical,
};
}
const { frame, contextSize, critical, showCode } = props;
const {
fileName,
lineNumber,
columnNumber,
_scriptCode: scriptLines,
_originalFileName: sourceFileName,
_originalLineNumber: sourceLineNumber,
_originalColumnNumber: sourceColumnNumber,
_originalScriptCode: sourceLines,
} = frame;
const functionName = frame.getFunctionName();
const url = getPrettyURL(
sourceFileName,
sourceLineNumber,
sourceColumnNumber,
fileName,
lineNumber,
columnNumber,
compiled
);
let codeBlockProps = null;
if (showCode) {
if (
compiled &&
scriptLines &&
scriptLines.length !== 0 &&
lineNumber != null
) {
codeBlockProps = {
lines: scriptLines,
lineNum: lineNumber,
columnNum: columnNumber,
contextSize,
main: critical,
};
} else if (
!compiled &&
sourceLines &&
sourceLines.length !== 0 &&
sourceLineNumber != null
) {
codeBlockProps = {
lines: sourceLines,
lineNum: sourceLineNumber,
columnNum: sourceColumnNumber,
contextSize,
main: critical,
};
}
}
const canOpenInEditor =
this.getErrorLocation() !== null && this.props.editorHandler !== null;
return (
<div>
<div>{functionName}</div>
<div style={linkStyle}>
const canOpenInEditor =
getErrorLocation() !== null && props.editorHandler !== null;
return (
<div>
<div>{functionName}</div>
<div style={linkStyle(theme)}>
<span
style={canOpenInEditor ? anchorStyle(theme) : null}
onClick={canOpenInEditor ? editorHandler : null}
onKeyDown={canOpenInEditor ? onKeyDown : null}
tabIndex={canOpenInEditor ? '0' : null}
>
{url}
</span>
</div>
{codeBlockProps && (
<span>
<span
style={canOpenInEditor ? anchorStyle : null}
onClick={canOpenInEditor ? this.editorHandler : null}
onKeyDown={canOpenInEditor ? this.onKeyDown : null}
tabIndex={canOpenInEditor ? '0' : null}
onClick={canOpenInEditor ? editorHandler : null}
style={canOpenInEditor ? codeAnchorStyle(theme) : null}
>
{url}
</span>
</div>
{codeBlockProps && (
<span>
<span
onClick={canOpenInEditor ? this.editorHandler : null}
style={canOpenInEditor ? codeAnchorStyle : null}
>
<CodeBlock {...codeBlockProps} />
</span>
<button style={toggleStyle} onClick={this.toggleCompiled}>
{'View ' + (compiled ? 'source' : 'compiled')}
</button>
<CodeBlock {...codeBlockProps} />
</span>
)}
</div>
);
}
<button style={toggleStyle(theme)} onClick={toggleCompiled}>
{'View ' + (compiled ? 'source' : 'compiled')}
</button>
</span>
)}
</div>
);
}
export default StackFrame;
......@@ -6,12 +6,11 @@
*/
/* @flow */
import React from 'react';
import React, { useContext } from 'react';
import { ThemeContext } from '../iframeScript';
import CodeBlock from '../components/CodeBlock';
import { applyStyles } from '../utils/dom/css';
import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
import type { ScriptLine } from '../utils/stack-frame';
import { primaryErrorStyle, secondaryErrorStyle } from '../styles';
import generateAnsiHTML from '../utils/generateAnsiHTML';
import { codeFrameColumns } from '@babel/code-frame';
......@@ -29,6 +28,7 @@ type StackFrameCodeBlockPropsType = {|
type Exact<T> = $Shape<T>;
function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
const theme = useContext(ThemeContext);
const { lines, lineNum, columnNum, contextSize, main } = props;
const sourceCode = [];
let whiteSpace = Infinity;
......@@ -70,7 +70,7 @@ function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
linesBelow: contextSize,
}
);
const htmlHighlight = generateAnsiHTML(ansiHighlight);
const htmlHighlight = generateAnsiHTML(ansiHighlight, theme);
const code = document.createElement('code');
code.innerHTML = htmlHighlight;
absolutifyCaret(code);
......@@ -89,8 +89,6 @@ function StackFrameCodeBlock(props: Exact<StackFrameCodeBlockPropsType>) {
if (text.indexOf(' ' + lineNum + ' |') === -1) {
continue;
}
// $FlowFixMe
applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
// eslint-disable-next-line
break oLoop;
}
......
......@@ -11,6 +11,7 @@ let boundErrorHandler = null;
type ErrorCallback = (error: Error) => void;
function errorHandler(callback: ErrorCallback, e: Event): void {
// $FlowFixMe
if (!e.error) {
return;
}
......
......@@ -6,14 +6,16 @@
*/
import 'react-app-polyfill/ie9';
import React from 'react';
import React, { createContext } from 'react';
import ReactDOM from 'react-dom';
import CompileErrorContainer from './containers/CompileErrorContainer';
import RuntimeErrorContainer from './containers/RuntimeErrorContainer';
import { overlayStyle } from './styles';
import { applyStyles } from './utils/dom/css';
import { applyStyles, getTheme } from './utils/dom/css';
let iframeRoot = null;
const theme = getTheme();
export const ThemeContext = createContext();
function render({
currentBuildError,
......@@ -23,19 +25,23 @@ function render({
}) {
if (currentBuildError) {
return (
<CompileErrorContainer
error={currentBuildError}
editorHandler={editorHandler}
/>
<ThemeContext.Provider value={theme}>
<CompileErrorContainer
error={currentBuildError}
editorHandler={editorHandler}
/>
</ThemeContext.Provider>
);
}
if (currentRuntimeErrorRecords.length > 0) {
return (
<RuntimeErrorContainer
errorRecords={currentRuntimeErrorRecords}
close={dismissRuntimeErrors}
editorHandler={editorHandler}
/>
<ThemeContext.Provider value={theme}>
<RuntimeErrorContainer
errorRecords={currentRuntimeErrorRecords}
close={dismissRuntimeErrors}
editorHandler={editorHandler}
/>
</ThemeContext.Provider>
);
}
return null;
......@@ -57,6 +63,6 @@ document.body.style.margin = '0';
// Keep popup within body boundaries for iOS Safari
document.body.style['max-width'] = '100vw';
iframeRoot = document.createElement('div');
applyStyles(iframeRoot, overlayStyle);
applyStyles(iframeRoot, overlayStyle(theme));
document.body.appendChild(iframeRoot);
window.parent.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__.iframeReady();
......@@ -6,14 +6,109 @@
*/
/* @flow */
const black = '#293238',
darkGray = '#878e91',
red = '#ce1126',
redTransparent = 'rgba(206, 17, 38, 0.05)',
lightRed = '#fccfcf',
yellow = '#fbf5b4',
yellowTransparent = 'rgba(251, 245, 180, 0.3)',
white = '#ffffff';
export type Theme = {|
// Colors for components styles
background: string, // Page background
color: string, // Base text
headerColor: string, // Header text
primaryPreBackground: string, // <pre/> Error background
primaryPreColor: string, // <pre/> Error text
secondaryPreBackground: string, // <pre/> Warning background
secondaryPreColor: string, // <pre/> Warning text
footer: string, // Footer text
anchorColor: string, // Link color
toggleBackground: string, // Toggle stack background
toggleColor: string, // Toggle stack text
closeColor: string, // Close button color
navBackground: string, // Navigation arrow background
navArrow: string, // Navigation arrow color
// ANSI colors
// base00: string; // Default Background
base01: string, // Lighter Background (Used for status bars)
// base02: string, // Selection Background
base03: string, // Comments, Invisibles, Line Highlighting
// base04: string, // Dark Foreground (Used for status bars)
base05: string, // Default Foreground, Caret, Delimiters, Operators
// base06: string, // Light Foreground (Not often used)
// base07: string, // Light Background (Not often used)
base08: string, // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
// base09: string, // Integers, Boolean, Constants, XML Attributes, Markup Link Url
// base0A: string, // Classes, Markup Bold, Search Text Background
base0B: string, // Strings, Inherited Class, Markup Code, Diff Inserted
base0C: string, // Support, Regular Expressions, Escape Characters, Markup Quotes
// base0D: string, // Functions, Methods, Attribute IDs, Headings
base0E: string, // Keywords, Storage, Selector, Markup Italic, Diff Changed
// base0F: string, // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
|};
const lightTheme: Theme = {
// Colors for components styles
background: 'white',
color: 'black',
headerColor: '#ce1126',
primaryPreBackground: 'rgba(206, 17, 38, 0.05)',
primaryPreColor: 'inherit',
secondaryPreBackground: 'rgba(251, 245, 180, 0.3)',
secondaryPreColor: 'inherit',
footer: '#878e91',
anchorColor: '#878e91',
toggleBackground: 'transparent',
toggleColor: '#878e91',
closeColor: '#293238',
navBackground: 'rgba(206, 17, 38, 0.05)',
navArrow: '#ce1126',
// Light color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
// base00: '#ffffff',
base01: '#f5f5f5',
// base02: '#c8c8fa',
base03: '#6e6e6e',
// base04: '#e8e8e8',
base05: '#333333',
// base06: '#ffffff',
// base07: '#ffffff',
base08: '#881280',
// base09: '#0086b3',
// base0A: '#795da3',
base0B: '#1155cc',
base0C: '#994500',
// base0D: '#795da3',
base0E: '#c80000',
// base0F: '#333333',
};
const darkTheme: Theme = {
// Colors for components styles
background: '#353535',
color: 'white',
headerColor: '#e83b46',
primaryPreBackground: 'rgba(206, 17, 38, 0.1)',
primaryPreColor: '#fccfcf',
secondaryPreBackground: 'rgba(251, 245, 180, 0.1)',
secondaryPreColor: '#fbf5b4',
footer: '#878e91',
anchorColor: '#878e91',
toggleBackground: 'transparent',
toggleColor: '#878e91',
closeColor: '#ffffff',
navBackground: 'rgba(206, 17, 38, 0.2)',
navArrow: '#ce1126',
// Dark color scheme inspired by https://github.com/atom/base16-tomorrow-dark-theme/blob/master/styles/colors.less
// base00: '#1d1f21',
base01: '#282a2e',
// base02: '#373b41',
base03: '#969896',
// base04: '#b4b7b4',
base05: '#c5c8c6',
// base06: '#e0e0e0',
// base07: '#ffffff',
base08: '#cc6666',
// base09: '#de935f',
// base0A: '#f0c674',
base0B: '#b5bd68',
base0C: '#8abeb7',
// base0D: '#81a2be',
base0E: '#b294bb',
// base0F: '#a3685a',
};
const iframeStyle = {
position: 'fixed',
......@@ -25,30 +120,12 @@ const iframeStyle = {
'z-index': 2147483647,
};
const overlayStyle = {
const overlayStyle = (theme: Theme) => ({
width: '100%',
height: '100%',
'box-sizing': 'border-box',
'text-align': 'center',
'background-color': white,
};
'background-color': theme.background,
});
const primaryErrorStyle = {
'background-color': lightRed,
};
const secondaryErrorStyle = {
'background-color': yellow,
};
export {
iframeStyle,
overlayStyle,
primaryErrorStyle,
secondaryErrorStyle,
black,
darkGray,
red,
redTransparent,
yellowTransparent,
};
export { iframeStyle, overlayStyle, lightTheme, darkTheme };
......@@ -6,6 +6,8 @@
*/
/* @flow */
import { lightTheme, darkTheme } from '../../styles';
let injectedCount = 0;
const injectedCache = {};
......@@ -44,4 +46,11 @@ function applyStyles(element: HTMLElement, styles: Object) {
}
}
export { getHead, injectCss, removeCss, applyStyles };
function getTheme() {
return window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
? darkTheme
: lightTheme;
}
export { getHead, injectCss, removeCss, applyStyles, getTheme };
......@@ -9,44 +9,27 @@
import Anser from 'anser';
import { AllHtmlEntities as Entities } from 'html-entities';
import type { Theme } from '../styles';
var entities = new Entities();
// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
// var base00 = 'ffffff'; // Default Background
var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
// var base02 = 'c8c8fa'; // Selection Background
var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting
// var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
// var base06 = 'ffffff'; // Light Foreground (Not often used)
// var base07 = 'ffffff'; // Light Background (Not often used)
var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
// var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
// var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted
var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes
// var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
// var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
const entities = new Entities();
// Map ANSI colors from what babel-code-frame uses to base16-github
// See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
var colors = {
reset: [base05, 'transparent'],
black: base05,
red: base08 /* marker, bg-invalid */,
green: base0B /* string */,
yellow: base08 /* capitalized, jsx_tag, punctuator */,
blue: base0C,
magenta: base0C /* regex */,
cyan: base0E /* keyword */,
gray: base03 /* comment, gutter */,
lightgrey: base01,
darkgrey: base03,
};
const colors = (theme: Theme) => ({
reset: [theme.base05, 'transparent'],
black: theme.base05,
red: theme.base08 /* marker, bg-invalid */,
green: theme.base0B /* string */,
yellow: theme.base08 /* capitalized, jsx_tag, punctuator */,
blue: theme.base0C,
magenta: theme.base0C /* regex */,
cyan: theme.base0E /* keyword */,
gray: theme.base03 /* comment, gutter */,
lightgrey: theme.base01,
darkgrey: theme.base03,
});
var anserMap = {
const anserMap = {
'ansi-bright-black': 'black',
'ansi-bright-yellow': 'yellow',
'ansi-yellow': 'yellow',
......@@ -61,28 +44,28 @@ var anserMap = {
'ansi-white': 'darkgrey',
};
function generateAnsiHTML(txt: string): string {
var arr = new Anser().ansiToJson(entities.encode(txt), {
function generateAnsiHTML(txt: string, theme: Theme): string {
const arr = new Anser().ansiToJson(entities.encode(txt), {
use_classes: true,
});
var result = '';
var open = false;
for (var index = 0; index < arr.length; ++index) {
var c = arr[index];
var content = c.content,
let result = '';
let open = false;
for (let index = 0; index < arr.length; ++index) {
const c = arr[index];
const content = c.content,
fg = c.fg;
var contentParts = content.split('\n');
for (var _index = 0; _index < contentParts.length; ++_index) {
const contentParts = content.split('\n');
for (let _index = 0; _index < contentParts.length; ++_index) {
if (!open) {
result += '<span data-ansi-line="true">';
open = true;
}
var part = contentParts[_index].replace('\r', '');
var color = colors[anserMap[fg]];
const part = contentParts[_index].replace('\r', '');
const color = colors(theme)[anserMap[fg]];
if (color != null) {
result += '<span style="color: #' + color + ';">' + part + '</span>';
result += '<span style="color: ' + color + ';">' + part + '</span>';
} else {
if (fg != null) {
console.log('Missing color mapping: ', fg);
......
......@@ -16,6 +16,7 @@ import { SourceMapConsumer } from 'source-map';
class SourceMap {
__source_map: SourceMapConsumer;
// $FlowFixMe
constructor(sourceMap) {
this.__source_map = sourceMap;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment