Develop Reference

Mozilla Firefox Add-on Android - Page Action not working

I have been working on this issue for a few hours now and can't seem to find any good sources on how to implement page action on android. Just the same one, Differences_between_desktop_and_Android.
I hooked up my app to the web debugger in firefox get no errors. I tried to manually call some functions and none were defined. I could be doing it wrong, but it works on my PC version of Firefox.
I created some context menu items at the top of my BG script. I'm not sure if that would affect the execution of the script on android.
ReferenceError: browser is not defined[Learn More] debugger eval code:1:1
Below is the code the creates the Page Action which is included in my Background.js.
/* *********** */
/* Page Action */
/* *********** */
const TITLE_APPLY = "Stack Open";
const TITLE_REMOVE = "Stack Closed";
const APPLICABLE_PROTOCOLS = ["http:", "https:"];
/*
Based on the current title, Update the page action's title and icon to reflect its state.
*/
function toggleT(tab) {
function gotTitle(title) {
if (title === TITLE_APPLY) {
console.log(tab.id);
//browser.pageAction.setIcon({tabId: tab.id, path: "pressed.svg"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
} else {
//browser.pageAction.setIcon({tabId: tab.id, path: "nPressed.svg"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
}
}
var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
gettingTitle.then(gotTitle);
}
/*
Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
*/
function protocolIsApplicable(url) {
var anchor = document.createElement('a');
anchor.href = url;
return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
}
/*
Initialize the page action: set icon and title, then show.
Only operates on tabs whose URL's protocol is applicable.
*/
function initializePageAction(tab) {
if (protocolIsApplicable(tab.url)) {
browser.pageAction.setIcon({tabId: tab.id, path: "../books.png"});
browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
browser.pageAction.show(tab.id);
}
}
/*
When first loaded, initialize the page action for all tabs.
*/
var gettingAllTabs = browser.tabs.query({currentWindow: true, active: true});
gettingAllTabs.then((tabs) => {
for (let tab of tabs) {
initializePageAction(tab);
}
});
/*
Each time a tab is updated, reset the page action for that tab.
*/
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
initializePageAction(tab);
});
/*
Toggle title when the page action is clicked.
*/
browser.pageAction.onClicked.addListener(toggleT);

I read the documentation again, and a couple other pages. Browser action and page action open the default.html in a new tab so there is no need to use page action on Android. Also the context menu items at the top of my BG script were causing the BG script to not work on Android.
-- Problem Solved.

casper.click() does not act like the real web

I 'm trying to learn as an autodidact casperjs .
I have encountered a problem that I do not know how to fix. I'm trying to do the following:
By clicking on the search box , a pop-up appears. However, when I do it by casperjs the drop does not appear.
What I need is to enter in this field the value of a city and click on the drop-down that appears.
I think it should be a matter that does not release the necessary jquery events.
My code:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
waitTimeout: 10000,
viewportSize: {
width: 1024,
height: 760
}
});
/*
* PARAMETERS
*/
var listItems = [];
var location = casper.cli.args[0];
casper.start('http://www.vibbo.com/pisos-y-casas-barcelona-capital/', function() {
this.echo(this.getHTML('title'));
this.captureSelector('vibbo-1.png', 'html');
casper.click('#sb_location');
this.captureSelector('vibbo-2.png', 'html');
});
casper.waitUntilVisible('#ui-id-1', function() {
casper.sendKeys('#sb_location', 'Valencia');
this.wait(1000, function() {
this.captureSelector('vibbo-3.png', 'html');
});
this.echo(listItems);
});
casper.run();
I would appreciate help and I've tried everything I knew .
Thank you

I am not sure what you are expecting. What I would do, is to use jquery to mimic the behavior.
I have looked at the web site. When you enter the field and keys in barcelona, it calls a webservice :
http://suggest.vibbo.com/regionSuggest?callback=jQuery111106577302796537023_1474408404858&location=barcelona&_=1474408404866
So what I would do is the following :
1) collect the suggestions by calling the Web Service :
jQuery.getJSON("http://suggest.vibbo.com/regionSuggest?callback=jQuery111106577302796537023_1474408404858&location=mardid&_=1474408404866")
(Here with madri, take the first result :
{"label" : "Madridanos", "regionID":"49", "areaID": "", "municipalityID" : "49103"}
2) Fill the field with this value :
casper.evaluate(function(){
$('#sb_location').val('Madridanos')
}
3) Eventually hit the Buscar button :
$('button#sb_searchbutton').click();
Is it what you were looking for ?

How to lock slider and prevent updating of values with mouse into dat.GUI menu

I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).
For the moment, I have the following dat.GUI menu:
Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".
Here is the concerned part of code for this menu:
// Create GUI
var gui = new dat.GUI({
autoplace: false,
width: 350,
height: 9 * 32 - 1
});
var params = {
GreatCircle : '',
Rotationx : torusRotationInitX,
Rotationy : torusRotationInitY,
StartingVector : '',
ComponentVectorTheta : 15.0,
ComponentVectorPhi : 15.0,
CovariantDerivativeVector : '',
ComponentCovariantDerivativeTheta : 15.0,
ComponentCovariantDerivativePhi : 15.0
};
// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
When I click on reset button, I call the following function:
// Reset Button
resetButton.onclick = function ResetParameters() {
...
// Reinitialize parameters into gui
params.Rotationx = torusRotationInitX;
params.Rotationy = torusRotationInitY;
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
render();
}
I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?
Update 1
Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?
Update 2
I tried to apply the method used on Method for disabling a button in dat.gui?
Following this solution, I have added the extension into dat.gui, just after:
dat.controllers.FunctionController = (function (Controller, dom, common) {
...
});
The following added code snippet is:
function blockEvent(event)
{
event.stopPropagation();
}
Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
{
return this.domElement.hasAttribute("disabled");
},
set: function(value)
{
if (value)
{
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
}
else
{
this.domElement.removeAttribute("disabled");
this.domElement.removeEventListener("click", blockEvent, true);
}
},
enumerable: true
});
Is extension code well located into dat.GUI source?
Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed):
if (animation)
controllerRotationx.__li.disabled = true;
Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".
I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case?
I didn't find an explicit controller for the slider.

I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

The solution given by #Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,
var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

When the Start button is pressed, set:
controllerRotationx.__li.setAttribute( "style", "display: none" );

thanks for tips
on my side i hack the Common controller
so able to chainning.
gui.add(this, '_screenW').disable(true);
Common.extend(controller, {
disable: function disable(v) {
this.domElement.style.pointerEvents = v?"none":"auto";
this.domElement.style.opacity = v?.5:1;
return controller;
},

Chrome App - webview.cleardata, reload and periodic refresh

I'm working on a kiosk app with a webview to display a Google Slides presentation. Basic mechanics are all working fine, but I need for the webview to refresh periodically to reflect changes made to the Slides.
Watched Chromium bug 406437 to clear webview cache (yay!), and am attempting to implement the webview.cleardata and webview.reload, but doesn't seem to work. Console log shows "Cannot read property 'reload' of null"
Am I on the right track? Is there something simple I'm overlooking, or is there a design flaw in my logic?
Contents of my browser.js (at least the first part)...
// NOTE: Refresh timing is on line 26 - in milliseconds
// 5 min: 5 x 60 (sec) x 1000 (ms)
window.onresize = doLayout;
var isLoading = false;
// Define the function
function refreshWebView() {
var webview = document.querySelector('webview');
// https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
// Set up the clear data variable
var clearDataType = {
appcache: true,
cookies: true,
fileSystems: true,
indexedDB: true,
localStorage: true,
webSQL: true,
cache: true
}
webview.clearData({since: 0}, clearDataType, function() { webview.reload(true); });
webview.reload(true);
setTimeout(function() { refreshWebView(); }, 60*1000);
}
// Kick off the refresh (with the delay defined above)
console.log('starting refreshWebView...');
refreshWebView();
onload = function() {
var webview = document.querySelector('webview');
doLayout();
document.querySelector('#back').onclick = function() {
webview.back();
};
... remaining code removed for brevity...

How to create a back button to previous page on Android with Titanium Studio?

I have created a back button to take me to the previous page. See code bellow:
var backbutton = Titanium.UI.createButton({
title:'back',
bottom: 10,
left: 10,
zIndex:2
});
win3.add(backbutton);
I add a addEventListener to backbutton. See code bellow:
backbutton.addEventListener('click',function() {
var win = Titanium.UI.createWindow({
url:'alarmgroups.js',
title:'Sensor/Larm Objekt'
});
win.open({modal:true});
win3.close();
win3.hide();
});
Know I wonder what the problem could be.
When Im using the code above It makes the Application crash.
Im using zIndex on every .js page that I have in my project, but I dont know if Its right to do so.
I use win.open({modal:true}); and after that code I run win3.close(); and win3.hide();. win3 Its my current window.
Does anyone having a solution on how to create a back button for Android?

You have two native solutions to create a back button on android, the first one is adding a back button to the action bar:
To achieve this, you have to edit the android's action bar in the window's open event.
(Note: do not use modal:true while opening the window)
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('open', function({
window.activity.actionBar.onHomeIconItemSelected = function() { window.close(); };
window.activity.actionBar.displayHomeAsUp = true;
});
window.open();
The second way, is overriding the android's back button of the current window.
var window = Ti.UI.createWindow({
title: "test",
backgroundColor: "white",
});
window.addEventListener('androidback', function({
window.close();
});
window.open();

Try this :
var win = Ti.UI.createWindow({
title:'Hello world',
backgroundColor:'#fff',
fullscreen:false
});
win.addEventListener('androidback',function() {
// do something
});
Also,here is the link : Android Back Button in Titanium.
Thanks.