How can you change Firefox 25's Network Info Popups? - javascript

I noticed a change in Firefox 25 beta, soon to be released: Go to chrome://browser/content/devtools/webconsole.xul, view source, and in the current Firefox (24) you see:
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="devtools-webconsole"
macanimationtype="document"
fullscreenbutton="true"
title="&window.title;"
browserConsoleTitle="&browserConsole.title;"
windowtype="devtools:webconsole"
width="900" height="350"
persist="screenX screenY width height sizemode">
<script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
<script type="text/javascript" src="webconsole.js"/>
<commandset id="editMenuCommands"/>
...
In Firefox 25, however, the reference to webconsole.js is replaced with an inline script, function goUpdateConsoleCommands() with two goUpdateCommand calls.
Devtools-tweaks is not working for the network popup now, because the webconsole.js link no longer exists on that window. The code here has nothing to modify to change the popup: https://github.com/programmin1/DevTools-Tweaks/blob/master/content/netWinOverlay.js
Is there any easy way to re-hook this functionality into the network popup? Will JSON/xml parsing be introduced in Firefox soon, making this unnecessary?

The WebConsoleFrame stuff was ported to the add-on SDK loader in bug 877262.
Judging from the code, the following should give access to the WebConsoleFrame the add-on "uses":
var {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
var {WebConsoleFrame} = devtools.require("devtools/webconsole/webconsole");
As for the second part of your question: Will the devtools support the same stuff natively?
I'm not sure. You should get in touch with the devtools team and ask them and have a look at the existing bugs: Open devtools bugs containing "json". And/or file a new enhancement bug.

Related

How to debug ScriptError on line 0 on webview?

I have built a mobile webapp in html/js and I am using the 'window.onerror' to track client side js errors and report them to the server.
Recently I noticed that I receive many reports of ScriptError on line 0.
A quick google search brought me to discussions like Cryptic "Script Error." reported in Javascript in Chrome and Firefox and https://ravikiranj.net/posts/2014/code/how-fix-cryptic-script-error-javascript/
For most people such errors seem to be triggered by failures in scripts that are included from a foreign origin. But unfortunately that's not the case for me.
After many hours of debugging I came up with the following minimal example to reproduce the error:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="google" content="notranslate"/>
<script type="text/javascript">
function init() {
window.onerror = function() {
alert(JSON.stringify(arguments));
}
}
</script>
</head>
<body onload="init()">
<h1>Hello</h1>
<svg width="300" height="300">
<a href="#">
<rect x="50" y="50" width="200" height="200" />
</a>
</svg>
<p>
Link
</p>
</body>
</html>
As we can see it's a simple html page with no javascript at all except for the onerror handler itself.
In Safari (ios 12.4.1) no error is triggered. But in both Google Chrome for iOS and Firefox for iOS a ScriptError on line 0 is reported each time the link inside the <svg> element is tapped - but not when tapping the link outside the <svg>. Note that no js event handler is attached to the <svg>.
A live version of the code is online at https://static.laszlokorte.de/scripterror.php
I know that all third party browsers on iOS actually just use safari under the hood extending in with a few custom features. I suspect that those custom features cause the error but I have no idea how to track it down further.
Why does clicking a link inside a plain svg element causes an error in iOS Chrome and Firefox but not in Safari? Is there a way to connect the Safari Webdev tools to mobile browsers other than native Safari?
Update
After taking a deeper look at both the Chrome(iOS) and Firefox(iOS) source code I now found the cause of the problem. Both browsers inject javascript code that runs on touchstart and processes the event's target node. Both browsers check if an '' or '' element has been touched and try to access their their href or src attribute respectively. They both then try to send the attributes values via webkit.postMessage to the host application.
The error seems to be caused by the fact that an <a> element inside an <svg> is actually an SVGAElement and it's href attribute is not a String but an SVGAnimatedString which (other than String) can not be cloned to be sent to another process.
The corresponding code for Firefox can be found here:
https://github.com/mozilla-mobile/firefox-ios/blob/826cb396a9eb225b7eb667b47b245e2d98d26ed8/Client/Frontend/UserContent/UserScripts/AllFrames/AtDocumentEnd/ContextMenu.js#L14-L35
The code for Chrome is here:
https://github.com/chromium/chromium/blob/master/ios/web/web_state/js/resources/all_frames_context_menu.js#L136-L139
So for Chrome the solution is actually simple because it allows to explicitly opt-out of all this by setting the css property -webkit-touch-callout: none (You can see the check for that in the linked file). For example like this:
#namespace svg url(http://www.w3.org/2000/svg);
svg|a {
-webkit-touch-callout: none;
}
For Firefox I have not found a easy solution yet.
Update 2
For Firefox I now came up with the following monkey patch solution:
(function() {
var origClosest = SVGElement.prototype.closest;
SVGElement.prototype.closest = function (sel) {
var c = origClosest.apply(this, arguments);
if(c && sel === 'a' && c.namespaceURI === this.namespaceURI) {
return c.parentNode && c.parentNode.closest(sel);
} else {
return c;
}
};
})();
I override the closest method (that Firefox itself uses to find the touched <a>) on an SVG elements with my own method that skips all <a> elements that belong to the SVG namespace.
Additionally I submitted an issue in the Firefox repo at Github and an issue for Chromium.

Dynamic creation of ActiveX on MSIE 11 is broken?

OS version: Windows 8.1
MSIE (Microsoft Internet Explorer) version: 11.0.9600.16476 (KB2898785)
I have a simple HTML code that is creating my ActiveX Control (AX).
This code always worked in all previous versions of MSIE, but with the new MSIE-11 on Windows 8.1 it stopped working.
I bring here the HTML code that demonstrates the problem.
Please note:
The static HTML code that creates my AX (<OBJECT>) always work,
The dynamic JavaScript code that creates my AX (document.createElement) fails on MSIE 11
<BODY>
<BR>
<BR>
<INPUT TYPE="BUTTON" VALUE="CreateAX" OnClick="CreateAX()" STYLE="WIDTH: 89PX" />
<BR>
<BR>
<!-- This always work: -->
<OBJECT ID = "MyCtrl"
CLASSID = "CLSID:F417FD96-3D17-4556-80AA-F7CEEE1E3FD8"
WIDTH = 100
HEIGHT = 100>
</OBJECT>
<BR>
<BR>
</BODY>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function CreateAX()
{
// This will not work on MSIE 11
var playbackObjectGlobal = document.createElement('object');
playbackObjectGlobal.setAttribute('id', 'MyCtrl2');
playbackObjectGlobal.setAttribute('classid','CLSID:F417FD96-3D17-4556-80AA-F7CEEE1E3FD8');
playbackObjectGlobal.setAttribute('width', '200');
playbackObjectGlobal.setAttribute('height', '200');
playbackObjectGlobal.setAttribute('hidden', 'false');
document.body.appendChild(playbackObjectGlobal);
}
</SCRIPT>
After debugging I found that my boject does get created but without a window (m_hWnd==NULL) thus all GUI related features and events are disable.
Anyone is familiar with this problem?
Thanks, PazO
After opening a call with Microsoft support I managed to resolve this issue. I will bring here Microsoft answer as is:
With further debugging, we seems to be hitting known behavior and design change in dynamically adding objects.
Earlier, certain actions could force an object to instantiate prior to entering the control tree, which was breaking a number of sites.As part of fixing that, we now fully commit an object when it enters the tree and its identity cannot be changed after that point. Because the repro page doesn't set the CLSID property until after the object enters the tree, the value is ignored.If the step to set the CLSID on the control is moved before the object is inserted into the tree, the control should instantiate correctly.In addition to the above changes, we also removed “Hidden” attribute as it was setting the object in hidden mode.
Before fix:
function CreateAX()
{
var playbackObjectGlobal = document.createElement('object');
playbackObjectGlobal.setAttribute('id', 'MyCtrl2');
playbackObjectGlobal.setAttribute('classid','CLSID:F417FD96-3D17-4556-80AA-F7CEEE1E3FD8');
playbackObjectGlobal.setAttribute('width', '200');
playbackObjectGlobal.setAttribute('height', '200');
playbackObjectGlobal.setAttribute('hidden', 'false');
document.body.appendChild(playbackObjectGlobal);
}
After fix:
function CreateAX_New()
{
var playbackObjectGlobal = document.createElement('object');
// *Change-1* Next two lines swiched places:
playbackObjectGlobal.setAttribute('classid','CLSID:F417FD96-3D17-4556-80AA-F7CEEE1E3FD8');
playbackObjectGlobal.setAttribute('id', 'MyCtrl2');
// *Change-2* Object is appended before sizes are set:
document.body.appendChild(playbackObjectGlobal);
playbackObjectGlobal.setAttribute('width', '200');
playbackObjectGlobal.setAttribute('height', '200');
// *Change-3* The 'Hidden' tag was removed
}
Now all is working for me on Windows 8.1, MSIE-11.
ActiveX is highly restricted on Windows8/IE11 when in Metro mode.
It is locked down to only allowing a very limited set of controls, almost all of which are internal MS controls.
If you need to use any ActiveX controls that aren't in that list, it will only work if you're using Win8 in desktop mode. Even then, you may still need to manually set the browser settings to enable ActiveX.
See this post for more info.

View source not available in some browsers for dynamically created webpage

CONTEXT
I am creating an http://canvimation.github.com/ that uses javascript to create web pages dynamically.
The source code for my application is at https://github.com/canvimation/canvimation.github.com
The application uses Canvas to draw using vector objects the resulting drawing can then be exported as a web page. To create a web page click on the FILE icon and then 'Export Canvas to HTML'.
The exporting code opens a new window and uses document.writenl() to construct the code. The relevant function is shown at the end of the question.
All browsers I have tried produce the drawing correctly in the new window as a web page. In all browsers view source shows the expected code for the application web page.
In IE10 and Firefox it is possible to view the source of the exported code which can then be saved and the saved file used as a webpage.
For the exported web page: in Chrome 28 view source is greyed out and not available; in Safari 5 for Windows view source produces a blank window and in Opera 12 source does not do anything.
QUESTIONS
How is it possible to save or view the source of the exported webpage in Chrome, Safari and Opera?
Can anything be changed in my method to dynamically create a webpage that can have its source code viewed and saved?
RELEVANT CODE
function exportShapes()
{
var shapelist=[];
var nameZ=[];
for (var name in SHAPES)
{
nameZ=[];
nameZ.push(name);
nameZ.push(SHAPES[name].zIndex);
shapelist.push(nameZ);
}
shapelist.sort(compareZ);
newwindow=window.open('','export');
newwindow.document.writeln('<!DOCTYPE HTML>');
newwindow.document.writeln('<html>');
newwindow.document.writeln(SPACES.substr(0,3)+'<head>');
newwindow.document.writeln(SPACES.substr(0,6)+'<style>');
newwindow.document.writeln(SPACES.substr(0,9)+'#canvasarea');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
newwindow.document.writeln(SPACES.substr(0,12)+'border:black 1px solid;');
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln(SPACES.substr(0,6)+'</style>');
newwindow.document.writeln(SPACES.substr(0,6)+'<!--[IF LT IE 9]><script type="text/javascript" src = "excanvas.js" ></script><![endif]-->');
newwindow.document.writeln(SPACES.substr(0,6)+'<script type="text/javascript">');
newwindow.document.writeln(SPACES.substr(0,9)+'function setcanvas()');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
newwindow.document.writeln(SPACES.substr(0,12)+'var canvas = document.getElementById("canvasarea");');
newwindow.document.writeln(SPACES.substr(0,12)+'if (canvas.getContext)');
newwindow.document.writeln(SPACES.substr(0,12)+'{');
newwindow.document.writeln(SPACES.substr(0,15)+'var ctx = canvas.getContext("2d");');
newwindow.document.writeln(SPACES.substr(0,15)+'drawcanvas(ctx);');
newwindow.document.writeln (SPACES.substr(0,12)+'}');
newwindow.document.writeln(SPACES.substr(0,12)+'else');
newwindow.document.writeln(SPACES.substr(0,12)+'{');
newwindow.document.writeln(SPACES.substr(0,15)+'alert("Canvas NOT supported");');
newwindow.document.writeln (SPACES.substr(0,12)+'}');
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln (SPACES.substr(0,9));
newwindow.document.writeln (SPACES.substr(0,9)+'function drawcanvas(ctx)');
newwindow.document.writeln(SPACES.substr(0,9)+'{');
for(var i=0;i<shapelist.length;i++)
{
exportshape(shapelist[i][0]);
}
newwindow.document.writeln (SPACES.substr(0,9)+'}');
newwindow.document.writeln(SPACES.substr(0,6)+'</script>');
newwindow.document.writeln(SPACES.substr(0,3)+'</head>');
newwindow.document.writeln(SPACES.substr(0,3)+'<body onload="setcanvas()">');
newwindow.document.writeln(SPACES.substr(0,6)+'<canvas id="canvasarea" width="'+parseInt($("stagearea").style.width)+'" height="'+parseInt($("stagearea").style.height)+'"></canvas>');
newwindow.document.writeln(SPACES.substr(0,3)+'</body>');
newwindow.document.writeln('</html>');
newwindow.document.close();
}
If you are just trying to see the HTML after javascript rendering, then right-click > inspect element should let you see the code, at least in Chrome.
You should then be able to copy it manually - or do you need it to be done automatically?
I know in brython it's just in the variable doc.html, but that probably doesn't help you in javascript.
Similar Question
The problem is it's a blank page (about:blank), for which Chrome sees no reason to view the source code, because it should be empty. You may consider creating some sort of temp file and put all the canvas stuff into it.
Inspect Element option, suggested above, doesn't work in this case, it's not going beyond canvas tag. I suspect Chrome is rendering this as a picture, not as a vector graphics.

// #sourceurl on script tag in firefox

In firefox 19 and firebug 1.X I encountered a strange bug when trying //#sourceurl.
Basically I'm dynamically adding script tag through dom manipulation as you can see in the sample below. This does not work.
Maybe it's a limitation of ff but I find it odd that it works in chrome and not in ff.
Can you confirm this and do you have any bypass to this bug?
Ps: I don't want to use global eval() as it crash in ie when using document.write
<html>
<head>
<script type="text/javascript">
var count=0;
function addNewScriptToHead()
{
var newScriptElem;
var newScriptText;
newScriptElem = document.createElement('script');
newScriptElem.setAttribute('type', 'text/javascript');
newScriptElem.setAttribute('id', '' + count);
newScriptElem.text= 'console.log("Yay !");//# sourceURL=root/test'+count++ +'.js';
document.body.appendChild(newScriptElem);
};
</script>
</head>
<body>
<button onclick="addNewScriptToHead()">add script</button><br><br>
</body>
</html>
Experimentation has lead me to believe the following:
As of version 20.0, FF still does not support //# sourceURL directly in its inbuilt web console.
//# sourceURL does work with the Firebug addon in FF, but not completely as expected/hoped.
A. It only works for eval. It doesn't work at all for appended
script nodes like in the original question.
B. Errors will have a line number and the URL, and you can click
the error to see the line of code. However, console.log does not
seem to be affected and shows no line number or URL.
Testing this feature from within FF's web console is not advised. I got different results than testing directly in HTML at least some of the time.

Setting an image source via Javascript unreliable in Internet Explorer

I am simply trying to change the SRC attribute of an image via javascript like so:
document.getElementById('fooImage').src = img;
Where img is a variable that has a link to the file.
In all other browsers (Chrome, Firefox, Safari) this works. In IE (7+) this also works too sometimes.
Using IE's built-in developer tools, I can see that the image's SRC tag is set. Is there something else in the locals window that could help me debug why the image doesn't actually show on screen?
I've also tried using jQuery to do this and same outcome:
$("#fooImage").attr("src", img);
An ideas?
In debugging this I would hard code it first...
document.getElementById('fooImage').src = "myimage.png";
I've used the following in my website and it works like this...
var imgCounter = document.getElementById('formtimer');
imgCounter.src = "graphics/odometers/1.png";
Some other things to check:
Make sure your ID= tag is not in the <DIV section but inside the <IMG section... for example <div class="style1"><img src="yourpicture" id="someid">. If `id='someid' is in the div tag then you can't change the picture / the picture won't show up.
are you using window.onload?, body onload? the proper way to use the first is..
window.onload = function () { YourFunctionHere(); };
Try a different test image. I had issues in the past with showing png's, I changed it to a gif or jpg and it worked. I don't understand how that was "way back" but it doesn't seem to be an issue anymore but hey... something to try.
try a full url
using https?
try sticking the image somewhere else in your program and see what happens.
try adding this to your HTML (put your website in place of mine - lookup BASE href on google for more info)
<BASE href="http://perrycs/" />
Make sure the image isn't hidden behind a layer (I know it works in some browsers)
tell us the website so we can check it out and get more info to help you in debugging this, seeing context (surrounding code) helps...
Given that it works in other browsers, searching on this topic it seems that often the problem is how IE caches images (ref. Epascarello's comment). Your code is the same as what I have - it works fine except in IE10.
I too, faced this conundrum. Then discovered that it works in 'Page Inspector', so after some digging discovered that (in Internet Explorer) by going to Tools.Internet Options.Advanced
uncheck the 'Disable script debugging (Internet Explorer)' and the one below it.
I found that with IE9 after changing an image.src with
var strVar="C:Users/x/Desktop/caution.png"
image.src=strVar
and calling an alert(image.src) I would get something like this n the alertbox:
file:///C:Users/x/Desktop/"C:Users/x/Desktop/caution.png"
So I tried
image.src=strVar.replace(/\"/g,"")
to remove qoutemarks
and it worked!
alert(image.src)
file:///C:Users/x/Desktop/caution.png

Categories

Resources