Customise UI migration research

[kierandrewett]

This research is a WIP

Adding widget to area

Adding a widget to an area in the browser can be done by calling .addWidgetToArea.

const validAreas = [
    "widget-overflow-fixed-list"
    "nav-bar"
    ​"toolbar-menubar"
    "TabsToolbar"
    "PersonalToolbar"
]

CustomizableUI.addWidgetToArea(widgetId: string, areaId: Area, position: number)
// (areaId being one from validAreas)

CustomizableUI.addWidgetToArea("print-button", "TabsToolbar", 0) // pos 0 places the print button at start of the tabs toolbar

Removing widget from area

Removing a widget from an area in the browser can be done by calling .removeWidgetFromArea.

CustomizableUI.removeWidgetFromArea("home-button")

Checking if widget can move to area

You can check whether a widget can move to a specific area by calling .canWidgetMoveToArea.

CustomizableUI.canWidgetMoveToArea("alltabs-button", "widget-overflow-fixed-list") // false
CustomizableUI.canWidgetMoveToArea("home-button", "widget-overflow-fixed-list") // true

CustomizableUI.canWidgetMoveToArea("back-button", "widget-overflow-fixed-list") // false
// this returns false because the back button cannot be moved at all

Getting all widgets in area

You can get all the widgets in an area by calling .getWidgetsInArea.

CustomizableUI.getWidgetsInArea("nav-bar")
/*
  Object { isGroup: true, id: "back-button", type: "custom", … }
  Object { isGroup: true, id: "forward-button", type: "custom", … }
  Object { isGroup: true, id: "stop-reload-button", type: "custom", … }
  Object { isGroup: true, id: "home-button", type: "custom", … }
  Object { isGroup: true, id: "customizableui-special-spring1", type: "custom", … }
  ​Object { isGroup: true, id: "urlbar-container", type: "custom", … }
  ​Object { isGroup: true, id: "customizableui-special-spring2", type: "custom", … }
  ​Object { isGroup: true, id: "downloads-button", type: "custom", … }
  ​Object { isGroup: true, id: "library-button", type: "custom", … }
  ​Object { isGroup: true, id: Getter, source: Getter, … }
  ​Object { isGroup: true, id: "fxa-toolbar-menu-button", type: "custom", … }
*/