diff --git a/src/content_script.css b/src/content_script.css index 2ad18eca..82aa31c2 100644 --- a/src/content_script.css +++ b/src/content_script.css @@ -1,3 +1,20 @@ + +body { + --blue60: #0060df; + --blue70: #003eaa; + --primaryText: #15141A; + --secondaryText: #5B5B66; + --grey20: #ededf0; + --light-gray: #F0F0F4; + --white: #ffffff; + --transition: all .15s cubic-bezier(.07,.95,0,1); + --borders: 1px solid #ededf0; + font-size: 13px; + font-weight: 400; + color: #15141A; + font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + /* Button Replacement */ .fbc-loginButton { background-size: contain; @@ -49,13 +66,7 @@ position: absolute; z-index: 100; transition: opacity 0.2s ease-out; - font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; - --transition: all .15s cubic-bezier(.07,.95,0,1); - --blue60: #0060df; - --blue70: #003eaa; - --blue80: #073072; - --black: #000000; - --white: #ffffff; + --transition: all .15s cubic-bezier(.07,.95,0,1) } .fbc-badge.fbc-badge-disabled { @@ -125,99 +136,112 @@ opacity: 1; } -.fbc-badge-prompt { - display: none; - width: 345px; - position: absolute; - left: calc( 100% + 20px); - top: 50%; - transform: translateY(-50%); +.fbc-container { + overflow: hidden; +} + +.fbc-wrapper{ + position: fixed; + height: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + z-index: 999999999999; + background-color: rgba(0, 0, 0, 0.1); +} + +.fbc-wrapper iframe { color: var(--black); box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.2); - padding: 0 0 40px; + background: var(--white); + border-radius: 8px; + line-height: 120%; } -.fbc-badge-prompt:after { - content: " "; +.fbc-iframe-chevron { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right:10px solid rgb(255, 255, 255); position: absolute; - left: -10px; - top: 50%; - margin-top: -10px; - width: 0; - height: 0; - border-style: solid; - border-width: 10px 10px 10px 0; - border-color: transparent var(--white) transparent; + left: 1px; + z-index: 9999999; +} + +.fbc-chevron-arrow-right { + transform: rotate(180deg); + left: -1px; } -.fbc-badge-prompt-align-right .fbc-badge-prompt { +.fbc-chevron-arrow-top { + transform: rotate(90deg); + top: -4px; +} + +.fbc-badge-prompt-align-right iframe { left: auto; right: calc( 100% + 20px); } -.fbc-badge-prompt-align-right .fbc-badge-prompt:after { +.fbc-badge-prompt-align-right iframe { left: auto; right: -10px; border-width: 10px 0 10px 10px; } -.fbc-badge-prompt-align-top .fbc-badge-prompt { +.fbc-badge-prompt-align-top iframe { top: -7px; transform: none; } -.fbc-badge-prompt-align-top .fbc-badge-prompt:after { +.fbc-badge-prompt-align-top iframe:after { top: 16px; } -.fbc-badge-prompt-align-bottom .fbc-badge-prompt { +.fbc-badge-prompt-align-bottom iframe { top: auto; bottom: -20px; transform: none; } -.fbc-badge-prompt-align-bottom .fbc-badge-prompt:after { +.fbc-badge-prompt-align-bottom iframe:after { display: none; } -.fbc-badge-prompt h1 { +.fbc-badge-prompt h1, .fbc-title { all: unset; letter-spacing: -0.1px; font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; font-size: 13px; font-weight: 700; - height: 40px; display: flex; width: 100%; margin: 0; - padding: 0; + line-height: 0; + padding: 15px 0 20px 0; + border-bottom: 1px solid var(--light-gray); justify-content: center; align-items: center; text-align: center; - border-bottom: 1px solid #E9E9E9; - background: white; - color: var(--black); + color: var(--primaryText); } -.fbc-badge-prompt-contents { - padding: 20px; - background: var(--white); +.fbc-badge-prompt p { + line-height: 140%; } -.fbc-badge-prompt p { - all: unset; - font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; - display: block; - padding: 0 0 20px; - margin: 0; - font-size: 13px; - line-height: 17px; - color: var(--black); +.fbc-subtitle-login, .fbc-subtitle-email { + color: var(--primaryText); + font-weight: 500; } -.fbc-badge-prompt p:first-of-type { - font-weight: 600; +.fbc-badge-prompt-contents { + padding: 4px 8px; + background: var(--white); } .fbc-badge-prompt form { @@ -227,58 +251,63 @@ align-items: center; } -.fbc-badge-prompt input { - all: unset; - margin: 0 5px 0 0; - appearance: checkbox; - -moz-appearance: checkbox; - cursor: pointer; - width: 13px; +.fbc-badge-prompt-dontShowAgain-checkbox { + gap: 8px; + margin-bottom: 16px; +} + +.fbc-badge-prompt input[type=checkbox] { + -webkit-appearance: none; + -moz-appearance: none; + -o-appearance: none; + appearance: none; + margin: 0; + background-color: var(--light-gray); + border: 1px solid #8F8F9D; + border-radius: 2px; height: 13px; + width: 13px; line-height: 14px; - display: inline-block; + cursor: pointer; +} + +.fbc-badge-prompt input[type=checkbox]:checked { + appearance: checkbox; } .fbc-badge-prompt label { - all: unset; - font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; - font-size: 12px; - line-height: 16px; - color: #0C0C0D; + color: var(--secondaryText); margin: 0; - font-weight: normal; cursor: pointer; - line-height: 20px; } .fbc-badge-prompt-dontShowAgain-checkbox { display: flex; align-items: center; + gap: 8px; } .fbc-badge-prompt-buttons { - position: absolute; - bottom: 0.15px; - height: 40px; width: 100%; z-index: 0; + display: flex; + gap: 8px; + justify-content: end; } .fbc-badge-prompt-buttons button { font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; - all: unset; display: inline-block; - height: 40px; - width: 50%; + width: auto; + padding: 8px 16px; + border-radius: 4px; appearance: none; border: 0; - letter-spacing: -0.1px; font-size: 13px; - line-height: 17px; - background-color: #F2F2F2; - border-top: 1px solid #E9E9E9; + font-weight: 500; + color: var(--primaryText); + background: var(--light-gray); transition: var(--transition); - color: var(--black); cursor: pointer; text-align: center; } @@ -289,25 +318,8 @@ .fbc-badge-prompt-buttons button:hover { background: #E9E9E9; - color: var(--black); -} - -.fbc-badge-prompt-buttons button:last-child { - border-top: 1px solid var(--blue70); - background: var(--blue60); - color: var(--white); -} - -.fbc-badge-prompt-buttons button:last-child:focus { - border-top: 1px solid var(--blue80); } -.fbc-badge-prompt-buttons button:last-child:hover { - background: var(--blue70); - color: var(--white); -} - - /* Tooltip */ .fbc-badge-tooltip { display: none; @@ -337,13 +349,6 @@ bottom: 25%; } -/* .fbc-badge-prompt-align-right .fbc-badge-prompt { - left: auto; - right: calc( 100% + 20px); +.is-hidden { + display: none; } - -.fbc-badge-prompt-align-right .fbc-badge-prompt:after { - left: auto; - right: -10px; - border-width: 10px 0 10px 10px; -} */ diff --git a/src/content_script.js b/src/content_script.js index 14d10006..2b7777f2 100755 --- a/src/content_script.js +++ b/src/content_script.js @@ -91,7 +91,7 @@ async function getLocalStorageSettingFromBackground(setting) { return backgroundResp; } -function isFixed (elem) { +function isFixed(elem) { do { if (getComputedStyle(elem).position == "fixed") return true; } while ((elem = elem.offsetParent)); @@ -99,12 +99,8 @@ function isFixed (elem) { } const fragmentClasses = ["fbc-badge-fence", "fbc-badge-tooltip", "fbc-badge-prompt"]; -const htmlBadgeFragmentPromptParagraphStrings = [ browser.i18n.getMessage("inPageUI-tooltip-prompt-p1"), browser.i18n.getMessage("inPageUI-tooltip-prompt-p2") ]; -const htmlEmailBadgeFragmentPromptParagraphStrings = [ browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p1"), browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p2") ]; -const htmlBadgeFragmentPromptButtonStrings = ["btn-cancel", "btn-allow"]; -const htmlEmailBadgeFragmentPromptButtonStrings = ["btn-relay-dismiss", "btn-relay-try"]; -function getTooltipFragmentStrings (socialAction) { +function getTooltipFragmentStrings(socialAction) { switch (socialAction) { case "login": return browser.i18n.getMessage("inPageUI-tooltip-button-login"); @@ -138,7 +134,7 @@ async function updateSettings() { let localStorage = await browser.storage.local.get(); - if(!localStorage.settings) { + if (!localStorage.settings) { localStorage.settings = {}; } @@ -152,9 +148,7 @@ async function updateSettings() { await settingsCheckboxListener(); } - - -function settingsCheckboxListener(){ +function settingsCheckboxListener() { const checkboxes = document.querySelectorAll(".settings-checkbox"); checkboxes.forEach((item) => { @@ -168,7 +162,7 @@ function settingsCheckboxListener(){ }); } -function createBadgeFragment (socialAction) { +function createBadgeFragment(socialAction) { const htmlBadgeFragment = document.createDocumentFragment(); for (let className of fragmentClasses) { @@ -179,120 +173,220 @@ function createBadgeFragment (socialAction) { // Create Tooltip const htmlBadgeFragmentTooltipDiv = htmlBadgeFragment.querySelector(".fbc-badge-tooltip"); - htmlBadgeFragmentTooltipDiv.appendChild( document.createTextNode( getTooltipFragmentStrings(socialAction) ) ); + htmlBadgeFragmentTooltipDiv.appendChild(document.createTextNode(getTooltipFragmentStrings(socialAction))); - // Create Prompt/Allow Dialog - if (socialAction === "login"){ - const htmlBadgeFragmentPromptDiv = htmlBadgeFragment.querySelector(".fbc-badge-prompt"); + // Create Empty Wrapper Div + const htmlBadgeWrapperDiv = document.createElement("div"); + htmlBadgeWrapperDiv.appendChild(htmlBadgeFragment); - const htmlBadgeFragmentPromptH1 = document.createElement("h1"); + return htmlBadgeWrapperDiv; +} + +function shouldBadgeBeSmall(ratioCheck, itemHeight) { + if (ratioCheck < 1.1) { + return true; + } else if (itemHeight < 39) { + return true; + } + return false; +} - htmlBadgeFragmentPromptH1.appendChild(document.createTextNode( browser.i18n.getMessage("facebookContainer") )); - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptH1); +function createElementWithClassList(elemType, elemClass) { + const newElem = document.createElement(elemType); + newElem.classList.add(elemClass); + return newElem; +} - const htmlBadgeFragmentPromptContents = document.createElement("div"); - htmlBadgeFragmentPromptContents.className = "fbc-badge-prompt-contents"; +function buildInpageIframe(socialAction, fbcIframeHeight) { - for (let promptParagraphString of htmlBadgeFragmentPromptParagraphStrings) { - const paragraph = document.createElement("p"); - paragraph.appendChild(document.createTextNode(promptParagraphString)); - htmlBadgeFragmentPromptContents.appendChild(paragraph); - } + const iframe = document.createElement("iframe"); + iframe.src = browser.runtime.getURL(`inpage-content.html?action=${socialAction}`); + iframe.width = 350; + // This height is derived from the Figma file. However, this is just the starting instance of the iframe/inpage menu. After it's built out, it resizes itself based on the inner contents. + iframe.height = fbcIframeHeight; + iframe.title = browser.i18n.getMessage("facebookContainer"); + iframe.tabIndex = 0; + iframe.ariaHidden = "false"; + iframe.id = socialAction; + iframe.classList.add("fbc-content-box"); - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptContents); + return iframe; +} - const htmlBadgeFragmentPromptButtonDiv = document.createElement("div"); - htmlBadgeFragmentPromptButtonDiv.className = "fbc-badge-prompt-buttons"; +// function setIframeSrcValue(val) { +// // return val; +// const iframeVal = val; +// // return val; +// } - for (let buttonString of htmlBadgeFragmentPromptButtonStrings) { - const button = document.createElement("button"); - button.className = "fbc-badge-prompt-" + buttonString; - button.appendChild(document.createTextNode( browser.i18n.getMessage(buttonString) )); - htmlBadgeFragmentPromptButtonDiv.appendChild(button); - } +// function getIframeSrcValue() { +// const val = getIframeSrcValue(); +// // console.log(val); +// // return "hello"; +// } - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptButtonDiv); - } else if (socialAction === "email") { - const htmlBadgeFragmentPromptDiv = htmlBadgeFragment.querySelector(".fbc-badge-prompt"); +function injectIframeOntoPage(socialAction, fbcIframeHeight) { + const fbcContent = buildInpageIframe(socialAction, fbcIframeHeight); - const htmlBadgeFragmentPromptH1 = document.createElement("h1"); + const fbcWrapper = createElementWithClassList( + "div", + "fbc-wrapper" + ); + const fbcChevron = createElementWithClassList( + "div", + "fbc-iframe-chevron" + ); - htmlBadgeFragmentPromptH1.appendChild(document.createTextNode( browser.i18n.getMessage("facebookContainer") )); - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptH1); + fbcWrapper.appendChild(fbcChevron); + fbcWrapper.appendChild(fbcContent); - const htmlBadgeFragmentPromptContents = document.createElement("div"); - htmlBadgeFragmentPromptContents.className = "fbc-badge-prompt-contents"; + return fbcWrapper; +} - for (let promptParagraphString of htmlEmailBadgeFragmentPromptParagraphStrings) { - const paragraph = document.createElement("p"); - paragraph.appendChild(document.createTextNode(promptParagraphString)); - htmlBadgeFragmentPromptContents.appendChild(paragraph); - } +function positionIframe(fencePos) { + const fencePosition = fencePos.getBoundingClientRect(); + const iframeBox = document.querySelector(".fbc-content-box"); + const iframeWrapper = document.querySelector(".fbc-wrapper"); + const iframeElement = iframeWrapper.getElementsByTagName("iframe"); + const iframeChevron = document.querySelector(".fbc-iframe-chevron"); - const dontShowAgainCheckboxForm = document.createElement("div"); - dontShowAgainCheckboxForm.className = "fbc-badge-prompt-dontShowAgain-checkbox"; - const dontShowAgainCheckboxInput = document.createElement("input"); - dontShowAgainCheckboxInput.type = "checkbox"; - dontShowAgainCheckboxInput.id = "hideRelayEmailBadges"; - dontShowAgainCheckboxInput.classList.add("fbc-badge-prompt-dontShowAgain-checkbox-input", "settings-checkbox"); - const dontShowAgainCheckboxLabel = document.createElement("label"); - dontShowAgainCheckboxLabel.htmlFor = "hideRelayEmailBadges"; - const dontShowAgainCheckboxText = document.createTextNode( browser.i18n.getMessage("inPageUI-tooltip-prompt-checkbox") ); + const offsetX = 20; + const offsetY = 55; - dontShowAgainCheckboxLabel.appendChild(dontShowAgainCheckboxText); - dontShowAgainCheckboxForm.appendChild(dontShowAgainCheckboxInput); - dontShowAgainCheckboxForm.appendChild(dontShowAgainCheckboxLabel); + const iframePaddingAllowance = iframeBox.offsetWidth + offsetX; - htmlBadgeFragmentPromptContents.appendChild(dontShowAgainCheckboxForm); + const iconRightAllowance = window.innerWidth - fencePosition.x + fencePos.offsetWidth; + const iconLeftAllowance = window.innerWidth - iconRightAllowance; - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptContents); + if (iconRightAllowance > iframePaddingAllowance || iconLeftAllowance > iframePaddingAllowance) { + return desktopOrientation(iframeBox, iframeChevron, offsetY, fencePosition, iframePaddingAllowance, fencePos, offsetX); + } + return mobileOrientation(iframeElement, iframeChevron, iframeBox, fencePosition, offsetY); +} - const htmlBadgeFragmentPromptButtonDiv = document.createElement("div"); - htmlBadgeFragmentPromptButtonDiv.className = "fbc-badge-prompt-buttons"; +function mobileOrientation(iframeElement, iframeChevron, iframeBox, fencePosition, offsetY){ + // Mobile Values + const xPosMobile = fencePosition.x; + const yPosMobile = fencePosition.y + offsetY; - for (let buttonString of htmlEmailBadgeFragmentPromptButtonStrings) { - const button = document.createElement("button"); - button.className = "fbc-badge-prompt-" + buttonString; - button.appendChild(document.createTextNode( browser.i18n.getMessage(buttonString) )); - htmlBadgeFragmentPromptButtonDiv.appendChild(button); + for (const panels of iframeElement) { + panels.width = window.innerWidth; + if (window.innerWidth > 480) { + panels.width = 350; } + } + + iframeChevron.classList.add("fbc-chevron-arrow-top"); + iframeBox.style.marginTop = `${yPosMobile}px`; + + const xPosChevronMobile = xPosMobile; + const yPosChevronMobile = yPosMobile - iframeChevron.offsetWidth; - htmlBadgeFragmentPromptDiv.appendChild(htmlBadgeFragmentPromptButtonDiv); + iframeChevron.style.marginLeft = `${xPosChevronMobile}px`; + iframeChevron.style.marginTop = `${yPosChevronMobile}px`; +} + +function desktopOrientation(iframeBox, iframeChevron, offsetY, fencePosition, iframePaddingAllowance, fencePos, offsetX) { + // Desktop Values + const xRight = fencePosition.x + offsetX + fencePos.offsetWidth; + const xLeft = fencePosition.x - iframePaddingAllowance; + const yPos = fencePosition.y - offsetY; + + // Position iframe relative to FBC Icon + iframeBox.style.marginLeft = `${xRight}px`; + iframeBox.style.marginTop = `${yPos}px`; + + // Add Chevron (Default left arrow) + const xPosChevron = xRight - iframeChevron.offsetWidth; + const yPosChevron = yPos + offsetY; + + iframeChevron.classList.remove("fbc-chevron-arrow-top"); + iframeChevron.style.marginLeft = `${xPosChevron}px`; + iframeChevron.style.marginTop = `${yPosChevron}px`; + + const calculateOffsetDiff = window.innerWidth - fencePosition.x; + + // Flip the iframe to show on the left side when icon is too close to the edge + if (iframePaddingAllowance > calculateOffsetDiff) { + iframeBox.style.marginLeft = `${xLeft}px`; + iframeChevron.classList.add("fbc-chevron-arrow-right"); + iframeChevron.style.marginLeft = `${xPosChevron - fencePos.offsetWidth - iframeChevron.offsetWidth - offsetX}px`; + return; } + return iframeChevron.classList.remove("fbc-chevron-arrow-right"); +} - // Create Empty Wrapper Div - const htmlBadgeWrapperDiv = document.createElement("div"); - htmlBadgeWrapperDiv.appendChild(htmlBadgeFragment); - return htmlBadgeWrapperDiv; + +function openInputPrompt(socialAction, fencePos, target, fbcIframeHeight) { + const iframeSrcVal = buildInpageIframe(socialAction, fbcIframeHeight).src; + const hasFbcWrapper = document.querySelector(".fbc-wrapper"); + + if (!hasFbcWrapper) { + document.body.appendChild(injectIframeOntoPage(socialAction, fbcIframeHeight)); + positionIframe(fencePos); + ["resize", "scroll"].forEach(function (evt) { + if (document.querySelector(".fbc-wrapper")) { + window.addEventListener(evt, () => { + positionIframe(fencePos); + }); + + } + }); + postMessageListeners(iframeSrcVal, target); + } + hasFbcWrapper.remove(); } -function shouldBadgeBeSmall(ratioCheck, itemHeight) { - if (ratioCheck < 1.1) { - return true; - } else if (itemHeight < 39) { +function postMessageListeners(iframeSrcVal, target){ + + window.addEventListener("message", (e) => { + if ( + e.data === "allowTriggered" + && iframeSrcVal.includes(e.origin) + ){ + target.click(); + } + }); + + window.addEventListener("message", (e) => { + if ( + e.data === "closeTheInjectedIframe" + && iframeSrcVal.includes(e.origin) + ) { + closeIframe(); + } + }); + + window.addEventListener("message", (e) => { + if ( + e.data === "checkboxTicked" + && iframeSrcVal.includes(e.origin) + && localStorageAvailable() + ) { + + setLocalStorageTickedCheckBox(); + } + }); +} + +async function localStorageAvailable() { + if (typeof(Storage) !== "undefined") { return true; } return false; } -function openLoginPrompt(parent, el, htmlBadgeDiv) { - parent.classList.toggle("active"); - positionPrompt( htmlBadgeDiv ); - el.classList.toggle("js-fbc-prompt-active"); - document.body.classList.toggle("js-fbc-prompt-active"); - htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-cancel").focus(); +function setLocalStorageTickedCheckBox() { + localStorage.setItem("checkbox-ticked", true); } -function addFacebookBadge (target, badgeClassUId, socialAction) { + +function addFacebookBadge(target, badgeClassUId, socialAction) { // Detect if target is visible const htmlBadgeDiv = createBadgeFragment(socialAction); - const htmlBadgeFragmentPromptButtonCancel = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-cancel"); - const htmlBadgeFragmentPromptButtonAllow = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-allow"); - const htmlEmailBadgeFragmentPromptButtonDismiss = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-relay-dismiss"); - const htmlEmailBadgeFragmentPromptButtonTry = htmlBadgeDiv.querySelector(".fbc-badge-prompt-btn-relay-try"); const htmlBadgeFragmentFenceDiv = htmlBadgeDiv.querySelector(".fbc-badge-fence"); htmlBadgeDiv.className = "fbc-badge " + badgeClassUId; @@ -304,125 +398,66 @@ function addFacebookBadge (target, badgeClassUId, socialAction) { const ratioCheck = (itemWidth / itemHeight); - let allowClickSwitch = false; const badgeSmallSwitch = shouldBadgeBeSmall(ratioCheck, itemHeight); if (badgeSmallSwitch) { htmlBadgeDiv.classList.add("fbc-badge-small"); } - positionFacebookBadge(target, badgeClassUId, itemWidth, badgeSmallSwitch); - - // Show/hide prompt if login element - if (socialAction === "login"){ - target.addEventListener("click", (e) => { - if (!e.isTrusted) { - // The click was not user generated so ignore - return false; - } - - if (allowClickSwitch) { - // Button disabled. Either will trigger new HTTP request or page will refresh. - setTimeout(()=>{ - location.reload(true); - }, 250); - return; - } else { - // Click badge, button disabled - e.preventDefault(); - e.stopPropagation(); - openLoginPrompt(htmlBadgeFragmentFenceDiv.parentElement, target, htmlBadgeDiv); - } - }); + const fbcIframeHeightLogin = 230; + const fbcIframeHeightEmail = 240; + switch (socialAction) { + case "login": htmlBadgeFragmentFenceDiv.addEventListener("click", (e) => { if (!e.isTrusted) { // The click was not user generated so ignore return false; } - - e.preventDefault(); - openLoginPrompt(e.target.parentElement, target, htmlBadgeDiv); - }); - - // Add to Container "Allow" - htmlBadgeFragmentPromptButtonAllow.addEventListener("click", (e) => { - if (!e.isTrusted) { - // The click was not user generated so ignore + + else { e.preventDefault(); - return false; + e.stopPropagation(); + openInputPrompt("login", e.target.parentElement, target, fbcIframeHeightLogin); } - - allowClickSwitch = true; - browser.runtime.sendMessage({ - message: "add-domain-to-list" - }); - - target.click(); }); - - // Close prompt - htmlBadgeFragmentPromptButtonCancel.addEventListener("click", (e) => { - if (!e.isTrusted) { - // The click was not user generated so ignore - return false; + break; + case "email": + // Remove the email prompt when the "do not show me again" checkbox is ticked for the first time + window.addEventListener("message", () => { + if ( + localStorage.getItem("checkbox-ticked") === "true" + ) { + htmlBadgeFragmentFenceDiv.remove(); + closeIframe(); } - e.preventDefault(); - document.body.classList.remove("js-fbc-prompt-active"); - document.querySelector(".fbc-has-badge.js-fbc-prompt-active").classList.remove("js-fbc-prompt-active"); - e.target.parentElement.parentNode.parentNode.classList.remove("active"); }); - } else if (socialAction === "email") { htmlBadgeFragmentFenceDiv.addEventListener("click", (e) => { if (!e.isTrusted) { // The click was not user generated so ignore return false; } e.preventDefault(); - e.target.parentElement.classList.toggle("active"); - positionPrompt( htmlBadgeDiv ); - target.classList.toggle("js-fbc-prompt-active"); - document.body.classList.toggle("js-fbc-prompt-active"); - }); - - // Add to Container "Allow" - htmlEmailBadgeFragmentPromptButtonTry.addEventListener("click", (e) => { - if (!e.isTrusted) { - // The click was not user generated so ignore - return false; - } - - - window.open("https://relay.firefox.com/?utm_source=firefox&utm_medium=addon&utm_campaign=Facebook%20Container&utm_content=Try%20Firefox%20Relay"); + e.stopPropagation(); + openInputPrompt("email", e.target.parentElement, target, fbcIframeHeightEmail); }); - - // Dismiss email/relay prompt - htmlEmailBadgeFragmentPromptButtonDismiss.addEventListener("click", (e)=>{ - if (!e.isTrusted) { - // The click was not user generated so ignore - return false; - } - - closePrompt(); - const activeBadge = document.querySelector("." + badgeClassUId); - activeBadge.style.display = "none"; - }, false); - - } else if (socialAction === "share-passive") { + break; + case "share-passive": htmlBadgeDiv.classList.add("fbc-badge-share-passive", "fbc-badge-share"); - - shareBadgeEventListenerInit(target, htmlBadgeDiv, {allowClickThrough: true}); - - } else if (socialAction === "share") { + shareBadgeEventListenerInit(target, htmlBadgeDiv, { allowClickThrough: true }); + break; + case "share": htmlBadgeDiv.classList.add("fbc-badge-share"); - shareBadgeEventListenerInit(target, htmlBadgeDiv, {allowClickThrough: true}); - } + shareBadgeEventListenerInit(target, htmlBadgeDiv, { allowClickThrough: true }); + break; + } // Applies to both! htmlBadgeFragmentFenceDiv.addEventListener("mouseenter", () => { - positionPrompt( htmlBadgeDiv ); + positionPrompt(htmlBadgeDiv); }); + positionFacebookBadge(target, badgeClassUId, itemWidth, badgeSmallSwitch); } // Add Event Listener actions/hooks to share badges @@ -437,9 +472,9 @@ function shareBadgeEventListenerInit(target, htmlBadgeDiv, options) { target.addEventListener("mouseover", () => { target.classList.add("fbc-badge-tooltip-active"); htmlBadgeDiv.classList.add("fbc-badge-tooltip-active"); - setTimeout( ()=> { - positionPrompt( htmlBadgeDiv ); - }, 50 ); + setTimeout(() => { + positionPrompt(htmlBadgeDiv); + }, 50); }); target.addEventListener("mouseout", () => { @@ -448,34 +483,20 @@ function shareBadgeEventListenerInit(target, htmlBadgeDiv, options) { }); } -function findActivePrompt() { - const allBadges = document.querySelectorAll(".fbc-badge.active"); - for (let badge of allBadges) { - return badge; - } -} - -function closePrompt() { - const activePrompt = findActivePrompt(); - activePrompt.classList.remove("active"); - document.body.classList.remove("js-fbc-prompt-active"); - document.querySelector(".fbc-has-badge.js-fbc-prompt-active").classList.remove("js-fbc-prompt-active"); -} - -function positionPrompt ( activeBadge ) { +function positionPrompt(activeBadge) { const elemRect = activeBadge.getBoundingClientRect(); - if ( (window.innerWidth - elemRect.left) < 350 ) { + if ((window.innerWidth - elemRect.left) < 350) { activeBadge.classList.add("fbc-badge-prompt-align-right"); } const modifierClassList = ["fbc-badge-prompt-align-top", "fbc-badge-prompt-align-bottom", "fbc-badge-prompt-align-right"]; - if ( elemRect.top < 140 ) { + if (elemRect.top < 140) { activeBadge.classList.add("fbc-badge-prompt-align-top"); - } else if ( (window.innerHeight - elemRect.bottom) < 130 ) { + } else if ((window.innerHeight - elemRect.bottom) < 130) { activeBadge.classList.add("fbc-badge-prompt-align-bottom"); - } else if ( (window.innerWidth - elemRect.left) < 350 ) { + } else if ((window.innerWidth - elemRect.left) < 350) { activeBadge.classList.add("fbc-badge-prompt-align-right"); } else { activeBadge.classList.remove(...modifierClassList); @@ -491,30 +512,30 @@ function elementSizeOffsetXY(smallSwitch) { } function getOffsetsAndApplyClass(elemRect, bodyRect, target, htmlBadgeDiv) { - if ( !isFixed(target) && htmlBadgeDiv.classList.contains("fbc-badge-fixed") ) { + if (!isFixed(target) && htmlBadgeDiv.classList.contains("fbc-badge-fixed")) { htmlBadgeDiv.classList.remove("fbc-badge-fixed"); - } else if ( isFixed(target) ) { + } else if (isFixed(target)) { htmlBadgeDiv.classList.add("fbc-badge-fixed"); - return {offsetPosX: elemRect.left, offsetPosY: elemRect.top}; + return { offsetPosX: elemRect.left, offsetPosY: elemRect.top }; } else { // Removed left body offset calc as it doesn't apply // return {offsetPosX: elemRect.left - bodyRect.left, offsetPosY: elemRect.top - bodyRect.top}; - return {offsetPosX: elemRect.left, offsetPosY: elemRect.top + window.scrollY}; + return { offsetPosX: elemRect.left, offsetPosY: elemRect.top + window.scrollY }; } } function isVisible(target) { const currentComputedStyle = window.getComputedStyle(target, false); - const styleTransform = ( currentComputedStyle.getPropertyValue("transform") === "matrix(1, 0, 0, 0, 0, 0)" ); - const styleHidden = ( currentComputedStyle.getPropertyValue("visibility") === "hidden" ); - const styleDisplayNone = ( currentComputedStyle.getPropertyValue("display") === "none" ); + const styleTransform = (currentComputedStyle.getPropertyValue("transform") === "matrix(1, 0, 0, 0, 0, 0)"); + const styleHidden = (currentComputedStyle.getPropertyValue("visibility") === "hidden"); + const styleDisplayNone = (currentComputedStyle.getPropertyValue("display") === "none"); if (styleTransform || styleHidden || styleDisplayNone) return false; return true; } function checkVisibilityAndApplyClass(target, htmlBadgeDiv) { - if ( target === null ) { + if (target === null) { htmlBadgeDiv.classList.add("fbc-badge-disabled"); return false; } @@ -530,13 +551,13 @@ function checkVisibilityAndApplyClass(target, htmlBadgeDiv) { const { parentElement } = target; if (parentElement) { - if ( !isVisible(parentElement) ) { + if (!isVisible(parentElement)) { if (!htmlBadgeDivHasDisabledClass) { htmlBadgeDiv.classList.add("fbc-badge-disabled"); } return false; } else { - if ( htmlBadgeDivHasDisabledClass ) { + if (htmlBadgeDivHasDisabledClass) { htmlBadgeDiv.classList.remove("fbc-badge-disabled"); } return true; @@ -545,13 +566,13 @@ function checkVisibilityAndApplyClass(target, htmlBadgeDiv) { const { offsetParent } = target; if (offsetParent) { - if ( !isVisible(parentElement)) { + if (!isVisible(parentElement)) { if (!htmlBadgeDivHasDisabledClass) { htmlBadgeDiv.classList.add("fbc-badge-disabled"); } return false; } else { - if ( htmlBadgeDivHasDisabledClass ) { + if (htmlBadgeDivHasDisabledClass) { htmlBadgeDiv.classList.remove("fbc-badge-disabled"); } return true; @@ -565,7 +586,7 @@ function determineContainerClientRect() { const bodyHeight = document.querySelector("body").offsetHeight; if (htmlHeight === bodyHeight) { return document.body.getBoundingClientRect(); - } else if ( htmlHeight < bodyHeight ) { + } else if (htmlHeight < bodyHeight) { return document.querySelector("html").getBoundingClientRect(); } else { return document.body.getBoundingClientRect(); @@ -576,9 +597,9 @@ function calcZindex(target) { // Loop through each parent, getting Zindex (if its a number). // As it finds them, it grabs the highest/largest. let zIndexLevel = 0; - for ( ; target && target !== document; target = target.parentNode ) { + for (; target && target !== document; target = target.parentNode) { const zindex = document.defaultView.getComputedStyle(target).getPropertyValue("z-index"); - if ( !isNaN(zindex) ) { + if (!isNaN(zindex)) { if (zIndexLevel < zindex) { zIndexLevel = zindex; } @@ -591,7 +612,7 @@ function calcZindex(target) { } -function positionFacebookBadge (target, badgeClassUId, targetWidth, smallSwitch) { +function positionFacebookBadge(target, badgeClassUId, targetWidth, smallSwitch) { // Check for Badge element and select it if (!badgeClassUId) { @@ -629,7 +650,7 @@ function positionFacebookBadge (target, badgeClassUId, targetWidth, smallSwitch) const elemRect = target.getBoundingClientRect(); // Determine if target element is fixed, will resets or applies class and set appor offset. - const {offsetPosX, offsetPosY} = getOffsetsAndApplyClass(elemRect, bodyRect, target, htmlBadgeDiv); + const { offsetPosX, offsetPosY } = getOffsetsAndApplyClass(elemRect, bodyRect, target, htmlBadgeDiv); const htmlBadgeDivPosX = (offsetPosX + targetWidth) - elementSizeOffsetX; const htmlBadgeDivPosY = offsetPosY - elementSizeOffsetY; @@ -642,6 +663,7 @@ function positionFacebookBadge (target, badgeClassUId, targetWidth, smallSwitch) htmlBadgeDiv.style.zIndex = targetZindex; htmlBadgeDiv.style.left = htmlBadgeDivPosX + "px"; htmlBadgeDiv.style.top = htmlBadgeDivPosY + "px"; + } function isPinterest(target) { @@ -679,6 +701,7 @@ function patternDetection(selectionArray, socialActionIntent, target) { addFacebookBadge(item, itemUIDClassTarget, socialAction); item.classList.add("fbc-has-badge"); item.classList.add(itemUIDClassName); + } } } @@ -698,7 +721,10 @@ async function detectFacebookOnPage(target) { // Check if user dismissed the Relay prompt const relayAddonPromptDismissed = await getLocalStorageSettingFromBackground("hideRelayEmailBadges"); - if (relayAddonPromptDismissed && !relayAddonEnabled && !relayAddonPromptDismissed.hideRelayEmailBadges && trackersDetectedOnCurrentPage) { + + const checkboxTicked = localStorage.getItem("checkbox-ticked"); + + if (relayAddonPromptDismissed && !relayAddonEnabled && !relayAddonPromptDismissed.hideRelayEmailBadges && trackersDetectedOnCurrentPage && checkboxTicked !== "true") { patternDetection(EMAIL_PATTERN_DETECTION_SELECTORS, "email", target); updateSettings(); } @@ -709,7 +735,7 @@ async function detectFacebookOnPage(target) { // Resize listener. Only fires after window stops resizing. let resizeId; -window.addEventListener("resize", ()=> { +window.addEventListener("resize", () => { clearTimeout(resizeId); resizeId = setTimeout(screenUpdate, 25); }); @@ -717,9 +743,9 @@ window.addEventListener("resize", ()=> { // On Scroll, checking for position fixed on elements let ticking = false; -window.addEventListener("scroll", ()=> { +window.addEventListener("scroll", () => { if (!ticking) { - window.requestAnimationFrame(()=> { + window.requestAnimationFrame(() => { screenUpdate(); ticking = false; }); @@ -729,7 +755,7 @@ window.addEventListener("scroll", ()=> { }); // Fires on screen Resize or Scroll -function screenUpdate () { +function screenUpdate() { if (checkForTrackers) { for (let item of facebookDetectedElementsArr) { positionFacebookBadge(item); @@ -737,32 +763,26 @@ function screenUpdate () { } } -let escapeListerenInitialized = false; - -function escapeKeyListener () { - if (!escapeListerenInitialized) { - escapeListerenInitialized = true; - - document.body.addEventListener("keydown", function(e) { - if(e.key === "Escape" && document.body.classList.contains("js-fbc-prompt-active")) { - closePrompt(); - } - }); - } +function escapeKeyListener() { + document.body.addEventListener("keydown", function (e) { + if (e.key === "Escape" && document.querySelector(".fbc-wrapper")) { + closeIframe(); + } + }); } -window.addEventListener("click", function(e){ - if ( document.body.classList.contains("js-fbc-prompt-active") ) { - const activePrompt = findActivePrompt(); - const activePromptTarget = document.querySelector(".fbc-has-badge.js-fbc-prompt-active"); - if ( !activePrompt.contains(e.target) && !activePromptTarget.contains(e.target) ) { - closePrompt(); - } - } else { - // contentScriptInit(true); +window.addEventListener("click", function () { + if (this.document.querySelector(".fbc-wrapper")) { + closeIframe(); } }); + +function closeIframe() { + const hasFbcWrapper = document.querySelector(".fbc-wrapper"); + hasFbcWrapper.remove(); +} + /* function removeBadges() { for (let itemClass of facebookDetectedElementsArr) { @@ -779,7 +799,7 @@ function removeBadges() { let checkForTrackers = true; browser.runtime.onMessage.addListener(message => { - if ( message["msg"] == "allowed-facebook-subresources" || message["msg"] == "facebook-domain" ) { + if (message["msg"] == "allowed-facebook-subresources" || message["msg"] == "facebook-domain") { // Flags function to not add badges to page checkForTrackers = false; } else { @@ -788,7 +808,7 @@ browser.runtime.onMessage.addListener(message => { }, 10); } - return Promise.resolve({response: "content_script onMessage listener"}); + return Promise.resolve({ response: "content_script onMessage listener" }); }); // let callCount = 0; @@ -895,8 +915,8 @@ function contentScriptSetTimeout() { // console.timeStart('contentScriptSetTimeout'); contentScriptDelay = Math.ceil(contentScriptDelay * 2); contentScriptInit(false); - if ( contentScriptDelay > 999999 ) { + if (contentScriptDelay > 999999) { return false; } setTimeout(contentScriptSetTimeout, contentScriptDelay); -} +} \ No newline at end of file diff --git a/src/inpage-content.html b/src/inpage-content.html new file mode 100644 index 00000000..f3d2befa --- /dev/null +++ b/src/inpage-content.html @@ -0,0 +1,51 @@ + + + + + + Facebook Container + + + + + + +
+

+
+ +
+ + + + + +
+ + + + diff --git a/src/inpage-content.js b/src/inpage-content.js new file mode 100644 index 00000000..178505c5 --- /dev/null +++ b/src/inpage-content.js @@ -0,0 +1,94 @@ + +const url = window.location.href; + +const action = new URL(url).searchParams.get("action"); + +const loginItem = document.getElementById("fbc-login"); +const emailItem = document.getElementById("fbc-email"); + +if (action === "login") { + loginItem.classList.remove("is-hidden"); +} + +if (action === "email") { + emailItem.classList.remove("is-hidden"); +} + +// Header String +const fbcTitle = document.querySelector(".fbc-title"); +fbcTitle.textContent = browser.i18n.getMessage("facebookContainer"); + +// Login Strings +const fbcPromptSubtitleLogin = document.querySelector(".fbc-subtitle-login"); +fbcPromptSubtitleLogin.textContent = browser.i18n.getMessage("inPageUI-tooltip-prompt-p1"); + +const fbcPromptBodyTextLogin = document.querySelector(".fbc-bodytext-login"); +fbcPromptBodyTextLogin.textContent = browser.i18n.getMessage("inPageUI-tooltip-prompt-p2"); + +const fbcPromptAllow = document.querySelector(".fbc-badge-prompt-btn-allow"); +const fbcPromptCancel = document.querySelector(".fbc-badge-prompt-btn-cancel"); + +fbcPromptAllow.textContent = browser.i18n.getMessage("btn-allow"); +fbcPromptCancel.textContent = browser.i18n.getMessage("btn-cancel"); + +fbcPromptAllow.addEventListener("click", (e) => { + if (!e.isTrusted) { + // The click was not user generated so ignore + e.preventDefault(); + return false; + } + // allowClickSwitch = true; + browser.runtime.sendMessage({ + message: "add-domain-to-list" + }); + + // Launch facebook authentication + parent.postMessage("allowTriggered", "*"); + +}); + +// Email Strings +const fbcEmailSubtitleLogin = document.querySelector(".fbc-subtitle-email"); +fbcEmailSubtitleLogin.textContent = browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p1"); + +const fbcEmailBodyTextLogin = document.querySelector(".fbc-bodytext-email"); +fbcEmailBodyTextLogin.textContent = browser.i18n.getMessage("inPageUI-tooltip-email-prompt-p2"); + +const fbcEmailCheckbox = document.querySelector(".fbc-email-checkbox"); +fbcEmailCheckbox.textContent = browser.i18n.getMessage("inPageUI-tooltip-prompt-checkbox"); + +const fbcEmailAllow = document.querySelector(".fbc-badge-email-btn-cta-fx-relay"); +const fbcEmailCancel = document.querySelector(".fbc-badge-email-btn-dismiss"); + +fbcEmailAllow.textContent = browser.i18n.getMessage("btn-relay-try"); +fbcEmailCancel.textContent = browser.i18n.getMessage("btn-relay-dismiss"); + +// Checkbox +const fbcCheckboxes = document.querySelectorAll(".settings-checkbox"); + +fbcCheckboxes.forEach(e => { + e.addEventListener("change", () => { + parent.postMessage("checkboxTicked", "*"); + }); +}); + +// Launch Relay when Try Relay is clicked +fbcEmailAllow.addEventListener("click", (e) => { + if (!e.isTrusted) { + // The click was not user generated so ignore + return false; + } + window.open("https://relay.firefox.com/?utm_source=firefox&utm_medium=addon&utm_campaign=Facebook%20Container&utm_content=Try%20Firefox%20Relay"); +}); + +// // Remove popup when cancel/dismiss is clicked +[fbcPromptCancel, fbcEmailCancel].forEach(e => { + e.addEventListener("click", () => { + parent.postMessage("closeTheInjectedIframe", "*"); + }); +}); + + + + +