Drawer Feature Flag

• To enable the drawer feature for customization, change the "Settings" that are part of the initialSetup message
• It will default to the popover menu
• Example:

Example InitialSetup response

{
  "...": "...",
  "widgets": [
    { "id": "rmf" },
    { "id": "nextSteps" },
    { "id": "favorites" },
    { "id": "privacyStats" }
  ],
  "widgetConfigs": [
    { "id": "favorites", "visibility": "visible" },
    { "id": "privacyStats", "visibility": "visible" }
  ],
  "settings": {
    "customizerDrawer": {
      "state": "enabled",
      "autoOpen": false
    }
  },
  "customizer": {
    "userImages": [],
    "userColor": null,
    "theme": "dark",
    "background": { "kind": "default" },
    "defaultStyles": {
      "lightBackgroundColor": "#E9EBEC",
      "darkBackgroundColor": "#27282A"
    }
  }
}
Copy

Initial Data

• Add the key customizer to initialSetup
• The data takes the following form: "NewTab Messages".CustomizerData
• Example from initialSetup

{
  "...": "...",
  "customizer": {
    "userImages": [],
    "userColor": null,
    "theme": "dark",
    "background": { "kind": "default" },
    "defaultStyles": {
      "lightBackgroundColor": "#E9EBEC",
      "darkBackgroundColor": "#27282A"
    }
  }
}
Copy

Subscriptions

customizer_onBackgroundUpdate

• "NewTab Messages".CustomizerOnBackgroundUpdateSubscription
• Sends "NewTab Messages".BackgroundData whenever needed.
• For example:

{
  "background": { "kind": "color", "value": "color01" }
} 
Copy

{
  "background": { "kind": "gradient", "value": "gradient01" }
} 
Copy

{
  "background": { "kind": "hex", "value": "#cacaca" }
} 
Copy

{
  "background": { "kind": "default" }
} 
Copy

{
  "background": { 
     "kind": "userImage", 
     "value": { "id":  "abc", "src": "...", "thumb": "...", "colorScheme": "light" } 
  }
} 
Copy

customizer_onImagesUpdate

• "NewTab Messages".CustomizerOnImagesUpdateSubscription.
• Sends "NewTab Messages".UserImageData whenever needed.
• For example, this would be pushed into the page following a successful upload
  • Note: In that situation, you'd send this followed by customizer_onBackgroundUpdate above
• For example:

{
  "userImages": [{"id":  "abc", "src": "...", "thumb": "...", "colorScheme": "light" }]
} 
Copy

customizer_onColorUpdate

• "NewTab Messages".CustomizerOnColorUpdateSubscription.
• Sends "NewTab Messages".UserColorData whenever needed.
• For example:

{
  "userColor": { "kind": "hex", "value": "#cacaca" }
} 
Copy

or:

{
  "userColor": null
} 
Copy

customizer_onThemeUpdate

• "NewTab Messages".CustomizerOnThemeUpdateSubscription.
• Sends "NewTab Messages".ThemeData whenever needed.
• For example:

{
  "theme": "system"
} 
Copy

• Or, with optional defaultStyles example:

{
  "theme": "system",
  "defaultStyles": {
    "lightBackgroundColor": "#E9EBEC",
    "darkBackgroundColor": "#27282A"
  }
}
Copy

customizer_autoOpen

• "NewTab Messages".CustomizerAutoOpenSubscription.
• Send this into the page to trigger the customizer to be opened.

Notifications

customizer_setBackground

• "NewTab Messages".CustomizerSetBackgroundNotification.
• Sends "NewTab Messages".CustomizerSetBackgroundNotify whenever needed.
• For example:

{
  "background": { "kind": "color", "value": "color01" }
} 
Copy

customizer_setTheme

• "NewTab Messages".CustomizerSetThemeNotification.
• Sends "NewTab Messages".CustomizerSetBackgroundNotify whenever needed.
• For example:

{
  "theme": "light"
} 
Copy

customizer_upload

• "NewTab Messages".CustomizerUploadNotification.
• Sent to trigger a file upload

customizer_deleteImage

• "NewTab Messages".CustomizerDeleteImageNotification.
• Sends "NewTab Messages".CustomizerDeleteImageNotify whenever needed.
• For example:

{
  "id": "abc"
} 
Copy

customizer_contextMenu

• "NewTab Messages".CustomizerContextMenuNotification.
• Sends "NewTab Messages".UserImageContextMenu
• Note: only sent for right-clicks on user images in the selection screen.
• For example:

{
  "target": "userImage",
  "id": "01"
} 
Copy