I'd like to zoom in and out webpages using Firefox addon but I can't find anything in documentation addon docs. I'd like to make it work as Ctrl + mouse wheel or Ctrl + + / - but it should use my addon. Please help.
You need to access a browser element directly, in a way described in the full page zoom documentation. The high-level modules of the Add-on SDK don't provide this kind of access, you have to use the low-level modules to get to the browser windows. For example, to change the zoom level of the currently active tab you would do:
var {activeBrowserWindow} = require("window-utils");
var browser = activeBrowserWindow.gBrowser.selectedBrowser;
browser.markupDocumentViewer.fullZoom = 1.5; // 150%
Unfortunately, the window-utils module is largely undocumented. In addition to the activeBrowserWindow property it also provides a browserWindowIterator function that is useful if you want to manipulate tabs in all browser windows:
var {browserWindowIterator} = require("window-utils");
for (var window in browserWindowIterator())
doSomething(window);
ChromeWindow exposes a FullZoom object which allows to programmatically control zoom.
However I don't think you can reach it from the Add-on SDK.
Edit:
In light of Wladimir's answer, I would recommend the following
var {activeBrowserWindow} = require("window-utils");
activeBrowserWindow.FullZoom.enlarge();
activeBrowserWindow.FullZoom.reduce();
activeBrowserWindow.FullZoom.reset();
While you can't set arbitrary zoom factors, the bonus is that you get housekeeping for free, i.e. per site persistance of the zoom factor.
Check FullZoom at mxr
Related
I am using Twilio Video React application, for my video application.
Twilio video renders video in two views, desktop and mobile, based on the device.
Due to space constraints on my desktop application I would like to render the video similar to that of a mobile on desktop, Is this possible? Is there a variable that I could set to allow me to do this ? Basically, I would like Twilio video to think that I am running the app on the mobile.
I tried to set isMobile to true in utils (as shown below), this doesn't seem to make a difference to the UI.
export const isMobile = (() => {
if (
typeof navigator === "undefined" ||
typeof navigator.userAgent !== "string"
) {
return true;
}
return /Mobile/.test(navigator.userAgent);
})();
I would like to achieve the below:
Twilio developer evangelist here.
I've not worked on this application myself, so I'm not familiar with how it is styled. There is not a variable for setting the style on mobile though, it is mostly controlled by CSS media query break points.
What you will notice among the code is that the CSS is embedded within the JavaScript. You will also find lines like:
[theme.breakpoints.down('xs')]: {
// styles
}
That breakpoint defines how a number of the styles are supposed to work at the small screen size. So if you remove the breakpoint and use the styles inside the breakpoint as the default styles, then the application will lay out in the mobile version.
Once you've done that, you can then place the video parts of the application within a div with a width you define and place the rest of your application around it.
Let me know if that helps at all.
I want to get a value (content) from the CSS of a pseudo element (::before) while inside a test made using WDIO and Appium for an Android hybrid app because the designer has stored the current responsive-design state there. So my tests would know which layout (elements) to expect.
Multiple answers to related questions (1; 2; 3) indicated that using .getComputedStyle() might be the only solution. But this does not seem to work in my tests. The error is window is not defined for window.getComputedStyle(...) or document is not defined if I use document.defaultView.getComputedStyle(...). Also selectors themselves can't address pseudo-elements it seems.
Example of one of my many attempts:
document.defaultView.getComputedStyle($('body'),'::before').getPropertyValue('content')
Question: Do I need to somehow import window or document to my test? Is there some other way to get window or document from inside the test?
Ultimately: how can I get the content value of ::before of the <body> of a hybrid Android app?
Thanks to Jeremy Schneider (#YmerejRedienhcs) & Erwin Heitzman (#erwinheitzman) for help!
One solution is to use the execute function:
let contentMode = browser.execute(() => {
let style = document.defaultView.getComputedStyle(document.querySelector('body'),'::before');
return style.getPropertyValue('content')
});
Alternatively maybe something could also be done with getHTML.
When I edit a page in my wiki, the WikiEditor toolbar doesn't show.
The version of MediaWiki that I use is version 1.23.2 and I am using the latest version of WikiEditor.
This is the code that I used at the bottom of LocalSettings.php
require_once "$IP/extensions/WikiEditor/WikiEditor.php";
# Enables use of WikiEditor by default but still allow users to disable it in preferences
$wgDefaultUserOptions['usebetatoolbar'] = 1;
$wgDefaultUserOptions['usebetatoolbar-cgd'] = 1;
# Displays the Preview and Changes tabs
$wgDefaultUserOptions['wikieditor-preview'] = 1;
# Displays the Publish and Cancel buttons on the top right side
$wgDefaultUserOptions['wikieditor-publish'] = 1;
I am just using the default Vector theme, I haven't changed anything yet.
It's impossible to tell for sure without information on what is displayed in your browser console or other logs (see debugging).
However, a comment mention DreamHost: it may be a webserver-caused issue. One setting that often causes problems is the maximum allowed URL length; try setting $wgResourceLoaderMaxQueryLength = 512 or lower in your LocalSettings.php.
I am building a news reader in Sencha Touch 2. There is a "share" button in this news reader, but I'm not sure how you would share the current article via a URL.
That is, if my Sencha site's URL is: www.senchareader.com, the only URL I can share is just that.
Is there some way to create, within the Sencha framework, something like, www.senchareader.com/article1234567 ? So that when the URL is clicked on by someone, it actually goes to the article that's being shared?
Hopefully this is clear, let me know if it's not.
Yes you can. Sencha uses URL hashes to support browser history. Take a look at this example on the ExtJS 4.1.3 site, and the related documentation here. Essentially, you add "tokens" (hashes) to the history, then listen for changes to support the forward and back buttons. If you are using Sencha Touch 2, however, history support is a bit easier by using "routes" in your controllers. You read Sencha Touch history support documentation here.
The code to do this differs depending on whether you are using ExtJS or Sencha Touch, but is ExtJS it is something like the following:
...
Ext.History.init();
...
// something happens to change the url (like a user clicks on an article)
var newToken = '/article/'+article.id; // or whatever
var oldToken = Ext.History.getToken();
if (oldToken === null || oldToken.search(newToken) === -1) {
Ext.History.add(newToken);
}
...
Ext.History.on('change', function(token) {
// handle the token changing, most likely by showing the right article
});
I have a basic FF addon that polls for something in the DOM of the page in window.document. When it sees it, it is supposed to save the page. That's the hard part. I don't want to replicate the functionality of "save complete" I just want to call the pre-existing functionality from the plugin/addon at the right moment.
Is this an XPCom thing? Or is it pure JavaScript via the relevant APIs ?
iMacros for Firefox can invoke Save-as (without popping the associated dialog), but I can't see how.
Can anyone advise as to how to call deeper Firefox functions like this?
Thanks, - Paul
PS - I really love Mozilla Archive Format, with MHT and Faithful Save but I think it is replicating functionality again. My alternative is to invoke it's function, but that's as opaque to me as the firefox native one.
You can use nsIWebBrowserPersist.saveDocument() for this:
var persist = Cc["#mozilla.org/embedding/browser/nsWebBrowserPersist;1"].
createInstance(Ci.nsIWebBrowserPersist);
var localPath = Cc["#mozilla.org/file/local;1"].
createInstance(Ci.nsILocalFile);
localPath.initWithPath(pathToLocalDirectory);
var localFile = localPath.clone();
localFile.append("mylocalfile.html");
persist.saveDocument(document, localFile, localPath, null, 0, 0);
The key is the third parameter which specifies where the linked URIs should be stored. See http://mxr.mozilla.org/mozilla2.0/source/embedding/components/webbrowserpersist/public/nsIWebBrowserPersist.idl#256 for complete documentation.