Closed Bug 1471391 Opened Last year Closed Last year

Create CFR doorhanger UI template


(Firefox :: Messaging System, enhancement, P1)




Firefox 63
63.5 - Sep 3
Tracking Status
firefox63 --- verified


(Reporter: k88hudson, Assigned: ahillier)


(Blocks 1 open bug)


User Story


(2 files)

We need to create a UI template that can communicate with AS Router via actions like the existing ASR templates. It should also implement telemetry and impression collection in a similar way.

Note that this may need to be broken down into more bugs to handle separate aspects of the UI.
Iteration: --- → 63.2 - July 23
Priority: -- → P2
Iteration: 63.2 - July 23 → 63.3 - Aug 6
Here's what I had quickly hacked into the end of PlacesFeed.openLink during the all hands where clicking on a top site to make the chicklet appear. IIRC, it was a bit finicky with multiple link clicks or something with flushing render to trigger animation or something something…

    const r = win.document.getElementById("firefox-recommends");
    if (r) r.parentNode.removeChild(r);
    const p = win.document.getElementById("rec-panel");
    if (p) p.parentNode.removeChild(p);

    const XUL_NS = "";

    const mps = win.document.getElementById("notification-popup");
    const pan = win.document.createElementNS(XUL_NS, "popupnotification"); = "rec-panel";
    pan.hidden = true;

    const pab = win.document.getElementById("page-action-buttons");
    const rec = win.document.createElementNS(XUL_NS, "hbox"); = "firefox-recommends"; = "#0060df"; = "5px"; = "white"; = "white"; = "hidden"; = "2px 5px"; = "ease-in-out 2s";
    const img = win.document.createElementNS(XUL_NS, "image")
    img.setAttribute("src", "resource://activity-stream/data/content/assets/glyph-highlights-16.svg"); = "16px";"-moz-context-properties", "fill"); = "16px";
    const lab = win.document.createElementNS(XUL_NS, "label")
    lab.setAttribute("value", "Firefox Recommends");
    win.setTimeout(() => { = rec.scrollWidth + "px";
      rec.scrollWidth; = ""; = "black"; = "rgba(0, 0, 0, 0.6)"; = "25px";
    }, 5000);
    rec.addEventListener("click", () => {, "rec-panel", "Firefox Recommends a Wikipedia thing!", "firefox-recommends");

    pab.insertAdjacentElement("afterbegin", rec);
User Story: (updated)
Iteration: 63.3 - Aug 6 → 63.4 - Aug 20
The page action buttons/url bar are per window so we'll need to hide the recommendation UI when the user switches tabs within a window.

uiwanted: If a user has the CFR recommendation showing for a tab then switches tabs, should then still see the recommendation when they switch back to the first tab?
Keywords: uiwanted
uiwanted: Similar question but for navigating within the tab. How long should it stay visible?
Assignee: nobody → ahillier

The mockups show the "Firefox recommends" urlbar UI element positioned to the left of all the page action buttons, separated from them by a divider. This is currently also where the Reader Mode button appears for articles, and where the "User context label" appears in non-default browser contexts (e.g. the "Facebook" label when you navigate to with the Facebook Container extension enabled - see screenshot here

How do we want to position the CFR UI relative to these two UI elements?
Iteration: 63.4 - Aug 20 → 63.5 - Sep 3
I filed a second bug in case we want to split up this work:
Summary: Create CFR doorhanger/chiclit UI template → Create CFR doorhanger UI template
See Also: → 1484031
Keywords: uiwanted
Priority: P2 → P1
Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has approved the revision.
Attachment #9003919 - Flags: review+
Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has requested changes to the revision.
Attachment #9003919 - Flags: review+
Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has approved the revision.
Attachment #9003919 - Flags: review+
Pushed by
Create initial CFR doorhanger r=k88hudson
Closed: Last year
Resolution: --- → FIXED
Blocks: 1486631
Managed to verify the implementation on Win 10x64, Ubuntu 18, macOS 10.14.
Current nightly is displaying the door-hangers and install is working as intended.

With beta builds(63.0b14, 63.0b13) I've noticed an issue where in some cases the about:newtab#asrouter lists are empty, even with the
browser.newtabpage.activity-stream.asrouter.devtoolsEnabled pref set to true.
This happens on Mac/Ubuntu OS, Windows displays them properly.
Are you aware of this issue or should I open a new bug for it?
Flags: needinfo?(a.hillier)
I think Kate is in a better position to respond to this
Flags: needinfo?(a.hillier) → needinfo?(khudson)
The final part of the string for browser.newtabpage.activity-stream.asrouter.messageProviders remained set to false.
[...]{"id":"cfr","type":"local","localProvider":"CFRMessageProvider", "enabled":false,[...]  

Manually setting it to true, allowed the list to be displayed.  

Can you also confirm that is the case and/if it's tracked/fixed already?
*Since in nightly this is not an issue and is set to true as default.
This is expected since providers that are not enabled do not show up in the asrouter admin page.

This will be changing as of, which will allow you to enable/disable via checkboxes in the list
Flags: needinfo?(khudson)
Thanks again, marking this bug as verified, based on my previous comments.
Flags: qe-verify+
Component: Activity Streams: Newtab → Messaging System
You need to log in before you can comment on or make changes to this bug.