I'd like to modify my browser (Firefox Quantum 57.0.1, 64-bit) so that images open in max resolution rather than auto-scaling to fit the browser window when I navigate to an image URL.
My programming background does not include any web development so I wouldn't know where to start on this project; I've experimenting with the developer tools console as a starting point. Based on the readout from the dev tools console and related posts here I am hypothesized that the HTML snippet <head><meta name="viewport" content="width=device-width; height=device-height;"> controls default auto-sizing that occurs when I open images. Is there a simple modification I can make to consistently open to max resolution instead of auto-sizing anytime I use the browser to look at a new image?
Am I on the right track? Can anyone provide some pointers? Is this a feasible browser modification?
NB: apologies to the inevitable senior user editing this post for incorrect tags or nomenclature - I don't have any experience in
Type about:config in the Firefox address bar
Search for browser.enable_automatic_image_resizing
Change it to false
source
Related
Is it possible to spoof Chrome plugins?
I noticed that their names are stored in Preferences and Local State file in /Users/mainuser/Library/Application\ Support/Google/Chrome/Default/Preferences and /Users/mainuser/Library/Application\ Support/Google/Chrome/Local\ State respectively (on Mac), but manually changing the contents of these files gets treated as file corruption. Any idea how to spoof it?
Plugin information are publicly available and are easily inspected with something like this:
var x=navigator.plugins.length; // store the total no of plugin stored
console.log(x);
var txt="";
for(var i=0;i<x;i++)
{
txt=navigator.plugins[i].name;
console.log(txt);
}
I assume you want to modify an extension that you have installed on your machine in order to improve it.
You can use the Developer Mode and load the modified extension:
Extensions that you download from the Chrome Web Store are packaged up
as .crx files, which is great for distribution, but not so great for
development. Recognizing this, Chrome gives you a quick way of loading
up your working directory for testing. Let's do that now.
Visit chrome://extensions in your browser (or open up the Chrome menu
by clicking the icon to the far right of the Omnibox: The menu's icon
is three horizontal bars. and select Extensions under the Tools menu
to get to the same place).
Ensure that the Developer mode checkbox in the top right-hand corner
is checked.
Click Load unpacked extension… to pop up a file-selection dialog.
Navigate to the directory in which your extension files live, and
select it.
Alternatively, you can drag and drop the directory where your
extension files live onto chrome://extensions in your browser to load
it.
If the extension is valid, it'll be loaded up and active right away!
If it's invalid, an error message will be displayed at the top of the
page. Correct the error, and try again.
Paranoid about browser fingerprinting I guess.
If you want hide navigator.plugins list, see this plugin :
https://github.com/bcaller/plugin-privacy-chrome
See content.js#L27 :
properties.plugins = vecw({}, true);
The "real" fix is to stop the enumeration of plugins for everybody, so there is no fingerprint information (after everyone upgrades):
https://bugs.chromium.org/p/chromium/issues/detail?id=271772
If you hide navigator.plugins, that is also an identifying (single bit) feature that will make you stand out since there will be very few users who hide navigator.plugins. Which is why you'd want to spoof.
From another answer, from #Hors Sujet, https://github.com/bcaller/plugin-privacy-chrome is a great place to start how to program a spoof. You'll want to look like the vast majority of Chrome users (I'm not sure that actually exists, though.)
But what you likely really want is EFF's Privacy Badger.
Start here to see the number of bits you can be fingerprinted by:
https://panopticlick.eff.org/
And then install Privacy Badger from here:
https://chrome.google.com/webstore/detail/privacy-badger/pkehgijcmpdhfbdbbnkijodmdjhbjlgp
A fellow developer and I are on exactly the same Firefox version (41.0.1) using the exact same steps to reproduce a text-layout bug on our web application after hard cache refreshes using the same production server (no local assets), and he sees the bug but I don't. We tried on a 3rd developer's browser (same Firefox version) and he does not see the bug, so it seems isolated to this one browser instance. Both machines are identical - Windows 7 on Lenovo Thinkpad T420. It's a CSS text layout bug - text overflows the box onto multiple lines. I've linked to an image below.
Image of bug here
We have also tried:
Running the problem browser in private browsing mode.
Starting the problem browser in safe-mode (to disable plugins).
Doing a diff between the CSS source file each browser is seeing - they are binary equal
Does anyone have any ideas why this might happen or how else to try to debug it?
Edits:
Other things we have tried:
Reset zoom levels on both (ctrl+0)
I can see canvas (lines, drawings, etc.), but not canvas text in Firefox profile A.
I'm on Firefox 38.0.5 EME-free on Windows 7. I haven't done anything to the Firefox folder. I can see canvas text on my other profile B.
Here's an example of what I want to be able to see: HTML canvas fillText() Method.
Profile A: the canvas appears as a white rectangle.
Profile B: I see "Hello World! Big Smile".
I tried about:config and searched for "canvas", but the entries were the same in both my profiles.
In Detecting HTML5 Features - Canvas Text, it says:
Your browser supports the canvas text API
I get these logs in the browser console if I load the w3schools site:
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate]
WindowsPreviewPerTab.jsm:406:0
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
tryit.asp
POST ...w3schoolslink...tags/tryit_view.asp
[HTTP/1.1 200 OK 210ms]
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it.
tryit_view.asp
And the last two if I click "See Result" on the same w3schools page.
Don't tell me to reset Firefox. I've spent years customizing it just the way I want.
Is it possible that you don't have the used font in both profiles?
I have seen these rectangles as text in cases where I was trying to show "letters" that are not part of the used font. For example I tried to show musical symbols which are defined in unicode, but the most fonts I know don't support them.
Preamble
It seems this issue is not present in Firefox 41.0.1.
Fix1 - TL;DR
Set gfx.direct2d.disabled to false.
Fix2 - Alternative
When gfx.direct2d.disabled is true
Set gfx.canvas.azure.backends to cairo
Using Fix1 has the side effect of botching fonts in webpages and view-source (at least for me), while this can be used to keep direct2d disabled while still rendering canvas text.
I tested that after stumbling on this:
Bug 842521 - PDF.js won't render text when DirectWrite is enabled with both Skia and Cairo backends
The long answer for Fix1
While this is not really a programming question, in the hope that it gets migrated rather than deleted, I have a possible solution.
I ran into the same issue where my regular Firefox profile would not display canvas text while a fresh profile had no issue. Using safe mode was also ineffective.
Going through preferences in about:config, I eventually toggled gfx.direct2d.disabled to false and text in canvas was then available after restarting the browser.
The likely cause of gfx.direct2d.disabled being set to true is having disabled hardware acceleration by unchecking Use hardware acceleration when available in Options > Advanced.
Note that toggling that preference alone will not be considered by Firefox to reenable hardware acceleration, as that only happens when changing the pref layers.acceleration.disabled, which has apparently no influence over this issue.
My website system is running on chrome 37+ and using Angular.js and bootstrap.
For some reason, I can't print my website.
When i try to print my website (using the browser print dialog), I usually get a blank print preview ("can not load print preview"). Sometimes it is not blank, but not really show my website.
I tried to run my website on some google chrome versions and some computers and it is not working.
I have been searching for reasons, but can't find one that will fix this issue.
Let my know for reasons for this issue. Thank you.
Chrome actually does have emulation of printing. See
You'll find this in a tab adjacent to console within developer tools. By enabling CSS media on print, you'll see your site with any print media applied. Once enabled, you may use the element inspection as usual to see how those extra css rules affect your site.
In particular, bootstrap will remove any background, and run a bunch of defaults across many typical elements.
Also, see this answer https://stackoverflow.com/a/21156904/2923245
I'm building a simple html menu with unordered lists and I'm trying to prevent google chrome browser to display its magnifier every time I click a link.
The browser considers the li's to be too close from each other for the user to click it accurately. But I disagree!
How could I disable/cancel/prevent this behavior, other than setting a bigger padding on the li elements please? Is there even a way?
I think I found a way and it's so stupid I don't know how I didn't think of it sooner...
Just change the viewport meta tag to disable zooming on the page and the magnifier feature won't bother you anymore.
i.e.
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
I tested this on Galaxy Nexus and Galaxy Note with success. Any other input and feedback is welcome!
[EDIT]
After experimenting a lot with mobile UX I'd advise to... DESIGN BIGGER BUTTONS!
I don't think there is a way to disable this as it is a feature of the Android Chrome browser.
Unfortunately, the source code for Android Chrome browser isn't open source (yet) so I can't take a look.
You may find it useful to report a bug here: new.mcrbug.com
It seems to work with this CSS declaration:
-webkit-touch-callout:none;