AngularDart on Firefox fails with "receiver.webkitCreateShadowRoot is undefined" - angularjs

I have an AngularDart application that is working fine on Chromium and Chrome with Javascript. But in Firefox and IE, I get the following error:
[14:36:14.648] "NullError: receiver.webkitCreateShadowRoot is undefined
STACKTRACE:
.Element.createShadowRoot$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:84445
J.createShadowRoot$0$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153659
._ComponentFactory.call$6#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11337
.BlockFactory__instantiateDirectives__closure2.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11097
.Primitives_applyFunction#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:5148
._FactoryProvider.get$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125034
J.get$2$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153716
.DynamicInjector__getInstanceBySymbol_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124806
._defaultCreationStrategy#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125162
.Binding.creationStrategy$3#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:125271
.DynamicInjector._getInstanceBySymbol$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124652
.DynamicInjector.get$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:124694
J.get$1$x#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153713
.BlockFactory__instantiateDirectives_closure3.call$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:11183
.IterableMixinWorkaround_forEach#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:22126
.JSArray.forEach$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:1995
J.forEach$1$ax#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:153707
.BlockFactory._instantiateDirectives$5#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10887
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10816
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory._dom$_link$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10818
.BlockFactory.call$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10776
.ngBootstrap_closure0.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7661
._rootRun#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:27183
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
.NgZone__onRun_closure.call$0#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10306
.NgZone._onRunBase$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10162
.NgZone._onRun$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:10181
$$.BoundClosure$4<.call$4#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:424
._ZoneDelegate.run$2#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:34652
._CustomizedZone.run$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:35046
.ngBootstrap#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:7485
.main#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:130170
._IsolateContext.eval$1#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3635
.startRootIsolate#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:3301
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161315
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161295
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:161309
#http://127.0.0.1:3030/foobarUI/web/foobarui.dart.js:9
"
Here is my foobarUI/pubspec.yaml:
name: foobarUI
description: A sample web application
dependencies:
angular: 0.9.3
browser: any
json_object: any
petitparser: any
unittest: any
foobar:
path: ../foobarLib
I tried to add the js, shadow_dom and web_ui modules but it made no difference.
I tried to add "useShadowDom = true;" (and false) to the main dart file, no difference.
From the error, it seems obvious that the webkit support for DOM shadow root is missing but why is this module not handling this ?
The same error occurs with angular.dart.tutorial chapter_03 sample. This is clearly an issue with Angular.Dart. Bug filed as: https://code.google.com/p/dart/issues/detail?id=15752

The Dart bug for issue is at: https://code.google.com/p/dart/issues/detail?id=15144
It has been fixed in Dart bug has not been pushed to AngularDart yet. That work is blocked by https://github.com/angular/angular.dart/issues/366.

Related

PrintJS getting blocked a frame with origin issue

Hi My Main Application url is http:localhost:4000. It internally render iframe app which is http:localhost:4000/contentApp/index.html (with sandbox parameter as sandbox="allow-scripts allow-popups allow-modals allow-forms allowdownloads allow-same-origin") and its in React application.
PrintJS package, using 1.0 version and it makes call to printJS(URL)
//URL, blob:http:localhost:4000/[guid value]
It gets an error at below piece of code within printjs library.
print.js:
try{
iframeElement.focus(); // iframeElement = iframe#printJS { src: blob:http://localhost:4000/a33334343-33434-343434-343434adf', src: '', name: '', sandbox: DOMTockenList(0..)
...
// other browsers
iframeElement.contentWindow.print(); // throw CORS error at here.
} catch(error){ params.onError(error);}
finally {
(o,_function.cleanup)(params);
}
}
above, iframeElement.contentWindow.print() getting an error out with below error CORS:
Uncaught DOMException: Blocked a frame with origin "http://localhost:4000" frame accessing a cross-origin frame.
at performPrint (webpack-internal:///./node_modules/print-js/dist/print.js:898:35)
at HTMLIframeElement.iframeElement.onload (webpack-internal:///./node_modules/print-js/dist/print.js:852:11)
..
When I remove sandbox then it worked. However, I can not remove sandbox as its structure of application.
Is there any way to fix this CORS issue. Like adding some parameter in "iframe sandbox attribute" OR any option at 'printjs' to fix this issue ?
Appreciate for the help.
PrintJS, internally call iframeElement.contentWindow.print(); , I don't have control to do postMessage as its printJS package part. Though, I have control over localhost:4000/contentApp , sandbox attribute.
(Also, it looks like issue created at, "http://localhost:4000" != "BLOB:http://localhost:4000/GUIDvalue" , (which looks weird as, both are pointing to same origin".)

Error in Jimp.loadFont (use load-bmfont module) with React

I am testing Jimp.js for image manipulation (using React with react-scripts, npm: 6.14.4, node: v12.16.3)
Everything is going well except writing text on a loaded image
import Jimp from 'jimp'
Jimp.read(image)
.then(image => {
console.log('image loaded', image)
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE).then(font => {
console.log('font loaded', font)
image.print(font, 10, 10, 'Hello world that wraps!', 12)
// write image
})
})
This throws an error "error parsing font malformed file -- no element" in browser.js of load-bmfont module line 71 and dont execute the log 'font loaded'.
Googling not help i found only 2,3 items about this, associate with using custom fonts - but i use standard font from Jimp. (Using BMFont files instead of Jimp standard fonts doesnt help)
My first thought was the error ocured in a React App in the browser, so i write a Jest test to see if its work without browser context but it fail just like that.
Got any ideas?
Solved...
I'm using the React App within a Java Web Framework in a JSP File.
Jimp.loadFont(Jimp.FONT_SANS_32_WHITE)
search the font in a path that doesn`t exist for the webapp.
Moving the font files to a reachable path with context root
Jimp.loadFont(`${CONTEXT_ROOT}/foo/bar/font.font`) works.

Drupal Wiris integration

I followed this tutorial to install the Wiris plugin on a new installation of Drupal.
Once the installation was complete and I clicked on the Wiris icon to begin adding a formula, the popup window does NOT load and I get the following error in the console area:
Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin '/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/' in a call to 'postMessage'.
at http://*.*.*.*/DrupalQuiz/sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js:19:22
The code causing the problem is as follows:
e.source.postMessage(postVariable, _wrs_conf_path);
I'm at a loss how to deal with this issue.
I don't have a complete fix but I was able to get it working locally by replacing _wrs_conf_path with the base path of my dev box. _wrs_conf_path was evaluating to a relative path to the plugins folder.
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_conf_path);
}
with
if (typeof(e.source) != 'undefined') {
e.source.postMessage(postVariable, _wrs_currentPath);
}
in the /sites/all/libraries/ckeditor/plugins/ckeditor_wiris/core/core.js file.
Edit: I replaced _wrs_conf_path with one of their internal variables _wrs_currentPath and that seemed to fix the issue.

Error message [null] or [null,null,null,null] when using browser.actions protractor

When runnning code like:
element(by.css('input')).sendKeys(arg1).then(function() {
browser.actions().sendKeys(protractor.Key.ENTER).perform().then(callback);
});
Or anything using browser.actions()
I'm getting an error message like:
1) Scenario: User goes back to search results - features\headerNavigations.feature:31
Step: When I enter "1000W Rotary Lawnmower" - features\headerNavigations.feature:34
Step Definition: ..\node_modules\cucumber-tsflow\src\BindingDecorator.ts:163
Message:
[ null ]
Ever since updating to chromedriver 2.27 I'm seeing this issue.
Node: 6.9.1
Protractor: 5.1.0
Chrome: 56.0
Chromedriver: 2.27
Seen this which maybe similar:
https://github.com/angular/protractor/issues/4067
And raised a question here:
https://groups.google.com/forum/#!forum/chromedriver-users
Not seeing much action from the protractor or chromedriver community

Esri bootstrap-map-js and Invalid argument error on IE 7/8

I'm using this awesome project called bootstrap-map-js.
A simple framework for building responsive mapping apps with ArcGIS
and Bootstrap.
Since Esri ArcGIS JavaScript API states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Maybe it is and the problem is in my code...
I'm getting an Invalid Argument error with no further info on IE 11 Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...
Looks like dojo.require is barking somewhere. See this related question: Dojo nested requires on IE7 and IE8 causes Invalid Argument Exception
If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel! otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.
Can anyone shed some light on what's going on with finicky IE? Is there anything I can do to see more from the error? As you see in the image, there's no message, description, etc. :(
Here's the minimum code I had to assemble to get to what was causing the error:
<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>
<script type="text/javascript">
function init()
{
require([
"esri/map",
"/myproject/Scripts/bootstrapmap.js",
"esri/layers/FeatureLayer"
], function(
Map,
BootstrapMap,
FeatureLayer
)
{
// Get a reference to the ArcGIS Map class
var map = BootstrapMap.create("mapDiv", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 12
});
alert('hey Leniel!');
});
}
dojo.addOnLoad(init);
</script>
I made some progress on this issue as you can read here.
I read Configuring Dojo with dojoConfig and then added this before ArcGIS JS API script tag:
<!-- set Dojo configuration, load Dojo -->
<script>
dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
async: true
};
</script>
Now I get a more descriptive error instead of only Invalid argument as before. IE Dev Tools shows this:
SCRIPT87: Invalid argument.
File: init.js, Line: 136, Column: 65
This is line 136 in init.js when I click on the link provided by IE Dev Tools:
b;b=d[b]?"cssFloat"in f.style?"cssFloat":"styleFloat":b;if(3==k)return q?g(f,e):f.style[b]=e;for(var r in b)l.set(a,r,b[r]);return l.getComputedStyle(f)};return l})},"dojo/dom-geometry":function(){define(["./sniff","./_base/window","./dom","./dom-style"],function(b,n,k,m){function l(a,b,d,c,h,f){f=f||"px";a=a.style;isNaN(b)||(a.left=b+f);isNaN(d)||(a.top=d+f);0<=c&&(a.width=c+f);0<=h&&(a.height=h+f)}function r(a){return"button"==a.tagName.toLowerCase()||"input"==a.tagName.toLowerCase()&&"button"==
Sounds like IE 7/8 is barking about some crazy CSS manipulation done by ArcGIS JS API.
Fixed it connecting the dots...
Searched for NaNpx e's value as I had never seen that before. Found this jQuery ticket.
Followed the advice given there and changed that return in line 136,
from:
return q?g(f,e):f.style[b]=e;
to:
return q?g(f,e):f.style[b]=(e=='NaNpx'?'0px':e);
Note: I'm using jQuery 1.11.0 which supports IE 7.

Resources