Add dummy UI for popup.

popup/package.json

@@ -31,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-plugin-react": "^7.20.6"
   }
 }

popup/src/App.js

@@ -1,14 +1,123 @@
-import React from 'react';
+/* global browser */
+import React, { useState } from 'react';
 
 function App() {
+	const [ advanced, setAdvanced ] = useState(false);
+	const [ words, setWords ] = useState([]);
+	const [ word, setWord ] = useState("");
+	const [ regex, setRegex ] = useState("");
+	const [ flags, setFlags ] = useState("");
+	function removeWord(idx) {
+		setWords([...words.slice(0, idx), ...words.slice(idx+1)]);
+	}
 	return (
-		<div className="App">
+		<>
-			<header className="App-header">
+			<input
-				<p>
+				type="checkbox"
-					Edit <code>src/App.js</code> and save to reload.
+				id="toggle"
-				</p>
+				onChange={e => setAdvanced(e.target.checked)}
-			</header>
+				checked={advanced}
+			/>
+			<label for="toggle">Advanced Mode</label>
+			<div class="simple"
+				style={{
+					display: advanced ? "none": "block"
+				}}
+			>
+				<div
+					class="words"
+					style={{
+						display: "flex",
+						flexWrap: "wrap",
+						margin: "0.3em",
+						width: "100%"
+					}}
+				>
+					{words.map((word, idx) =>
+						<span
+							class="word"
+							key={idx}
+							style={{
+								backgroundColor: "#B4FFEF",
+								borderRadius: "1em",
+								padding: "0.25em 0.5em",
+								margin: "0.1em"
+							}}
+						>
+							{word}
+							<span
+								onClick={() => (removeWord(idx))}
+								role="img"
+								aria-label="Delete word"
+								style={{
+									cursor: "pointer"
+								}}
+							>
+								✗
+							</span>
+						</span>
+					)}
 				</div>
+				<form>
+					<div
+						style={{
+							width: "100%",
+							display: "flex",
+							justifyItems: "stretch"
+						}}
+					>
+						<input
+							id="add-word"
+							type="text"
+							value={word}
+							onInput={e => setWord(e.target.value)}
+							placeholder="Word"
+							style={{
+								flexGrow: 1,
+							}}
+						/>
+						<button
+							id="add-word-button"
+							onClick={e => {setWords([...words, word]); setWord(""); e.preventDefault();}}
+							type="submit"
+							enabled={word !== ""}
+						>
+							+
+						</button>
+					</div>
+				</form>
+			</div>
+			<div class="advanced"
+				style={{
+					display: advanced ? "flex": "none",
+					alignItems: "baseline",
+					justifyItems: "space-between"
+				}}
+			>
+				/
+				<input
+					id="add-regex"
+					type="text"
+					value={regex}
+					onInput={e => setRegex(e.target.value)}
+					placeholder="RegEx"
+					style={{
+						width: "85%"
+					}}
+				/>
+				/
+				<input
+					id="add-flags"
+					type="text"
+					value={flags}
+					onInput={e => setFlags(e.target.value)}
+					placeholder="Flags"
+					style={{
+						width: "13%"
+					}}
+				/>
+			</div>
+		</>
 	);
 }
 

popup/src/index.css

@@ -1,3 +1,6 @@
+* {
+	box-sizing: border-box;
+}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +8,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  width: 500px;
+  padding: 10px;
 }
 
 code {

popup/yarn.lock

@@ -2187,6 +2187,15 @@ array.prototype.flat@^1.2.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+array.prototype.flatmap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -4243,6 +4252,23 @@ eslint-plugin-react@7.19.0:
     string.prototype.matchall "^4.0.2"
     xregexp "^4.3.0"
 
+eslint-plugin-react@^7.20.6:
+  version "7.20.6"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.6.tgz#4d7845311a93c463493ccfa0a19c9c5d0fd69f60"
+  integrity sha512-kidMTE5HAEBSLu23CUDvj8dc3LdBU0ri1scwHBZjI41oDv4tjsWZKU7MQccFzH1QYPYhsnTF2ovh7JlcIcmxgg==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    resolve "^1.17.0"
+    string.prototype.matchall "^4.0.2"
+
 eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -6447,7 +6473,7 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3:
+jsx-ast-utils@^2.2.1, jsx-ast-utils@^2.2.3, jsx-ast-utils@^2.4.1:
   version "2.4.1"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
   integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
@@ -7245,7 +7271,7 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.entries@^1.1.0, object.entries@^1.1.1:
+object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
   integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
@@ -9088,7 +9114,7 @@ resolve@1.15.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==