Mini Kabibi Habibi
(function (wa, $) {
let ui = wa.UI = wa.UI || {},
_window = wa.Core.Window,
_instrument = wa.Utils.Instrument,
_settings = wa.Utils.Settings,
_external = wa.Utils.External;
ui.extension_install_toast = function () {
var $el = {
body: $("body"),
footer: $(".footer"),
container: $("#container"),
main: $(".main"),
oldImageContainer: $("#old-ff-image"),
newImageSection: $("#left-section"),
closeBtn: $("#close-icon"),
header: $("#wa-sstoast-heading"),
headerH1: $("#headerH1"),
desc1: $("#description-1"),
desc1P: $("#desc1P"),
desc2: $("#description-2"),
desc2P: $("#desc2P"),
divider: $(".main-divider"),
descContainer: $(".main-description-container"),
oldAcceptBtn: $("#button-accept"),
oldCancelBtn: $("#button-cancel"),
newBtnContainer: $("#new-buttons-container"),
newAcceptBtn: $("#new-button-accept"),
newCancelBtn: $("#new-button-cancel"),
newAcceptClass: $(".accept-button"),
textColor: $(".text_color"),
};
var stylingMap = {
normal: {
height: "265",
width: "485",
},
colorMode: {
height: "333",
width: "564",
}
};
var colorModeStylesMap = {
"dark": {
"imgCard": "#2E3036",
"contentCard": "#1F1F20",
"borderColor": "#1F1F20",
"text": "#D8DFF0",
"accept": "#5766D9",
"remindMe": "#A2A5E8",
"accept": "#5766D9",
},
"light": {
"imgCard": "#F2F2F2",
"contentCard": "#FFFFFF",
"borderColor": "#E8E8E8",
"text": "#343434",
"button": "#4258FF",
"remindMe": "#4258FF",
"accept": "#4258FF",
}
}
let browserCode = "(unknown)";
let toastColourMode = "default";
function getToastColourMode(enableColorMode, colourInPayload) {
if (!enableColorMode) {
return "default";
}
return (colourInPayload || "default").toLowerCase();
}
show = function () {
_window.ready(async function () {
chrome.webview.hostObjects.wa_external.log("_window.ready start");
console.log("_window.ready start");
// Get settings data
let toastCountSetting = "ff_extension_toast_count";
let toastCount = await _settings.get(toastCountSetting, "0") || 1;
let lang = wa.Utils.Lang(wa.Utils.Lang.ResType.WAIFF).get;
// Retrieve native settings
var payload = JSON.parse(await _external.getArgument("template_args"));
const enableColorMode = await chrome.webview.hostObjects.wa_external.GetSetting(false, "1", "enable_toast_color_mode");
const colorMode = payload["color_mode"] ? payload["color_mode"].toLowerCase() : null;
let styleMapping = enableColorMode ? stylingMap.colorMode : stylingMap.normal;
var closeBtnEnable = await chrome.webview.hostObjects.wa_external.GetSetting(false, "1", "firefox_onboarding_close_btn_enable");
init(lang, toastCount, document);
// Initialize toast
if(enableColorMode)
{
const colorModeStyles = colorModeStylesMap[colorMode];
initColorMode(colorModeStyles, closeBtnEnable, toastCount);
initBtnListeners(lang, toastCount, $el.newAcceptBtn, $el.newCancelBtn);
}
else
{
initBtnListeners(lang, toastCount, $el.oldAcceptBtn, $el.oldCancelBtn);
}
// Set toast window size
setSize({ width: styleMapping.width, height: styleMapping.height });
_window.show();
window.chrome.webview.postMessage("set_focus");
browserCode = await _instrument.getBrowserTypeCode();
// Send telemetry for toast impression
toastColourMode = getToastColourMode(enableColorMode, colorMode);
try {
var analyticsEvent = {
_event_name: "wa_extension_installation_toast_impression",
hit_label_20: browserCode.toLowerCase(),
hit_label_21: toastCount,
hit_label_22: toastColourMode,
hit_screen: '300.1.2.1-windows-onboarding-firefox-webpage'
};
_instrument.sendAnalyticsEvent(analyticsEvent);
}
catch(error) {
chrome.webview.hostObjects.wa_external.log("wa-ext-install-toast.js Window Ready Analytics Impression Exception " + error.message);
}
// Auto dismiss after 5 minutes
if(lessThanADaySinceInstall())
{
startAutoDismiss();
}
});
},
initColorMode = function (colorModeStyles, closeBtnEnable, toastCount) {
// Hide old elements and show new elements
$el.footer.addClass("hide");
$el.oldImageContainer.addClass("hide");
$el.divider.addClass("hide");
$el.newImageSection.removeClass("hide");
$el.newBtnContainer.removeClass("hide");
if(closeBtnEnable) {
$el.closeBtn.removeClass("hide");
// Move draggable away from close button
var imgWidth = $el.closeBtn[0].width * 1.5;
chrome.webview.hostObjects.wa_external.SetDraggableOffset(0, imgWidth + 20);
initCloseListener(toastCount);
}
// Change toast
$el.body.css("font-family", `"Poppins", "Open Sans", Arial, Helvetica, sans-serif`);
$el.container.addClass("colorModeToast");
$el.descContainer.removeClass("main-desc-normal");
$el.descContainer.addClass("main-desc-color-mode");
$el.main.css({ "height": "100%", "width": "413px", "border-radius": "0px 8px 8px 0px" });
// Change toast color
$el.newImageSection.css("background-color", colorModeStyles["imgCard"]);
$el.main.css("background-color", colorModeStyles["contentCard"]);
$el.textColor.css("color", colorModeStyles["text"]);
$el.newCancelBtn.css({ "background-color": colorModeStyles["contentCard"], "color": colorModeStyles["remindMe"] });
$el.newAcceptClass.css({ "border-color": colorModeStyles["accept"], "background-color": colorModeStyles["accept"] });
$el.container.css("border", `1px solid ${colorModeStyles["contentCard"]}`);
// Change text
$el.header.addClass("header");
$el.desc1.addClass("desc1");
$el.desc2.addClass("desc2");
$el.headerH1.css("margin", "0");
$el.desc1P.css("margin", "16px 0 24px 0");
$el.desc2P.css("margin", "0");
},
initCloseListener = function (toastCount) {
$el.closeBtn.click(function () {
try {
var analyticsEvent = {
_event_name : "wa_extension_installation_toast_interaction",
hit_label_19: "Closed_Explicit",
hit_label_20: browserCode.toLowerCase(),
hit_label_21: toastCount,
hit_label_22: toastColourMode,
hit_screen : "300.1.2.1-windows-onboarding-firefox-webpage"
};
_instrument.sendAnalyticsEvent(analyticsEvent);
} catch (error) {
chrome.webview.hostObjects.wa_external.log(
"wa-ext-install-toast.js Close‑btn Analytics Exception " + error.message);
}
_window.close();
});
}
initBtnListeners = function (lang, toastCount, acceptId, cancelId) {
let isVariant2 = (toastCount >= 3);
let acceptBtn = lang("WAIFF_BUTTON_ACCEPT");
let ignoreBtn = isVariant2 ? lang("WAIFF_BUTTON_DECLINE") : lang("WAIFF_BUTTON_REMIND_LATER");
acceptId.text(acceptBtn);
cancelId.text(ignoreBtn);
acceptId.click(function () {
install(toastCount);
});
cancelId.click(function () {
ignore(toastCount);
});
}
init = function (lang, toastCount) {
let isVariant2 = (toastCount >= 3);
let header = lang("WAIFF_TOAST_TITLE");
let description1 = isVariant2 ? lang("WAIFF_TOAST_DESC_1_COHORT_2") : lang("WAIFF_TOAST_DESC_1_COHORT_1");
let description2 = isVariant2 ? lang("WAIFF_TOAST_DESC_2_COHORT_2") : lang("WAIFF_TOAST_DESC_2_COHORT_1");
$el.header.text(header);
$el.desc1.text(description1);
$el.desc2.text(description2);
},
setSize = function (obj) {
_window.setWidth(obj.width);
_window.setHeight(obj.height);
},
install = function (toastCount) {
wa.Utils.External.actionEvent("install_extension", 0);
try {
var analyticsEvent = {
_event_name: "wa_extension_installation_toast_interaction",
hit_label_19: "Accepted",
hit_label_20: browserCode.toLowerCase(),
hit_label_21: toastCount,
hit_label_22: toastColourMode,
hit_screen: '300.1.2.1-windows-onboarding-firefox-webpage'
};
_instrument.sendAnalyticsEvent(analyticsEvent);
}
catch (error) {
chrome.webview.hostObjects.wa_external.log("wa-ext-install-toast.js Install Analytics Interaction Exception " + error.message);
}
_window.close();
},
ignore = function (toastCount) {
try {
var analyticsEvent = {
_event_name: "wa_extension_installation_toast_interaction",
hit_label_19: "Declined",
hit_label_20: browserCode.toLowerCase(),
hit_label_21: toastCount,
hit_label_22: toastColourMode,
hit_screen: '300.1.2.1-windows-onboarding-firefox-webpage'
};
_instrument.sendAnalyticsEvent(analyticsEvent);
}
catch (error) {
chrome.webview.hostObjects.wa_external.log("wa-ext-install-toast.js Ignore Analytics Interaction Exception " + error.message);
}
_window.close();
},
lessThanADaySinceInstall = async function () {
var installTime = await chrome.webview.hostObjects.wa_external.GetSetting(0, "1", "*InstallDate")
const now = Date.now();
const diffInMilliseconds = now - (installTime * 1000);
const diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24);
return diffInDays < 1;
},
startAutoDismiss = function () {
setTimeout(function () {
_window.close();
}, 300000); // 5 minutes
};
return {
show: show
}
};
}(window.WebAdvisor = window.WebAdvisor || {}, jQuery));
$(function () {
let toast = new WebAdvisor.UI.extension_install_toast();
toast.show();
chrome.webview.hostObjects.wa_external.log("after toast.show");
});
//06AE3C3CB4A3CD3D9336D56A425FE4ED24C7EA5AB999A99200EE9A97C197AE429E1794432F46DB2E8147CBC2C5E829C7784851628BB1FD41699DF28968B6842A++