1471391 - Create CFR doorhanger UI template

Status: VERIFIED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Kate Hudson :k88hudson]

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.

Comment 1

[Ed Lee :Mardak]

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…

```js
    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 = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

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

    const pab = win.document.getElementById("page-action-buttons");
    const rec = win.document.createElementNS(XUL_NS, "hbox");
    rec.id = "firefox-recommends";
    rec.style.backgroundColor = "#0060df";
    rec.style.borderRadius = "5px";
    rec.style.color = "white";
    rec.style.fill = "white";
    rec.style.overflow = "hidden";
    rec.style.padding = "2px 5px";
    rec.style.transition = "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");
    img.style.height = "16px";
    img.style.setProperty("-moz-context-properties", "fill");
    img.style.width = "16px";
    rec.appendChild(img);
    const lab = win.document.createElementNS(XUL_NS, "label")
    lab.setAttribute("value", "Firefox Recommends");
    rec.appendChild(lab);
    win.setTimeout(() => {
      rec.style.width = rec.scrollWidth + "px";
      rec.scrollWidth;
      rec.style.backgroundColor = "";
      rec.style.color = "black";
      rec.style.fill = "rgba(0, 0, 0, 0.6)";
      rec.style.width = "25px";
    }, 5000);
    rec.addEventListener("click", () => {
      win.PopupNotifications.show(win.gBrowser.selectedBrowser, "rec-panel", "Firefox Recommends a Wikipedia thing!", "firefox-recommends");
    });

    mps.appendChild(pan);
    pab.insertAdjacentElement("afterbegin", rec);
```

Comment 2

[Adam Hillier :ahillier]

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?

Comment 3

[Ed Lee :Mardak]

uiwanted: Similar question but for navigating within the tab. How long should it stay visible?

Comment 4

[Adam Hillier :ahillier]

uiwanted:

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 facebook.com with the Facebook Container extension enabled - see screenshot here https://addons.mozilla.org/en-US/firefox/addon/facebook-container/).

How do we want to position the CFR UI relative to these two UI elements?

Comment 5

[Kate Hudson :k88hudson]

I filed a second bug in case we want to split up this work: https://bugzilla.mozilla.org/show_bug.cgi?id=1484030

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4353

Comment 7

[Adam Hillier :ahillier]

Attachment: Bug 1471391 - Create initial CFR doorhanger

Comment 8

[Kate Hudson :k88hudson]

Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has approved the revision.

Comment 9

[Kate Hudson :k88hudson]

Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has requested changes to the revision.

Comment 10

[Kate Hudson :k88hudson]

Comment on attachment 9003919 [details]
Bug 1471391 - Create initial CFR doorhanger

Kate Hudson :k88hudson has approved the revision.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9837816f6c79
Create initial CFR doorhanger r=k88hudson

Comment 12

[[github robot]]

Commit pushed to master at https://github.com/mozilla/activity-stream

https://github.com/mozilla/activity-stream/commit/7427a6451585ed2d3ab65325daf8a0ee429567bb
Bug 1471391 - Create initial CFR doorhanger

Backported from https://phabricator.services.mozilla.com/D4266

Comment 13

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/9837816f6c79

Comment 14

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/332b73bd0c42

Comment 15

[Cristian Fogel [:cfogel]]

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?

Comment 16

[Adam Hillier :ahillier]

I think Kate is in a better position to respond to this

Comment 17

[Cristian Fogel [:cfogel]]

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.

Comment 18

[Kate Hudson :k88hudson]

This is expected since providers that are not enabled do not show up in the asrouter admin page.

This will be changing as of https://bugzilla.mozilla.org/show_bug.cgi?id=1500073, which will allow you to enable/disable via checkboxes in the list

Comment 19

[Cristian Fogel [:cfogel]]

Thanks again, marking this bug as verified, based on my previous comments.