Merge pull request #964 from NotAProton/ui

Mv3: Remove UIkit and revamp pages with FastForward CSS

.prettierrc

@@ -1,3 +1,4 @@
 {
-    "singleQuote": true
+    "singleQuote": true,
+    "bracketSameLine": true
   }

CONTRIBUTORS.md

@@ -0,0 +1,22 @@
+<div align="center">
+<img src="https://avatars.githubusercontent.com/u/88992224?s=200&v=4" width="128" />
+<h1> FastForward </h1>
+<p> Don't waste your time with compliance. FastForward automatically skips annoying link shorteners. </p>
+
+
+
+[<img src="https://img.shields.io/github/actions/workflow/status/fastforwardteam/fastforward/main.yml?branch=main&label=Builds&style=for-the-badge" />](https://github.com/FastForwardTeam/FastForward/blob/main/.github/workflows/main.yml)
+<a href="https://discord.gg/RSAf7b5njt" target="_blank"> <img alt="Discord" src="https://img.shields.io/discord/876622516607656006?label=Our%20Discord&logo=discord&style=for-the-badge"> </a>
+<br> <br>
+<a href="https://github.com/FastForwardTeam/FastForward#why-is-fastforward-no-longer-on-the-chrome-web-store"><img src="https://user-images.githubusercontent.com/585534/107280622-91a8ea80-6a26-11eb-8d07-77c548b28665.png" alt="Get FastForward on Chromium based browsers" width="126px"></a>
+<a href="https://microsoftedge.microsoft.com/addons/detail/fastforward/ldcclmkclhomnpcnccgbgleikchbnecl"><img src="https://user-images.githubusercontent.com/585534/107280673-a5ece780-6a26-11eb-9cc7-9fa9f9f81180.png" alt="Get FastForward on Microsoft Edge" width="126px"></a>
+<a href="https://addons.mozilla.org/firefox/addon/fastforwardteam/"><img src="https://user-images.githubusercontent.com/585534/107280546-7b9b2a00-6a26-11eb-8f9f-f95932f4bfec.png" alt="Get FastForward for Firefox" width="126px"></a> 
+</div>
+
+# FastForward Contributors
+
+Thanks to everyone who helps make FastForward:
+
+- The [code contributors](https://github.com/FastForwardTeam/FastForward/graphs/contributors) right here at Github
+- The [website devs](https://github.com/FastForwardTeam/Website/graphs/contributors)
+- The translators over at [Crowdin](https://crowdin.com/project/fastforward)

src/_locales/en/messages.json

@@ -30,7 +30,7 @@
 		"message": "Options"
 	},
 	"optionsLink": {
-		"message": "Change FastForward' options."
+		"message": "Change FastForward's options."
 	},
 	"optionsEnabled": {
 		"message": "Enable website bypasses."
@@ -131,9 +131,6 @@
 	"blockedSubtitle": {
 		"message": "Don't want FastForward to prevent bad actors from getting your IP?"
 	},
-	"optionsWhitelistSave":{
-		"message": "Save Whitelist"
-	},
 	"optionsWhitelist": {
 		"message": "Whitelist"
 	},

src/html/base.js

@@ -1,58 +1,5 @@
-const brws=(typeof browser=="undefined"?chrome:browser)
-document.documentElement.setAttribute("dir",brws.i18n.getMessage("@@bidi_dir"))
-if(window.matchMedia("(prefers-color-scheme: dark)").matches)
-{
-	document.documentElement.className="uk-light uk-background-secondary"
-}
-let link=document.createElement("link")
-link.rel="stylesheet"
-link.href="uikit/uikit-"+brws.i18n.getMessage("@@bidi_dir")+".css"
-document.head.appendChild(link)
-let style=document.createElement("style")
-style.textContent="p{font-size:1rem}"
-document.head.appendChild(style)
-const timer=(message,secondsLeft,cancelable,callback)=>{
-	if(secondsLeft>=0)
-	{
-		const div=document.getElementById("timer"),
-		tid=setInterval(()=>{
-			secondsLeft--
-			tick()
-		},1000),
-		p=div.querySelector("p"),
-		brws=(typeof browser=="undefined"?chrome:browser),
-		cancel=()=>{
-			clearInterval(tid)
-			titleElm.textContent=title
-			div.classList.add("uk-hidden")
-		},
-		tick=()=>{
-			if(secondsLeft<=0)
-			{
-				cancel()
-				callback()
-				return
-			}
-			titleElm.textContent="("+secondsLeft+") "+title
-			if(secondsLeft==1)
-			{
-				p.textContent=brws.i18n.getMessage(message+"Singular")+" "
-			}
-			else
-			{
-				p.textContent=brws.i18n.getMessage(message).replace("%",secondsLeft)+" "
-			}
-			if(cancelable)
-			{
-				let a=document.createElement("a")
-				a.href="#"
-				a.onclick=cancel
-				a.textContent=brws.i18n.getMessage("cancel")
-				p.appendChild(a)
-			}
-		}
-		div.classList.remove("uk-hidden")
-		tick()
-		return tid
-	}
-}
+const brws = typeof browser == 'undefined' ? chrome : browser;
+document.documentElement.setAttribute(
+  'dir',
+  brws.i18n.getMessage('@@bidi_dir')
+);

src/html/before-navigate.html

@@ -4,24 +4,31 @@
     <title data-message="beforeNavigate"></title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
     <script src="./base.js"></script>
   </head>
   <body>
-    <div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
-      <h1 data-message="beforeNavigate"></h1>
+    <nav class="mobile-only">
+      <ul>
+        <div class="logo-wrapper">
+          <img class="logo" src="../icon/branding.png" alt="FastForward" />
+        </div>
+      </ul>
+    </nav>
+    <section>
+      <h2 data-message="beforeNavigate"></h2>
       <p id="destination"></p>
-      <div id="timer" class="uk-alert uk-alert-primary uk-hidden">
+      <div id="timer">
         <p></p>
       </div>
       <p id="options-link">
         <span data-message="beforeNavigateOptions"></span>
         <a
           href="options.html#option-navigation-delay"
           target="_blank"
-          data-message="optionsLink"
-        ></a>
+          data-message="optionsLink"></a>
       </p>
-    </div>
+    </section>
 
     <script src="./i18n.js"></script>
     <script src="./before-navigate.js"></script>

src/html/before-navigate.js

@@ -20,9 +20,9 @@ function escapeHtml(unsafe) {
 const destinationElement = document.querySelector('#destination');
 destinationElement.innerHTML = brws.i18n.getMessage(
   'beforeNavigateDestination',
-  `<a href="${escapeHtml(targetUrl)}"><code> ${escapeHtml(
+  `<br><a href="${escapeHtml(
     targetUrl
-  )} </a></code>`
+  )}" class="link link-preview"><code> ${escapeHtml(targetUrl)} </a></code>`
 );
 
 brws.storage.local.get('options', (result) => {

src/html/crowd-bypassed.html

@@ -4,29 +4,36 @@
     <title data-message="crowdBypassed"></title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
     <script src="base.js"></script>
   </head>
   <body>
-    <div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
-      <h1 data-message="crowdBypassed"></h1>
+    <nav class="mobile-only">
+      <ul>
+        <div class="logo-wrapper"><img class="logo" src="../icon/branding.png" alt="FastForward"></div>
+      </ul>
+    </nav>
+    <section>
+      <h2 data-message="crowdBypassed"></h1>
       <p id="crowd-bypass-info"></p>
-      <div id="timer" class="uk-alert uk-alert-primary uk-hidden">
+      <div id="timer">
         <p></p>
       </div>
       <p data-message="tempDisableCrowdBypassDesc"></p>
       <button id="temp-disable-crowd">
         <span data-message="tempDisableCrowdBypassButton"></span>
       </button>
       <br />
-      <p>
+      <p id="options-link">
         <span data-message="crowdBypassedOptions"></span>
         <a
           href="options.html#option-crowd-open-delay"
           target="_blank"
-          data-message="optionsLink"
-        ></a>
+          data-message="optionsLink"></a>
       </p>
-    </div>
+
+    </section>
+
     <script src="i18n.js"></script>
     <script src="crowd-bypassed.js"></script>
   </body>

src/html/crowd-bypassed.js

@@ -20,7 +20,9 @@ function escapeHtml(unsafe) {
 function updateDestinationMessage() {
   let msg = brws.i18n.getMessage(
     'crowdBypassedInfo',
-    '<a><code>'.concat(escapeHtml(targetUrl), '</a></code>')
+    `<br><a href="${escapeHtml(
+      targetUrl
+    )}" class="link link-preview"><code> ${escapeHtml(targetUrl)} </a></code>`
   );
   document.querySelector('#crowd-bypass-info').innerHTML = msg;
 }
@@ -36,6 +38,7 @@ tempDisableCrowdButton.addEventListener('click', () => {
     brws.storage.local.set({ tempDisableCrowd: 'true' });
     // Create an alarm that will trigger after 10 minutes
     brws.alarms.create('enableCrowdBypass', { delayInMinutes: 10 });
+    history.back();
   });
 });