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" }
  }
}
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" }
  }
}
Copy

Subscriptions

• customizer_onBackgroundUpdate.

  • 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.

  • 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.

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

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

    or:

  • {
      "userColor": null
    } 
    Copy

• customizer_onThemeUpdate.

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

  • {
      "theme": "system"
    } 
    Copy

• customizer_autoOpen.

  • Send this into the page to trigger the customizer to be opened.

Notifications

• customizer_setBackground.

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

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

• customizer_setTheme.

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

  • {
      "theme": "light"
    } 
    Copy

• customizer_upload.

  • Sent to trigger a file upload

• customizer_deleteImage.

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

  • {
      "id": "abc"
    } 
    Copy

• customizer_contextMenu.

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

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