1569597 - Add button to below-search snippet template

Status: RESOLVED FIXED

(Firefox :: Messaging System, enhancement, P1)

Description

[Kate Hudson :k88hudson]

In order to support a new monitor snippet in Firefox 69, we would like to augment the SimpleBelowSearchSnippet template with a button.

Design changes

See the design deck for design specs. Changes include the following when a button is included in the message content:

• Show the button
• Add a new hover state (similar to the hover state that shows up now when you mouse over the block button)
• Move the block button over slightly and only show on hover

Schema changes

It probably makes sense to follow the same schema as the simple snippet template, i.e.

 "button_action": {
    "type": "string",
    "description": "The type of action the button should trigger."
  },
  "button_url": {
    "allOf": [
      {"$ref": "#/definitions/link_url"},
      {"description": "A url, button_label links to this"}
    ]
  },
  "button_action_args": {
    "type": "string",
    "description": "Additional parameters for button action, example which specific menu the button should open"
  },
  "button_label": {
    "allOf": [
      {"$ref": "#/definitions/plainText"},
      {"description": "Text for a button next to main snippet text that links to button_url. Requires button_url."}
    ]
  },
  "button_color": {
    "type": "string",
    "description": "The text color of the button. Valid CSS color."
  },
  "button_background_color": {
    "type": "string",
    "description": "The background color of the button. Valid CSS color."
  }

Take a look at SnippetsTestMessageProvider.jsm (like SIMPLE_TEST_BUTTON_URL_1) for examples of how button data should be defined.

Comment 1

[GitHub Bugzilla PR Linker]

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

Comment 2

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

https://hg.mozilla.org/mozilla-central/rev/49f075579f00

Comment 3

[Marius Coman [:mcoman], Ecosystem QA]

I have verified this issue with the latest Firefox Nightly (70.0a1 Build ID - 20190804214813) installed, on Windows 10 x64, Arch Linux and Mac 10.14.5. Now, the "Find Out Now" button is displayed on the "SPECIAL_SNIPPET_BUTTON_1" snippet.

Comment 4

[Giorgos Logiotatidis [:giorgos]]

I found a few issues with this while testing with snippets content:

1. title is not seperated with a newline from text according to the design specs.
2. When button variables are not defined the layout is broken. See attached screenshot.
3. When the text doesn't wrap the background does not keep the correct height. See attached screenshot.

and a couple stylistic:

1. imo the previous design with hover background matching the search box was better. I 'd restore the background width, the radius from the corners and move the x button to the top.
2. button uses bold text while it seems normal weight in the design specs?

Comment 5

[Giorgos Logiotatidis [:giorgos]]

Attachment: broken-layout.png

Broken layout when button is not defined

Comment 6

[Giorgos Logiotatidis [:giorgos]]

Attachment: backgroun-height.png

When text doesn't wrap background falls short.

Comment 7

[Emily McMinn :emcminn]

(In reply to Giorgos Logiotatidis [:giorgos] from comment #5)

Created attachment 9083950 [details]
broken-layout.png

Broken layout when button is not defined

Hi Giorgios,
Could you share what template/test content you're using when the layout breaks? I have a test snippet without a button (the original below-search-snippet) and it seems to be okay. The button snippet should be the same template, just with button variables defined.

I'm going to write a few more tests and see if I can get it to break :)
EDIT: I got something similar by adding the line break after the title and then not rendering a title - but it looks like your example has a title, so I'm not sure if that's it!

Comment 8

[Giorgos Logiotatidis [:giorgos]]

This is the payload I use

{"messages": [{"template": "simple_below_search_snippet", "template_version": "1.0.0", "content": {"title": "This is title", "text": "foo", "icon": "https://areti:8443/media/media/icons/6e3d1410-7ad2-4680-9612-f08fd35946a3.png", "block_button_text": "Remove this", "do_not_autoblock": true, "links": {}}, "id": "preview-12301"}]}

as generated directly by the snippets service and tested on 70.0a1 (2019-08-07) (64-bit)

Same payload on 69.0b11 (64-bit) appears correctly.

Comment 9

[Kate Hudson :k88hudson]

Follow-up bug with fixes for design filed here: Bug 1569597

Comment 10

[Ed Lee :Mardak]

We'll track the additional work in bug 1572463

Comment 11

[Ed Lee :Mardak]

https://hg.mozilla.org/releases/mozilla-beta/rev/194b831613666fa13fb024c934197ee3e776e368