XUL + javascript module : TypeError: xxx.yyyy is not a function - xul

I'm playing with XUL and modules ( https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Using )
I've defined a small module: under hello01/chrome/content/js/hello.jsm
this.EXPORTED_SYMBOLS = ["Hello", "foo"];
function foo() {
return "foo";
}
var Hello = {
name : "bar",
size : 3,
incr : function()
{
this.size++;
return this.size;
},
open : function()
{
return this.incr();
}
};
this module is loaded from hello01/chrome/content/main.js
Components.utils.import("chrome://hello/content/js/hello.jsm");
function jsdump(str) {
Components.classes['#mozilla.org/consoleservice;1']
.getService(Components.interfaces.nsIConsoleService)
.logStringMessage(str);
}
function showMore() {
document.getElementById("more-text").hidden = false;
jsdump("Hello!");
jsdump(Hello.incr());
jsdump(Hello.open());
}
from xul window:
(...)
<button label="More >>" oncommand="showMore();"/>
(...)
when I click on the button, I see in the jsconsole :
Hello !
4
Error: TypeError: Hello.open is not a function
Source File: chrome://hello/content/main.js
Line: 14
why does xul know about Hello.incr but not about Hello.open ?
update: code is available here: https://github.com/lindenb/xul-bootstrap

ok, got it: XUL-Runner caches some files under ${HOME}/${VENDOR}
It silently ignored my changes and used the old file in the cache.
See XULRunner ignores updates on edited files

Related

Call SQL linter's API from Codemirror with Typescript

I am trying to call an API to lint a SQL query written in Codemirror (actually I use Angular and the wrapper ngx-codemirror)
Unfortunately, I could not call the API because this is considered undefined:
data-analyzer.component.html:81 ERROR TypeError: Cannot read property 'analyzerService' of undefined
at testA (data-analyzer.component.ts:624)
at lintAsync (lint.js:134)
at startLinting (lint.js:152)
at Object.lint (lint.js:248)
at new CodeMirror (codemirror.js:7885)
at CodeMirror (codemirror.js:7831)
at Function.fromTextArea (codemirror.js:9682)
at ctrl-ngx-codemirror.js:64
at ZoneDelegate.invoke (zone-evergreen.js:365)
at Zone.run (zone-evergreen.js:124)
My code is as follow:
<ngx-codemirror
#ref
name="query"
[options]="config"
[(ngModel)]="item.query"
(keypress)="CMonKeyPress($event)"
>
</ngx-codemirror>
config = {
mode: 'text/x-mysql',
showHint: true,
lint: {
lintOnChange: true,
getAnnotations: this.lintSQL
},
gutters: [
'CodeMirror-linenumbers',
'CodeMirror-lint-markers'
]
};
constructor(
private analyzerService: DataAnalyzerService
) {}
lintSQL(a: string, b: LintStateOptions, cm: Editor) {
const found: Annotation[] = [];
// The error occurs here
this.analyzerService.lint(this.item.query).subscribe(
(r: any) => {
console.log(r.data);
},
(err) => {
console.log(err);
}
);
// So far I return an empty array, the focus is to get the results from the service
return found;
}
I would like to know how could I access to the service in the linting function.
Found from this question, the solution is to bind (this) as follow:
getAnnotations: this.lintSQL.bind(this)

Set programmatically jsonValidation for dynamic mapping

I am creating a new vscode extension, and I need to extend the standard usage of the jsonValidation system already present in vscode.
Note : I am talking about the system defined in package.json :
"contributes" : {
"languages": [
{
"id" : "yml",
"filenamePatterns": ["module.service"]
},
{
"id" : "json",
"filenamePatterns": ["module.*"]
}
],
"jsonValidation": [
{
"fileMatch": "module.test",
"url": "./resources/test.schema"
}
]
}
Now, I need to create a dynamic mapping, where the json fields filematch/url are defined from some internal rules (like version and other internal stuff). The standard usage is static : one fileMatch -> one schema.
I want for example to read the version from the json file to validate, and set the schema after that :
{
"version" : "1.1"
}
validation schema must be test-schema.1.1 instead of test-schema.1.0
note : The question is only about the modification of the configuration provided by package.json from the extensions.ts
Thanks for the support
** EDIT since the previous solution was not working in all cases
There is one solution to modify the package.json at the activating of the function.
export function activate(context: vscode.ExtensionContext) {
const myPlugin = vscode.extensions.getExtension("your.plugin.id");
if (!myPlugin)
{
throw new Error("Composer plugin is not found...")
}
// Get the current workspace path to found the schema later.
const folderPath = vscode.workspace.workspaceFolders;
if (!folderPath)
{
return;
}
const baseUri : vscode.Uri = folderPath[0].uri;
let packageJSON = myPlugin.packageJSON;
if (packageJSON && packageJSON.contributes && packageJSON.contributes.jsonValidation)
{
let jsonValidation = packageJSON.contributes.jsonValidation;
const schemaUri : vscode.Uri = vscode.Uri.joinPath(baseUri, "/schema/value-0.3.0.json-schema");
const schema = new JsonSchemaMatch("value.ospp", schemaUri)
jsonValidation.push(schema);
}
}
And the json schema class
class JsonSchemaMatch
{
fileMatch: string;
url : string;
constructor(fileMatch : string, url: vscode.Uri)
{
this.fileMatch = fileMatch;
this.url = url.path;
}
}
Another important information is the loading of the element of contributes is not reread after modification, for example
class Language
{
id: string;
filenamePatterns : string[];
constructor(id : string, filenamePatterns: string[])
{
this.id = id;
this.filenamePatterns = filenamePatterns;
}
}
if (packageJSON && packageJSON.contributes && packageJSON.contributes.languages)
{
let languages : Language[] = packageJSON.contributes.languages;
for (let language of languages) {
if (language.id == "json") {
language.filenamePatterns.push("test.my-json-type")
}
}
}
This change has no effect, since the loading of file association is already done (I have not dig for the reason, but I think this is the case)
In this case, creating a settings.json in the workspace directory can do the job:
settings.json
{
"files.associations": {
"target.snmp": "json",
"stack.cfg": "json"
}
}
Be aware that the settings.json can be created by the user with legitimate reason, so don't override it, just fill it.

Interacting with color input with protractor

It's simple to set checkbox or text input value. But how can I set value to input with color type using protractor? I tried to do this:
element(by.id("prop_border-color")).click();
browser.driver.actions()
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys("00")
.sendKeys(protractor.Key.ENTER)
.perform();
but it triggers this error:
Failed: : Failed to read the 'sessionStorage' property from
'Window': Storage is disabled inside 'data:' URLs.
Is it possible to interact with color picker window somehow?
UPD:
full test:
describe('Panel Editor app', function() {
function addToplevel() {
var elem = element(by.css(".widget-list-item-toplevel"));
var target = element(by.id('droparea'));
browser.driver.actions()
.mouseDown(elem)
.mouseMove(target)
.mouseUp(target)
.perform();
}
function addToToplevel(selector) {
var elem = element(by.css(selector));
var target = element(by.css('.toplevel'));
browser.driver.actions()
.mouseDown(elem)
.mouseMove(target)
.mouseUp(target)
.perform();
}
beforeEach(function() {
browser.get('http://localhost:8080/webapps/panel_editor/index.html');
});
afterEach(function() {
browser.executeScript('window.sessionStorage.clear();');
browser.executeScript('window.localStorage.clear();');
});
it('should check all widgets in toplevel', function() {
addToplevel();
addToToplevel(".widget-list-item-rows");
browser.sleep(300);
element(by.model("dialogCtrl.dialogs.widget.widget_model.props[q].value")).clear().sendKeys(4);
element(by.id("widget_modal")).element(by.buttonText("OK")).click();
browser.sleep(300);
element.all(by.css(".builder-rows > div")).then(function(rows) {
for (var i = 0, l = rows.length-1; i < l; i++) {
rows[i].getCssValue("border-color").then(function(val) {
expect(val == "rgb(221, 221, 221)").toBe(true);
})
}
});
element(by.id("prop_border-color")).click();
// Color picker shows.
browser.driver.actions()
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys(protractor.Key.BACK_SPACE)
.sendKeys("00")
.sendKeys(protractor.Key.ENTER)
.perform();
// ERROR HERE
element.all(by.css(".builder-rows > div")).then(function(rows) {
for (var i = 0, l = rows.length-1; i < l; i++) {
rows[i].getCssValue("border-color").then(function(val) {
expect(val == "rgb(221, 221, 0)").toBe(true);
})
}
});
});
});
UPD2:
I temporarily solved this problem by using executeScript method and setting value directly from js:
browser.executeScript("$('#prop_border-color').val('#FF0000'); $('#prop_border-color').change();");
But still looking for better solution
I suspect the backspaces are not sent to the color input, but instead make the browser go back in the browser history which leads to a blank page and a local storage access error.
Instead, resolve the click promise explicitly, use clear() to clear the input field and send the keys:
var colorInput = element(by.id("prop_border-color"));
colorInput.click().then(function () {
colorInput.clear();
colorInput.sendKeys("#FF0000");
});
Another approach to try would be to replace browser.driver with browser when calling the actions().

How to execute code before store configuration takes effect?

In our app we rely on the sessionStorage for persistence. However on mobile Safari the sessionStorage is not available when browsing in private mode.
However, for those customers using Safari in private mode it's ok to switch to an in-memory approach. Our app continues to be usable to some extend (you will lose data when you refresh the browser but since it's a single page application you never have to refresh anyway).
The fix was quite easy to do in development mode. However, after running a production build I faced a huge problem.
So, code is worth a thousand words. Here is what we currently use:
index.html
//...
<script type="text/javascript">
var isSessionStorageAvailable = true;
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
isSessionStorageAvailable = false;
} else try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
isSessionStorageAvailable = false;
}
</script>
<script id="microloader" type="text/javascript" src="../sencha/microloader/development.js"></script>
//...
myStore.js
Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],
config :{
model: 'App.model.QuoteItem',
autoLoad: true,
autoSync: true,
identifer: 'uuid',
proxy:{
type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
id:'ccCart'
}
},
//...
So, before sencha get's loaded we first check for the sessionStorage and set a global variable. So at the time when the store file loads the right configuration is picked up.
However, I really dislike this solutions as I had to alter the index.html file. In development mode you can just write this check anywhere in the app.js file because all the other files are loaded afterwards. But in production that's not the case. So I wonder how would you do that properly without altering the index.html file?
UPDATE
I also tried to use the applier like this:
applyProxy: function(proxy, oldProxy){
proxy.type = 'sessionstorage';
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
proxy.type = 'memory';
} else try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
proxy.type = 'memory';
}
this.callParent([proxy, oldProxy]);
}
However, the first time some code calls sync() on this store it raises an error inside the sencha framework:
It's inside the sync method of the store class on this line (it's from the minified source, sorry):
d.getProxy().batch({operations: b,listeners: d.getBatchListeners()})
It raises an error because getProxy() returns undefined. So it seems as if the applier didn't work :(.
Use the applier...
Ext.define('App.store.Quote', {
extend : 'Ext.data.Store',
requires : ['App.model.QuoteItem', 'Ext.data.proxy.SessionStorage'],
config : {
model : 'App.model.QuoteItem',
autoLoad : true,
autoSync : true,
identifer : 'uuid',
proxy : {
id : 'ccCart'
}
},
applyProxy : function (config, oldProxy) {
config.type = isSessionStorageAvailable ? 'sessionstorage' : 'memory';
return this.callParent([config, oldProxy]);
}
});
Just create your store like so :
Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],
config :{
model: 'App.model.QuoteItem',
autoLoad: true,
autoSync: true,
identifer: 'uuid'
}
And then, whenever you check if sessionStorage is available, then just do
myStore.setProxy({
type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
id:'ccCart'
});
Hope this helps
Are you sure the else..try brackets aren't causing issues (JSHint was complaining)?
var isSessionStorageAvailable = true;
var storage = window.sessionStorage;
if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
isSessionStorageAvailable = false;
} else {
try {
storage.setItem('__ccTest', '__ccTest');
} catch (err) {
isSessionStorageAvailable = false;
}
}

File upload field in EXTJS MVC

Am having a form which consists of various text fields and combo boxes, along with a fileupload field. the file is being uploaded successfully, but when am trying to access the other form fields, they are not seen in the post parameters in the firebug. The code for the controller is given below:
uploadFile : function(button) {
**var form = button.up('form');
var Title = form.down('Title');
console.log(Title);** // This returns null
if (form.getForm().isValid()) {
form.getForm().submit({
url : 'data/Downloads.aspx',
waitMsg : 'Saving the file...',
params : {
mode : 'UPLOADFILE',
client : SYSTEM.CLIENT
},
success : function(f, a) {
Ext.Ajax.request({
url : 'data/Downloads.aspx',
params : {
mode : 'SAVE',
fileName : a.result.fileName
},
success : function() {
this.mWin = Ext.create('Campus.view.GenMessage');
this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt2);
},
failure : function() {
}
});
},
failure : function() {
}
})
}
},
How do i access the other form fields and send it to the server.
I don't quite follow what you are doing. You seem to submit the form and then you are doing an ajax call to the server ???
Regardless, all form fields are sent to the server together with the file input. The framework does not use ajax to submit the form as usual because of the file upload, see the docs on this: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
Thanks you for your guidance dbrin.
Actually, i was trying to uplaod a document, and at the same time save the information regarding the file in the database. And, thats why i was trying to make an AJAX request. But, here is what i did:
uploadFile : function(button) {
var form = button.up('form');
if (form.getForm().isValid()) {
form.getForm().submit({
url : 'data/Downloads.aspx',
waitMsg : 'Saving the file...',
params : {
mode : 'UPLOADFILE',
client : SYSTEM.CLIENT
},
success : function(form, a) {
this.mWin = Ext.create('App.view.GenMessage');
this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);
},
failure : function() {
}
})
}
},