I need help with Firefox plugin sidebar: sdk/ui/sidebar
var sidebars = require("sdk/ui/sidebar"),
...
var orderSidebar = sidebars.Sidebar({
id: "order-sidebar",
title: "clix Sidebar",
url: self.data.url("html/order-sidebar.html"),
onHide: function () {
mainToggleButton.setToggle(false);
}
});
orderSidebar.on("ready", function (worker) {
worker.port.on("orderClicked", handleOrderClicked);
worker.port.emit("orderArrival", orderData);
orderSidebarWorker = worker;
});
The Firefox add-on shows as a sidebar, but I want to make it show in a tab or window.
I want to change the ui/sidebar command to a window or tab by that making the plugin.
Related
I create a tab in Firefox and load a url:
function createNewEbayTab()
{
newTab = browser.tabs.create({
active: false,
url:"https://www.google.de"
});
};
Now I would like to open every further URL that I call within the extension in this tab. What is the best way to do this?
Thanks!
InAppBrowser missing the "Done" button that returns user to the app when using on iPhone. It is getting getting stuck on the webpage.
.directive("navigateTo", function($ionicGesture){
return{
restrict: 'A',
link:function($scope,$element,$attr) {
var tapHandler = function(e) {
var inAppBrowser = window.open(encodeURI($attr.navigateTo),'_blank','location=no', 'toolbar=yes');
};
var tapGesture =$ionicGesture.on('tap', tapHandler, $element);
$scope.on('$destroy', function(){
$ionicGesture.off(tapGesture, 'tap', tapHandler);
});
}
}
})
This is all the code for InAppBrowser. I call the navigateTo from one of the views in my app to open a link to a webpage.
I've followed MDN's document to create a toggle button addon.
Everything works fine except one problem:
Open a second browser window (cmd+n or ctrl+n) and click on the toggle button there
Click on the toggle button on the original browser window without closing the toggle button on the second window
the toggle button's panel becomes blank with the following error message:
JavaScript error: resource:///modules/WindowsPreviewPerTab.jsm, line 406: NS_ERR
OR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIT
askbarTabPreview.invalidate]
// ./lib/main.js
var { ToggleButton } = require("sdk/ui/button/toggle");
var panels = require("sdk/panel");
var self = require("sdk/self");
var buttonIndex = 0;
var lastKnownButtonIndex = 0;
var button = ToggleButton({
id: "button",
label: "my button",
icon: {
"16": "./icon-16.png"
},
onClick: handleChange,
});
var panel = panels.Panel({
contentURL: self.data.url("menu.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
function assignButtonIndex() {
return (buttonIndex++).toString();
}
The complete addon is here: https://goo.gl/9N3jle
To reproduce: Extract the zip file and $ cd testButton; cfx run and follow the above steps.
I really hope someone can help me with this. Thank you in advance!
It's a bug; you're not doing anything wrong. It's a racing condition between the windows' focus events, and the panel's event, that prevent somehow the panel's hidden event to be emitted properly.
You can try to mitigate with a workaround the issue until is properly fixed. I added some explanation in the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1174425#c2 but in short, you can try to add a setTimeout to delay a bit when the panel is shown, in order to avoid the racing condition with the window's focus. Something like:
const { setTimeout } = require("sdk/timers");
/* ... your code here ... */
function handleChange(state) {
if (state.checked) {
setTimeout(() => panel.show({ position: button }), 100);
}
}
I am currently using a workaround where I dynamically create a new Panel every time the user presses the toolbar button.
It is faster than the 100ms workaround and also handles a scenario where the user outright closes one of the browser windows while the panel is open. (The 100ms workaround fails in this case and a blank panel is still displayed.)
It works like this:
let myPanel = null;
const toolbarButton = ToggleButton({
...,
onChange: function (state) {
if (state.checked) {
createPanel();
}
}
});
function createPanel(){
// Prevent memory leaks
if(myPanel){
myPanel.destroy();
}
// Create a new instance of the panel
myPanel = Panel({
...,
onHide: function(){
// Destroy the panel instead of just hiding it.
myPanel.destroy();
}
});
// Display the panel immediately
myPanel.show();
}
I am using Jquery Mobile 1.4 and I would like to create a button that sends the user to another page, and opens the panel on this new page once landed :
I am trying this :
$(document).on('pagecreate','#faq-page', function(){
$('#faqcontactus').on("tap", function() {
$( "body" ).pagecontainer( "change", "#welcome-page", { transition: "fade" });
$( "body" ).pagecontainer( "getActivePage" ).find('#mypanel').panel("open");
});
});
which goes to the page, opens the panel, but closes it instantly.
Can you help ?
Thanks
You can't do it after you initiate page change process. That process is asynchronous and pane open will not wait for this function to end. What you need to do is wait for next page to became visible, then you should trigger panel.
Something like this:
$(document).on('pagecontainershow', function (e, ui) {
var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage');
var activePageId = activePage .attr('id')
if(activePageId === 'welcome-page') {
activePage.find('#mypanel').panel("open");
}
});
You should wait until page is fully loaded before you open the panel, i.e. use pagecontainershow.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
if(activePage[0].id == "welcome-page") {
$(".ui-panel", activePage).panel("open");
}
});
I am using jquery.blockUI.js to show a popup for mobile application. Popup is shown when I click on button. But when I try to hide that popup on clicking outside that popup then it does not hide.
I am using this code to hide popup:-
jQuery('.blockOverlay').attr('title','Click to unblock').click(jQuery.unblockUI);
It works perfectly in desktop version of magento but Doesn't work for mobile theme.
Please help me how to solve this problem.
Try something like this..
function togglePopup(){
var selector = '#popup',
$popup = $(selector),
callback = function(e) {
if (!$(e.target).parents().andSelf().is(selector)) {
$popup.hide();
$(document).off('click', callback);
}
};
$popup.toggle();
if ($popup.is(':visible')) {
$(document).on('click', callback);
}
return false;
}