聚光灯¶

这是一个窗口或标签级别的模态窗口，用户可以通过主要按钮和次要按钮与模态窗口进行交互。默认情况下，聚光灯是 “window modal”，阻止访问浏览器的其余部分，包括打开和切换标签页。 “Tab modal” 将页面内容变灰，并允许与标签页和浏览器的其余部分进行交互。

聚光灯支持的更多模板示例

聚光灯页面示例¶

Spotlight

测试聚光灯¶

转到 about:config，将首选项 browser.newtabpage.activity-stream.asrouter.devtoolsEnabled 设置为 true
打开一个新标签页，并在 URL 栏中转到 about:asrouter
在开发者工具的 Messages 部分，选择并显示来自 onboarding 作为提供者的消息
您应该会看到带有 "template": "spotlight" 的示例 JSON 消息。单击聚光灯模板消息旁边的 Show 应该会显示相应的界面
为了快速测试，您可以直接在文本区域中修改消息，或者通过粘贴自定义屏幕消息 JSON 来修改。单击 Modify 将显示您新的更新的聚光灯消息。
确保所有必需的属性都根据聚光灯 Schema 进行覆盖
单击 Share，将链接复制到剪贴板，该链接可以粘贴到 URL 栏中以在浏览器中预览聚光灯自定义屏幕，并可以与您的团队共享以获取反馈。

**注意：**聚光灯可以是窗口级或标签级，在配方中的 "modal": "tab" 或 "modal": "window" 属性中指定。

通过实验：¶

您可以通过创建实验或将消息落地到树中来测试聚光灯。消息传递旅程捕捉了通过 Nimbus 创建和测试实验以及在 Firefox 中落地消息的过程。

聚光灯的示例 JSON 配方¶

{
  "template": "spotlight",
  "targeting": "firefoxVersion >= 114",
  "frequency": {
    "lifetime": 1
  },
  "trigger": {
    "id": "defaultBrowserCheck"
  },
  "content": {
    "template": "multistage",
    "id": "Spotlight_MESSAGE_ID",
    "transitions": true,
    "modal": "tab",
    "screens": [
      {
        "id": "Screen_ID",
        "content": {
          "logo": {
            "imageURL": "chrome://activity-stream/content/data/content/assets/heart.webp",
            "height": "73px"
          },
          "title": {
            "fontSize": "36px",
            "raw": "Say hello to Firefox"
          },
          "title_style": "fancy shine",
          "subtitle": {
            "lineHeight": "1.4",
            "marginBlock": "8px 16px",
            "raw": "Here’s a quick reminder that you can keep your favorite browser just one click away."
          },
          "primary_button": {
            "label": {
              "string_id": "onboarding-start-browsing-button-label"
            },
            "action": {
              "type": "OPEN_URL",
              "data": {
                "args": "https://www.mozilla.org",
                "where": "tab"
              }
            }
          },
          "secondary_button": {
            "action": {
              "navigate": true
            },
            "label": {
              "marginBlock": "0 -20px",
              "raw": "Not now"
            }
          },
          "dismiss_button": {
            "action": {
              "navigate": true
            }
          }
        }
      }
    ]
  }
}