Hotfix: EASE interstitial Link Failing for some Locales (EFForg#18737)

zoracon · Chan Chak Shing · web-flow · commit 61aa04772809 · 2019-12-13T12:57:13.000-08:00
* Move network explainer link after paragraph - Moved due to in paragraph translation differs from the text beimg translated in a singular context in some locales - In order to not burden translators the link explainer is moved after paragraph for now * Add conditional if link replace fails Fixes EFForg#18702 * Satisfy linter * Update chromium/pages/cancel/ux.js Co-Authored-By: pipboy96 <pipboy96@protonmail.com> * Update chromium/pages/cancel/ux.js Co-Authored-By: Chan Chak Shing <ccspasu@gmail.com>
diff --git a/chromium/pages/cancel/style.css b/chromium/pages/cancel/style.css
@@ -27,18 +27,17 @@ h1 img {
 }
 
 button {
-  font-size: 12pt;
-  font-family: sans-serif;
-  line-height: 150%;
   background-color: #ec1e1e;
   border: 1px solid #ec1e1e;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   padding: 0.5em 1em;
   display: block;
-  float: left;
-  margin: 0 0.25em 0 0;
+  float: none;
+  font-size: 12pt;
+  margin: 8px 0;
+  line-height: 150%;
 }
 
 button:hover {
@@ -53,6 +52,6 @@ button:last-child {
 @media screen and (max-width: 550px) {
   button {
     width: 100%;
-    margin: 0 0 0.25em 0;
+    margin: 8px 0;
   }
 }
diff --git a/chromium/pages/cancel/ux.js b/chromium/pages/cancel/ux.js
@@ -20,9 +20,23 @@ function replaceLink(explainer) {
   observer.disconnect();
   const linkText = chrome.i18n.getMessage("cancel_he_blocking_network");
   const link = document.createElement("a");
+  link.classList.add("wikilink");
   link.href = "https://en.wikipedia.org/wiki/Downgrade_attack";
   link.innerText = linkText;
   explainer.innerHTML = explainer.innerHTML.replace(linkText, link.outerHTML);
+
+  /*
+    In response to translation of i18n string "cancel_he_blocking_network".
+    Within context of the paragraph and as a standalone string can be interpreted differently
+    langauge to language.
+
+    So if link fails to swap in replace, this conditional is triggered
+  */
+  if (document.getElementsByClassName("wikilink").length === 0) {
+    link.innerText = linkText;
+    explainer.after(link);
+  }
+
 }
 
 function displayURL() {
