biancadanforth / contextual-feature-recommendation Goto Github PK

PR #4 is a great improvement on a panel module for CFR (found in the ./xul-panel subfolder of this repo).

As it notes, there are still some shortcomings:

• Panel does not open correctly on Firefox startup (e.g. via npm run firefox) without a timer. Thankfully I don’t think there is a real use case for opening up a panel automatically without user input (except for testing), but could be worth investigating more.
  • Firefox developers have suggested I use Observer Notifications to listen for the "browser-delayed-startup-finished" topic before showing the panel, however, this event has already fired in the case of running npm run firefox (a temporary install of the addon on launch), and in a permanent install on unbranded Firefox (the only way an unsigned addon can be permanently installed), when the event does occur, the same symptom occurs (panel goes from a state of showing to removed). I.e. I don’t think this is the right event either.

Currently, there are callbacks in PopupNotifications.show() for the XUL elements and sendMessageToChrome for the HTML elements.

PR #7 was a big improvement in our custom CFR panel capabilities; however there are concerns that not all injected content, added listeners, etc. are removed properly on addon shutdown. Getting the addon in general reviewed by an experienced Firefox developer is a good idea.

PR #4 is a great improvement on a panel module for CFR (found in the ./xul-panel subfolder of this repo).

As it notes, there are still some shortcomings:

• Two aspects of the UI mocks for this panel could not be reproduced: the question mark icon in the top right corner of the panel and bolding Amazon Assistant in the message.

  • 

  • Bolding “Amazon Assistant”

    • The string shown above is passed in as a text attribute on a <description> XUL element in the PopupNotifications.show method. Only plain text can be passed in as a value in this way.

  • Including the Question Mark icon on the top right corner.

    • The only icon that can be included at this location is a close icon using the PopupNotifications.show method.

  • Attempts were made to target these elements and hide them to increase the <browser> (red) area: Here's the code I tried:

async function startup() {
 await WindowWatcher.startup();

 const browserWindow = RecentWindow.getMostRecentBrowserWindow();

 browserWindow.setTimeout(() => {
   showPopup(browserWindow);
   removeUnusedXULElements(browserWindow);
 }, 200);
}

// DOESN'T WORK!
// Attempts to remove the <xul:image> popup icon element and <xul:hbox>
// message element made from the standard PopupNotifications.show
// to maximize <browser> area.
function removeUnusedXULElements(browserWindow) {
 const doc = browserWindow.document;
 const popupnotificationEle = doc.getElementById("custom-popup-example-notification");
 const popupnotificationBodyContainerEle = doc.getAnonymousElementByAttribute(popupnotificationEle, "class", "popup-notification-body-container");
 const xulImage = popupnotificationBodyContainerEle.children[0];
 console.log(xulImage);
 // minimal-xul.css has an attribute selector for 'hidden'
 // https://dxr.mozilla.org/mozilla-central/source/toolkit/content/minimal-xul.css?q=file%3Aminimal-xul.css&redirect_type=single#41
 xulImage.setAttribute("hidden", "true");
 xulImage.style.display = "none";
 xulImage.setAttribute("collapsed", "true");
 xulImage.setAttribute("moz-collapsed", "true");
 const popupNotificationBodyEle = popupnotificationBodyContainerEle.children[1];
 const messageEle = popupNotificationBodyEle.children[0];
 console.log(messageEle);
 messageEle.setAttribute("hidden", "true");
 messageEle.style.display = "none";
 messageEle.setAttribute("collapsed", "true");
 messageEle.setAttribute("moz-collapsed", "true");
}

I may be able to hide these elements by targeting them in CSS (for example, in PopupNotifications.show(), I can add a class to the popup icon -- perhaps I can apply a style of display:none; here if I inject stylesheets into the window as well per Marc’s share-button-study (https://github.com/mozilla/share-button-study/blob/master/extension/bootstrap.js#L294).

From an old version of my experimental addon (xul-panel or xul-panel-with-react), I get a blank popup when I drag a tab into a new window that is blank.
We need to figure out how to remove this old popup from the chrome popup set. I know it's old because the <xul:image> icon still has a class added to it via the PopupNotifications.show options. This has since been removed in xul-panel-with-react.