I'm running an application which is in the cloud on Chromium Browser on Linux (Raspberry Pi OS).
When I click on a textbox (where the text is already there) it selects the text for half of the second and then it automatically shows the context menu preventing me from modifying the content. (This also happens in Windows in Chrome).
This does not happen in the desktop app and in Firefox on Windows. I was wondering why that is? Is there a setting to change this? I noticed that behaviour works as expected if you hold the finger on the text box for 2 seconds however the single-finger touch just highlights and shows the context menu which is not practical.
I would essentially want to swap this the other way around; touch and hold to simulate right click and click to select.
This only happens in Chrome. I do not have much control of the cloud application therefore I was wondering if there is any particular setting in Chrome which controls this behaviour. I tried changing the system settings on windows. I went to chrome://flags and disabled the following:
Omnibox rich entity suggestions; Send tab to self omnibox sending animation; Touch UI layout;
Touch initiated drag and drop; Enable experimental fling animation; Enable resampling input events;
Context menus show full URLs; Show autofill predictions;
Omnibox preserve default match against async update; Experimental system keyboard lock;
Omnibox on device head suggestions; Select HW overlay strategies; WebUI tab strip;
Select which UI to use for translate bubble; WebUI tab strip demo options; Scrollable TabStrip;
Omnibox on-focus suggestions; Substring matching for autofill suggestions;
Omnibox local entity suggestions; Omnibox Zero Suggestions on SERP / On-Focus Query Refinement;
Omnibox Experimental Keyword Mode; Filtering scroll predictions; Focus mode;
Zero-copy rasterizer; Omnibox Experimental Suggest Scoring;
Enable Probing on Navigation Predictor Isolated Prerenders; Hardware Media Key Handling;
Media Session Service; Audio Focus Enforcement;
I also went into the developer settings to see if there is anything in there but was unsuccessful.
I also tried the google extension to block right-click behaviour however it did not work.
I would like to go back to developers of the cloud app and ask them to correct this but the only question is why it works on other browsers.
I tried other browsers on Raspberry Pi but they nowhere near the performance of chromium.
Related
On the iPhone's Instagram app browser(in app) if you open a website that includes html inputs of any type, something strange happens.
In the beginning everything is working, but once you tap an input and type something ( and the keyboard is opened), after you close the keyboard you can't click on anything anymore because all buttons/inputs/elements are clickable in a different location than where they showed ( button is showed in the original 100px location but click events are now on 50px).
It looks like after the keyboard opens the whole location calculation is shifted up(because the keyboard pushes the whole body up)
How to even begin to debug such thing ?
Honestly, I've been there. There is no way to debug the in-app browser (you can try on an iphone device mirroring with Chrome in MAC, but you will eventually fail), but I've tried without success.
It turned out that after digging around with similar issues, there was a caching issue and some disabled features with WP ENGINE from my client. They were able to fix it by allowing some parameters on nginx settings and then the In App browser wasn't stucked anymore.
I know every issue is different, but at this time, I haven't found a way to debug the In - App browser.
I can't speak to iOS specifically, but there definitely are ways to remote debug things.
My go-to for stuff like this (speaking from experience of browsers on gaming consoles) is Weinre: https://people.apache.org/~pmuellr/weinre/docs/latest/Home.html You get something similar to Chrome Developer Tools, but it works over a Socket.IO connection.
Another tool I like to use is Fiddler. While it won't help you with your DOM issues, if you ever need to debug network stuff on oddball devices, it's perfect. It serves as a proxy server and can intercept all your connections, including HTTPS. https://www.telerik.com/fiddler
Turns out, that it's a fixed position and it's not supported, which means when keyboard is closed, the system will push back the whole view but click events stay up (because it's being pushed up when you open a keyboard).
So instead of make it an absolute modal, which has it's own problem, we keep it fixed, BUT, we do the pushing up/down by our own.
We could just push the screen back down on input unfocused, but if user click the next field you get unwanted behavior, so we create a delay based machine like so :
var isfocused=0;
var focusTimer=0;
$("input").blur(function() {
isfocused=0;
focusTimer = setTimeout(focusDone, 150);
});
$("input").focus(function(){
isfocused=1;
});
function focusDone(){
if(isfocused===0)
$(window).scrollTop(0,0);
clearTimeout(focusTimer);
}
This works great on social browsers, with fixed positioned modals that has inputs inside them.
In Google Chrome, I can type the following in a new browser:
pycharm://open?file=file_name
and press Enter. The result is that PyCharm IDE will launch and open the specified file. I have also come across similar links that launch other applications.
I tried to look for information about such links but did not reach any conclusions. Specifically, I would like to know:
what is the name of such a link?
who defines those links? Since I cannot find any documentation about those links on PyCharm's side, I am led to think that those links are some form of standard command that work for every external application?
how do those links work under the hood? Is it the browser spawning a new subprocess or does the browser somehow communicate the command to the OS which takes it from there?
I can also do the above programmatically:
window.open('pycharm://open?file=file_name', '_top');
How can I ensure that the focus switches to the target application? (Right now the application does indeed start, but the focus stays on Chrome.)
I am developing a chrome extension. When I install it one of its icon is displayed in address bar. I want that icon should not be displayed after installation.
Starting with Chrome 49 (see the announcement and detailed description) all extension icons are displayed in the browser toolbar:
[...] each extension the user has installed has a persistent UI surface. By default, this will be in the toolbar to the right of the omnibox (where browser actions are now), and the user can choose to hide ("overflow") these actions in the Chrome menu.
The reason for this is to protect our users. We've heard too frequently that many users are unaware of the extensions they have installed, whether this is due to sideloading, installation by phishing, or simply the user forgetting how many and which are installed. Unfortunately, extensions consume computing resources, and may have significant security, privacy, and performance impacts. Because of this, we've decided we need to increase user visibility.
What this means for your extension:
If the extension has a browser action: Nothing! (Apart from the slightly different hide/overflow functionality.)
If the extension has a page action: The extension will be given a persistent icon in the toolbar. On pages where the extension's page action wouldn't normally be visible, the action will be greyed out, indicating that it doesn't want to act. On pages it does want to act, it will be fully-colored.
If the extension has no action: Similar to page actions, the extension will be given a persistent icon in the toolbar. It will be shown with the greyed-out look all the time.
Displaying the action persistently, even in the cases of a previously hidden page action or an extension with no action, is necessary because the presence of an action doesn’t always correlate with the extension acting. We also can’t show the action conditionally on, e.g., a per-tab basis, because there are many actions that are not correlated with any tab. In order to ensure users are aware of the extensions they have installed that could be affecting their browser, we need to ensure each extension is visible.
We've done our best to limit the functionality this breaks, and hope you understand the trade-off between developer inconvenience and user benefit. Thank you for understanding as we keep our users safe!
An end user of your extension may manually hide the icon either by adjusting the overall toolbar width (click the space between addressbar and toolbar and drag) or by rightclicking an icon and selecting Hide or Show:
I'm trying to view the emulation panel but I can't find it anywhere. Everywhere I've looked it says to open an overrides panel to find it but that's missing too. I also can't find any helpful or new answers to my question. Pressing esc only opens up console and there's nothing in settings that seems to help. Can someone please tell me how to reach it?
Instead of emulation in the drawer Device Mode is now offered for emulating other devices. It provides many benefits over the old emulation mode, such as taking into account the meta viewport tag on render. So what you see is much closer to what you'd get in real life.
I'm using 51.0.2704.103 (64-bit) on a Mac.
Cmd-Opt-i to open console.
Click the button with three vertical dots and the very top right of the Developer Tools window.
Select: more tools > sensors:
If the console draw is not already open it will open. Either way there should now be a sensors tab next to the console tab on the console draw. Click this tab and follow your nose from there.
Note that this tab had an x by it. Hitting this will hide the sensors tab and next time you use it you will need to follow the steps above again to reinstate it.
When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.