corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1927387 - Move Simple CFR Template doc under CFR UI Template in source doc r=omc-reviewers,emcminn

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D227302
This commit is contained in:
Punam Dahiya
2024-11-08 20:36:07 +00:00
parent 5b925871d0
commit 771a61c29f
3 changed files with 36 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
browser/components/asrouter/docs/contextual-feature-recommendation.md
View File

@@ -1,7 +1,7 @@
# Contextual Feature Recommendation
## What are CFRs?
The most commonly used CFR as a Messaging Surface is the doorhanger, which anchors to one of the UI elements such as the application menu, the identity panel and so on.
CFR Messaging Surface is the doorhanger, which anchors to one of the UI elements such as the application menu, the identity panel and so on.
CFRs like any other messaging screen has specific triggers. You can learn more about triggers [here](https://firefox-source-docs.mozilla.org/toolkit/components/messaging-system/docs/TriggerActionSchemas/index.html).
[More examples of templates supported with CFR](https://experimenter.info/messaging/desktop-messaging-surfaces/#doorhanger)
@@ -81,3 +81,34 @@ You can test CFR messaging surface by creating an experiment or landing message
"targeting": "firefoxVersion >= 115"
}
```
Legacy Simple CFR Template
--------------------
The “Simple CFR Template” is a two-stage UI (a chiclet notification and a door-hanger)
that shows up on a configurable trigger condition, such as when the user visits a particular web page.
To test specific Test Messages with legacy CFR templates in the tree, follow these steps:
1. Go to `about:config`, set pref `browser.newtabpage.activity-stream.asrouter.devtoolsEnabled` to `true`
2. Set pref `browser.newtabpage.activity-stream.asrouter.providers.cfrlocal` to `{"id":"cfrlocal","type":"local","localProvider":"CFRMessageProvider","enabled":true,"exclude":[]}`
3. Open a new tab and go to `about:asrouter#devtools` in the url bar
3. In devtools Messages section, under Filters show messages from `cfrlocal` as provider
4. You should see example JSON messages with `"template": "cfr_doorhanger"` or `"template": "cfr_urlbar_chiclet"`. Clicking `Show` next to CFR message should show respective message UI
![CFRDoorhanger](./cfr_doorhanger_screenshot.png)
## Doorhanger Configuration
### Stage 1 – Chiclet
* **chiclet_label**: The text that shows up in the chiclet. 20 characters max.
* **chiclet_color**: The background color of the chiclet as a HEX code.
### Stage 2 – Door-hanger
* **title**: Title text at the top of the door hanger.
* **body**: A longer paragraph of text.
* **icon**: An image (please provide a URL or the image file up to 96x96px).
* **primary_button_label**: The label of the button.
* **primary_button_action**: The special action triggered by clicking on the button. Choose any of the available [button actions](https://firefox-source-docs.mozilla.org/toolkit/components/messaging-system/docs/SpecialMessageActionSchemas/index.html). Common examples include opening a section of about:preferences, or opening a URL.

5
browser/components/asrouter/docs/index.rst
View File

@@ -68,6 +68,10 @@ icons) and access to a set of enhanced user actions such as triggering URLs,
launching menus, or installing addons, which can be attached to interactive
elements (such as buttons).
Warning! Before reading, you should consider whether a `Messaging Experiment is relevant for your needs`__.
.. __: https://docs.google.com/document/d/1S45a_nFn8QRM8gvsxCM6HHROrIQlQQl6fUlJ2j63PGI/edit
Current templates include\:
.. In theory, we ought to be able to use the :glob: directive here to
@@ -108,7 +112,6 @@ Detailed Docs
first-run
messaging-glossary
remote_cfr
simple-cfr-template
targeting-attributes
targeting-guide
telemetry

37
browser/components/asrouter/docs/simple-cfr-template.rst
View File

@@ -1,37 +0,0 @@
Simple CFR Template
--------------------
The “Simple CFR Template” is a two-stage UI (a chiclet notification and a door-hanger)
that shows up on a configurable `trigger condition`__, such as when the user visits a
particular web page.
.. __: /toolkit/components/messaging-system/docs/TriggerActionSchemas
Warning! Before reading, you should consider whether a `Messaging Experiment is relevant for your needs`__.
.. __: https://docs.google.com/document/d/1S45a_nFn8QRM8gvsxCM6HHROrIQlQQl6fUlJ2j63PGI/edit
.. image:: ./cfr_doorhanger_screenshot.png
:align: center
:alt: Simple CFR Template 2 stage
Doorhanger Configuration
=========================
Stage 1 – Chiclet
++++++++++++++++++
* **chiclet_label**: The text that shows up in the chiclet. 20 characters max.
* **chiclet_color**: The background color of the chiclet as a HEX code.
Stage 2 – Door-hanger
++++++++++++++++++++++
* **title**: Title text at the top of the door hanger.
* **body**: A longer paragraph of text.
* **icon**: An image (please provide a URL or the image file up to 96x96px).
* **primary_button_label**: The label of the button.
* **primary_button_action**: The special action triggered by clicking on the button. Choose any of the available `button actions`__. Common examples include opening a section of about:preferences, or opening a URL.
.. __: /toolkit/components/messaging-system/docs/SpecialMessageActionSchemas