Errors in Firefox Add-on SDK when using cfx xpi whereas cfx run works great - javascript

I'm a student at a University Institute of Technology in France and I'm very new to Firefox add-on development since I discovered it at the beginning of my work placement, a few days ago.
What I have to do is an add-on that allows employees of the company to organize SCRUM-meetings (it deals with agile software development).
For the moment, what I've done looks like this :
http://img11.hostingpics.net/pics/716589MeetingConfigurationPanel.png
The panel allows users to configure the settings of the meeting. I have also added a toolbar with action buttons and a frame in it, so that the meeting can start/be interrupted on the action buttons Onclick event. I have implemented countdown timers for each participants. There is also a "Next Speaker Button" that resets one of the timers when clicked...
And all seems to work fine when I use cfx run, but when I package the extension using cfx xpi... there are errors.
See : http://img11.hostingpics.net/thumbs/mini_585083outputExpected.png
EDIT : Problem with the link. I will update it as soon as possible.
Here is what I have in cfx run mode. All the buttons I declared in the code, along with the frame, are correctly displayed in the toolbar.
But in cfx xpi mode, some of the buttons are apparently "stuck" in what Browser Console refers to as "inner-toolbar" or something like that as I can read when I remove the extension.
That made me wonder if the buttons really were in the toolbar. And they were, according to the Debugger. So I've started thinking that my problem was compatibility with Firefox but I've checked both Firefox version and the em:maxVersion attribute in the install.rdf file that can be found when unpacking the xpi/zip file, and I've change the values so that they match, but it didn't resolve my problem.
I've read as many things as possible on topics related to the problem I'm now facing (including StackOverflow questions) but I have not been able to find a proper way to fix it up to now. Is my problem really different ? I have no idea. I might have done something bad trying to change things as they were intended to, I suppose. But it's unlikely.
And the thing is that I really need to make this add-on works, because it is the only thing I will work on during my work placement.
The solution to my problem may be very simple. Maybe I did something really stupid. I don't know. The only thing I know for sure is that I want to find what's going on, so that I will be able to deliver the first version as soon as possible.
Feel free to ask for more informations if necessary.
Thanks for reading.
Julien B.

(Not technically an answer but SO won't let me comment.) You could try cfx run, then uninstalling the addon from the FF session it opened, then installing the xpi in that same session by doing a file open of the xpi (which will install it). Have a feeling it will run in that case, which means there is a difference between your standard Firefox and the one cfx run opens. There is a difference of course, because cfx run doesn't install all your other add-ons. But it may be running a different Firefox version as well. I mention this because when I run cfx run it always opens the beta version of FF which I downloaded at some point, and I don't know where its picking it up from.

Related

File operations taking long time, receiving "Running [file, save, delete create participants" message

Happening with VSCode version 1.52.1, while working with JavaScript, React, and Node.
I've been working on a React project in VSCode for a couple months now. At some point, in those two months, I started noticing a significant decrease in the speed at which VSCode handles file operations. Like, slow enough that I was creating a single css file, and I went to fill up my water bottle at the cooler and I came back and it still needed about another minute to finish. After browsing some of the VSCode "Issues" on GitHub, I noticed that someone mentioned it might be an issue with the Prettier formatter, but I'm still having the same issue when saving, as well as on file creation and deletion.
*Note: this is my first question, and I need more reputation to directly embed the images
A VSCode prompt box displaying the message "Running 'File Delete' participants"
A VSCode prompt box displaying the message "Running 'File Create' participants"
Things I've tried: Disabling "format on save", disabling all extensions, closing and re-opening VSCode, restarting my laptop
I had the same problem with macOS Big Sur 11.5.1 using VSCode (1.59) and turns out it was (in my case) very simple (basically a newbie problem...). I had been downloaded VSCode and was executing it in Downloads directory. All worked fine but when had to create or rename some file/folder, it took a long time 'Running "File Create" participants' ... After moved the application to Application's folder, the problem was solved.
I had the same issue with Code 1.53.2 on RHEL7. I would perform any file operations within VS Code (save, create, delete, rename), and I would get the Running 'X' participants dialog.
I solved it by downgrading to 1.52.1. Not sure what OS you are running, but it might be worth it to downgrade Code to a version you know was working well for you, and keep an eye on latest development to see if it works itself out.
Hope this helps!
I have encountered the same issue today (Visual Studio Code 1.52.1) while working on CSV and HTML files. Saving a file took like 1 or 2 minutes to finish. I have resolved it by updating VS Code to 1.53.1 version and disabling all extensions.
I have re-enabled extensions one by one to see if the issue came from a specific extension. It still works so far.
even i encoutered the same problem with basic python programs. even creaing new files and deleting them took minutes. it is not about how old or new your machine is. it is about workspace and vs code. when you open a new workspace, vs code runs it in a so called restricted mode where a lot of things are limited. extensions, de-bugging and a lot of other things. on the bottom left of your vscode, click on restricted workspace and then select the 'trust workspace' option. worked for me.
I have this too. In windows, I had drive w: assigned (subst.exe) to my project folder. It started taking a long time to create/rename/delete files. I tried opening directly from the physical drive and it went away. I tried re-assigning w:\ up the file tree a bit and it also went away.
I encountered the same problem recently(in Nov 2021).
I just closed that workspace and reopened same workspace again, and luckily my problem got solved.
I found this bug ticket being reported: https://github.com/microsoft/vscode/issues/128263
What the hell is Running 'File Delete' participants... all about. It
takes several minutes to create a blank file and several minutes to
delete a file. How do I turn off whatever this is. VS Code is basically
unusable with whatever this is enabled.
The solution apparently was this:
Microsoft Live-Share was the culprit. Disabled that and everything is back to normal.
Disable some vs code extensions, one by one as you test, you will surely land on a culprit.
Same is happening with me, I am on iMac, macOS Monterey Version 12.6(21G115):
Version: 1.71.2
Commit: 74b1f979648cc44d385a2286793c226e611f59e7
Date: 2022-09-14T21:05:37.721Z (1 wk ago)
Electron: 19.0.12
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Darwin x64 21.6.0
Sandboxed: No

VS Code Node.js macOS debugging not working - I don't even know how to state the problem

Newbie question here, it seems... I'm losing my mind. Why is this so hard? I've been programming other languages for years, but I'm relatively new to node and JS. I've read and watched as much as I can find official and unofficial on the web about this and it's either years old or significantly different from my situation, so not very helpful.
I'd really, really appreciate anyone who can understand my (pretty simple, I would have thought!?) specific case and help me get this set up to just work. Possible?
macOS 10.15.6 Catalina.
As I understand it, node comes with the OS. It's Node.js 12.8.1
VS Code 1.48.2
I create a new file, name it abcd.js. VS Code figures out it's javascript. I add some code - read a file of JSON from the disk, make some changes, console.log some stuff (appears under the Output tab). I run it.* All good and works.
Now... Run menu > "Start Debugging". Or, There's a Run/Debug icon in the sidebar that shows a "Run and Debug" button which I click on. Both of those ask me for an environment - I choose Node.js, and the Debug console outputs this:
/usr/local/bin/node path/to/my/file.js
Debugger listening on ws://127.0.0.1:56430/30b0c2aa-278b-4540-94c4-825d30b94f57
For help see https://nodejs.org/en/docs/inspector
And that's it. I have breakpoints, but it doesn't stop on them. Something happens (too quick to see what it is). I don't think it's actually running my code because nothing new shows up under the Output tab.
There's also a note in that sidebar saying "To customize Run and Debug create a launch.json file." I've experimented with that as much as I can, but nothing I do seems to help.
I've been programming for years. I'm used to other languages and IDEs (eg. C, Java, AppleScript, Swift, others), where you open the IDE, write some code, hit run (or debug), it may or may not build a target (depending on the language and environment), but then it runs the code (opens the target app, or runs in the IDE, and allows you to step through the code, breakpoints, etc. in the IDE if debugging). Is JS/node programming radically different from this somehow?
*One theory:
I'm not doing this through any terminal or any browser. Maybe that's the problem...? At some point I installed a "Code Runner" plugin that I believe is what is running my code. It was a while ago, but if I recall correctly maybe I turned to that because I was looking for the experience I've described above, and this plugin gave me that where the "normal" node setup process didn't? Perhaps my problem is that that plugin simplifies RUNNING js scripts so much that my issues with DEBUGGING exist because that plugin allows me to bypass other usual complications with running JS/Node scripts (but doesn't have any debugging functionality of its own)?
My thanks to #ippi for his/her comment with a gif video. Not sure if the following really answers my question, but I'm posting it in case it helps anyone else.
I took some time to clean up my Mac a little, and I completely uninstall VSCode, all its extensions and supporting files and started again.
I re-installed Code from scratch, didn't add any extensions, and then tried what #ippi's video showed.
It still didn't work - I got more or less the same output as in my post, and I'm not sure if it was running the code or not.
I had an urgent deadline to meet so didn't come back to it till now - two days later - and now, it's working.
A couple of things changed in that time though I really don't know what fixed this, if it was either of those or anything else. The two changes I can remember that I've done the last two days are:
Despite my post saying my node was 12.8.1, sometime in the last couple of days it turned into 8.something. I updated it to the latest v12.8.3, and
to meet that deadline I used node inspect myfile.js in Terminal for a bit.
The inspect (mostly) worked to meet my deadline, but still a hassle compared to what's shown in #ippi's video. I definitely wanted to get it working that way.
So… updating node fixed it? Running it in the terminal for a bit fixed it? Something else? I'm at a loss to know what did it. But it's working now.
Thanks again to #ippi for that. It pointed me in a good direction at least - to clean up my install a bit, if nothing else.
Maybe this will help someone else sometime in the future.
It seems the ultimate answer is:
It should just work out of the box (possibly subject to updating node to its latest). If it doesn't then:
The issue most likely isn't that you have to do any fancy configuring or whatnot to make it work.
Instead, most likely something is wrong with your installation and/or OS and you should explore that.
#ippi's video attached in case his/her link ever breaks:

Debugging and checking what variables are equal to in production

So I've been coding for a while now in school, and I'm having my first introduction into a real working code base at my new job. When it comes to debugging, like if I want to find out what a certain variable is equal to, I'll often just console.log() things out and hope that something useful comes out of it.
It seems really inefficient considering how many moving parts there are in the code. Most of the time, it works eventually, but it feels so barbaric just editing the code over and over and looking at the browser's console until something useful comes out, and it feels like there has to be a better way to debug in a production environment. I am specifically using Ember.JS, but this question would apply to any framework like React or Angular or Node.
There are many tools out there to debug JS, the most "basic" being the debugger in your browser. Some tools go further also, for example VSCode has a slew of extensions that open and control the browsers debugger.
Chrome: https://developers.google.com/web/tools/chrome-devtools/javascript/
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
Edge: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger
Safari also has one in the develop menu but there is no site describing it in detail - it is located in the sources pane
If you use VS Code, you can run Node apps in debug mode then select Node.js.

Programmatically update firefox profiles

Windows 7 / Firefox Latest versions / Preferrably 64bit beta versions
Whenever a Firefox Profile is updated, the user is presented with a dialog to check for updates to the addons. I would like to interact with tha dialog programmatically so that it is automatically ok-ed.
So far my research has brought me to:
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWindowMediator
For that I need a windowtype to enumerate. The window type correspons to the attribute in the XUL definitions. On my installation of Firefox, these seem to be compressed inside "c:\Program Files\Mozilla Firefox\browser\omni.ja\chrome\browser\content\browser".
I have limited experience of the firefox API. I'm executing code through userchrome.js.
Any pointer would be gladly received.
UPDATE 1 20151125 0748: I believe this is the xul - https://archive.is/NyGBS - any pointer on how to "overlay" it within userchrome.js? I can also try to enumerate windows of windowtype="Addons:Compatibility".
UPDATE 2 20151125 0748: It looks like the extensions update dialog is not showed if I have:
user_pref("xpinstall.signatures.required", false);
Which marks the addon as unsafe but allows you to continue using it.
[Which solves my immediate problem, but I am sure I will have this requirement at another point for another dialog, so would still like to get to the bottom of this]
TL;DR version with info about the problem follows.
I currently have a vbs script that:
Deletes FIREFOX_RUNNING_PROFILE folder.
Copies FIREFOX_BASE_PROFILE folder-> FIREFOX_RUNNING_PROFILE folder.
Runs FIREFOX_RUNNING_PROFILE.
Whenever a firefox update takes place, a number of dialogs need to be confirmed by the user in relation to checking/updating extensions.
The outcome of this process will not stick to the profile as obviously given my setup the RUNNING_PROFILE is recreated every time.
Note that for the purposes of this discussion it doesn't matter whether the udpate is performed automatically. I have the ability to rewrite the prefs.js so i can change behaviour dynamically just by doing that and restarting the browser externally - it's vbs right now but I'm ready to move over to something else if I hit some limitations with process / window management, or I want this to be portable (e.g. python). Note these are not dealbreakers right now and I'd be happy for a reasaonbly sleek windows-only solution.
I have a few of this BASE_PROFILES, hence I would like to handle the updates programmatically.
I have not found a way of achieving this that does not involve interacting with the dialogs firefox presents in the GUI. And I have noticed that the dialogs popping up after each update can change.
Options:
1) userchrome.js -> I already use this to manage some imacros autostart features, including grabbing the profile name from Components.Interfaces. I am reporting snippets below to help the reader understand what is the most sophisticated snippet I've written against the Mozilla xpcom components:
var strProfileFilePath=Components.classes["#mozilla.org/file/directory_service;1"].getService(Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsIFile).path;
I have had a look at the documentation and it looks rather impressive. It feels like it will let me do pretty much everything, so my next move here would be to undersrtand how to enumerate dialogs and somehow select the right one based on some properties, then push the "ok" button. I think that's pretty much all I need to do.
2) Autohotkey. I can try and send keys to the firefox window (not sure about the exact dialog inside the window). The dialogs normally have shortcuts that would respond to those to this keysends (nice theory). In autohotkey I can also "position-click", although it is less desirable for obvious reasons.
3) One of the avenues through Autohotkey involves using the MozRepl Firefox addon behind the scenes. Library discussed here https://archive.is/73u4f, github seems out of date https://github.com/arbiter34/FF-Control. I could then use mozrepl directly, no need for Autohotkey. I would rather code in python, java, or even javascript, powershell, vbs than autohotkey. Ar a first look it looks like it would give me the same power that userchrome.js currently offers.
4) Selenium. There are some profile manipulation capabilities I could exploit - although Selenium was not really designed to interact with Firefox own's dialogs, and I don't see an API to automate that. Rather one would synthesise a profile on the fly, installing on top all the required extensions from a known superprofile (that would contain a superset of all the extensions to be used), and applying whatever mods to prefs.js also dynamically. This sounds a bit ugly for my original requirements but experience has told me that ugly is still better than manual.
5) There is also the option of writing an addon, but again, I think I'ld be interacting with the same interfaces that I can get in userchrome.js (actually I believe userchrome.js is even better as it seems to have unfettered access to the core components, which is exactly what I sense I might need for my case). I would rather avoid having to write an addon, although I might be lost for words trying to explain why exactly.
I appreciate I have not "fully" investigated further, but I am at a point now where I need to elicit the opinion of the community before I start spending substantial time on either of these.
The below isn't strictly required to address the question above, but I feel it might be useful to share this as there must be a few others undergoing the same predicament:
Additional Points:
a. As a general principle, I have zero desire to update anything (firefox.exe, addons, language packs, plugins and what not) (plugins are actually completely disabled). I am ok with the way the system works, and I don't want to change it one millimitre. Yes, NOTHING, not even the security updates. This is because of the particular circumstances of my app, my particular estimation of the particular risks I'm taking, and my general aversion to risk. YMMV. NEVERTHELESS I'm still forced to upgrade whenever (1) I "make a mistake" (all it takes is for one profile to have the update settings wrong for the exe to be updated for all the profiles on the machine - doh! there's only one exe); (2) Firefox is crashing too much / unusable (happened twice); (3) I need functionality offered by the upgrade (hasn't happened); I would also like to reserve the option for the "very critical security updates" (sigh! sometimes even I can bow).
b. The arcane art of keeping your firefox profile integer across updates also involves search engines - it doesn't matter if I say I don't want to update them, whenever there's a firefox.exe update I will get the new standard fluff installed in the program folder. I currently have a way of resetting that by (1) emptying the firefox program subfolder containing the xml files (in %programfiles%\Mozilla...), and (2) deleting search-metadata.json and the searchplugins folder (in the profile folder), then copying them over from a baseline afresh. It all feels very greasy. I have yet to try this on the 64bit version I'm running right now as this is a minor issue and I would rather not introduce more entropy. The firefox search engines mechanism might have changed in the meantime.

Best ways to develop painlessly in Javascript on a local machine

I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!

Categories

Resources