Updating UI of firefox addon using sdk - firefox-addon

Question

I am writing a simple firefox addon using addon-sdk-1.17 . I am having trouble updating the UI of my addon. If I do a cfx run, the addon looks normal, but if I do "cfx xpi" and load it into a profile that already has a previous version of the addon, well thats where I run into problems.
A simple example of this can be seen by an example mozilla has in their toolbar tutorial. It can be found at: https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_toolbar
If I package (cfx xpi) the following code (assuming the icons and html file exist), it works as expected:
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: "./icons/previous.png"
});
var next = ActionButton({
id: "next",
label: "next",
icon: "./icons/next.png"
});
var play = ActionButton({
id: "play",
label: "play",
icon: "./icons/play.png"
});
var frame = new Frame({
url: "./frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, next, play, frame]
});
But if i want to add an additional button to it and I decide to change the url of the frame, they don't update to the toolbar. For example, after loading the above addon into my profile, if I make the following changes to the main.js:
var { ActionButton } = require('sdk/ui/button/action');
var { Toolbar } = require("sdk/ui/toolbar");
var { Frame } = require("sdk/ui/frame");
var previous = ActionButton({
id: "previous",
label: "previous",
icon: "./icons/previous.png"
});
var next = ActionButton({
id: "next",
label: "next",
icon: "./icons/next.png"
});
var play = ActionButton({
id: "play",
label: "play",
icon: "./icons/play.png"
});
var mute = ActionButton({
id: "mute",
label: "mute",
icon: "./icons/mute.png"
});
var frame = new Frame({
url: "./new-frame-player.html"
});
var toolbar = Toolbar({
title: "Player",
items: [previous, next, play, mute, frame]
});
The toolbar will not have either (frame-player.html or new-frame-player.html) loaded on the toolbar, and the mute button will not be located on the toolbar either. Again, this works fine for "cfx run" or if I install the addon to a profile that doesn't have the previous version of the addon.
I assume there is something dumb I am doing or there is an easy solution, but I haven't seen documentation on this anywhere. Not sure if I just overlooked something or what.

Answer 1

The "problem" here is, that Firefox saves the location where buttons had been manually placed, even when the extension is uninstalled. You can reset this data by hitting "Restore Defaults" in the cutomization tab.
Alternatively you can force-move your frame using the CustomizableUI.jsm:
var CustomizableUI = require("resource:///modules/CustomizableUI.jsm");
CustomizableUI.addWidgetToArea(frame.id, "inner-" + toolbar.id);
Or if you want to move a button:
var CutomizableUI = require("resource://modules/CustomizableUI.jsm");
var { getNodeView } = require("sdk/view/core");
CustomizableUI.addWidgetToArea(getNodeView(button).id, "inner-" + toolbar.id);