Cannot type into an editor in a xul panel - firefox-addon

the Cannot type into an editor in a xul panel is a known bug in firefox.
I simply want to reuse my code from my google chrome extension by hosting a webapp online and including it in the extension both google chrome and firefox by using a popup window.
This is how I include the webapp
<popupset id="mainPopupSet">
<menupopup id="smsflatrate-popup">
<iframe height="500px" src="http://webapp.mysite.net/"
flex="1" type="content-primary"/>
</menupopup>
</popupset>
The problem is, it is possible to focus input elements but the input fields do not react on key-events, so no input can be provided.
It seems that there is some kind of solution for this problem, but I think I do not really understand what to do here.
E.g. from the link above, what would be a solution according to this post?
There are many ways to display HTML in a XUL UI:
1) including HTML inline in the XUL document. This should work fine everywhere,
including in panels.
2) include an HTML IFRAME in the XUL document. This currently works fine
everywhere, except that IF the iframe is in a panel, there are some problems
with focus. This bug is about that one issue.
3) instead of a panel, you can create a XUL window using window.open that
contains HTML inline or in an IFRAME, and everything should work.
Having said that, if I open this bug's testcase in a Firefox trunk build, I
*can* tab into the textbox and type into it, so it looks like focus is
basically working now? The problem is that I can't focus the textbox by
clicking on it. In fact, if you click on the arrow to do a search, you navigate
to a new page where there is a textbox that you *can* click to focus.
So I think we have here just some simple bug that's preventing click-to-focus
from working, sometimes. Enn, can you look into that?

It seems to me that given the list of suggestions your best choice is to open a new window to represent your popup. You can make it look like a popup by setting its position, turning off OS crhome, etc.

Related

TinyMCE within Electron; hashed anchors don't work

Has anyone tried to use hashed anchor tags within TinyMCE within Electron? When I add the Table of Contents, none of the hyperlinks work.
It should be noted I am using the Quasar framework (Vue 3) as a SPA without using any navigation (due to how the application is built, I cannot use routes). (The built in Quill editor isnt sufficient for my needs)
I should be able to click on the ToC link and have the page scroll down to the appropriate heading within the editor.
I tried both the iframe and inline modes and that still didn't help. I also tried to catch the did-navigate-in-page webContents event in my main script but it doesn't even register it.

Angular JS and jQuery Mobile routing - treatment of hash anchors in the URL

This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.

In Dart, is there an equivalent MessageBox functionality as in C# using WinForms

I know there is a MessageBox class in the isolate library but that is not what I need. I am looking for the pop-up style messagebox functionality found in desktop windows apps (i.e. WinForm apps) where you ask a simple confirmation question and the user can click a yes or no button in response. Is there an equivalent in Dart, if not can anyone suggest some alternatives?
You can display a message box easily with :
window.alert('test');
don't forget this in the top of your file:
import 'dart:html';
This will behave like the alert function in JavaScript. If you want to add buttons (other then the default "ok" button) to your message window, then you will need to make a custom window, which would not be very hard. You create an element which you add to your document body. This element should be absolute positionned. Adding an overlay in front of your document will be useful to prevent user clicks on the page.
this is in javascript, but it is useful to know what to do with dom and css :
http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

Uploadify not clickable in JQuery UI's Dialog and Firefox 17

This is a really weird issue. I've first read the answer from Maayan Glikser on this question which looked similar : Uploadify inside Jquery UI Dialog => Chrome & Opera bugs
It didn't work at all. Let me explain my problem.
I have 3 different Uplodify (Flash version) controls on my website (not on the same pages), only one of them doesn't work and it's the one that is inside a JQuery UI Dialog. Basically, the button is visible but not clickable. The problem occurs only for this particular control, the others behave normally.
So I tried adjusting the z-index inside the javascript, it didn't change anything. Then I tried adding manually (through firebug's "edit html" feature) a <br /> at the beginning of the container generated by uploadify and bam, the button became clickable
I then tried adding the <br /> on page load with $("#fmuploader").prepend('<br />') and nothing happened, the line break was added but the button wasn't clickable. When I added manually a blank space it became clickable again.
I believe there is some kind of paint event that gets triggered when you manually edit the page from firebug which makes the button suddenly become clickable, but I'm really wondering if I can make it finally work as intended without asking all my firefox-using visitors to install firebug :)
It is really hard to explain so I have setup a small test page at this address : deleted (edit: the test page is now offline on the production environment and is no longer reachable)
This reproduces exactly the problem I have.
Load the page, click the link to open the popup, open firebug, find the uploader's container <div id="fmuploader" class="uploadify" style="height: 30px; width: 120px;"> and just add a blank space after the opening tag. The button becomes clickable.
The problem occurs on Firefox 17 with no add-ons except firebug and Flash 11. The problem does not occur on IE 7/8/9 and Chrome on the same machine.
Update: I tested it with Firefox 15 and wasn't able to reproduce the bug.
I had a similar issue, but found that updating Firebug to version 1.11 sorted it.
It was only seemed to be the issue in verstion 1.10.
Looks like a change in the Firefox 17 security model means that minified version of jQuery breaks when using Firebug. Plenty of jQuery based stuff has stopped working for me in Firefox 17 unless I disable Firebug.
https://blog.mozilla.org/addons/2012/08/20/exposing-objects-to-content-safely/
https://developer.mozilla.org/en-US/docs/XPConnect_wrappers

How do I create a confirmation dialog in jQuery Mobile?

I want to have a confirmation dialog (not plain javascript) show when the user clicks a button, but I'd rather have it embeded instead of referencing another page.
How do I embed a dialog for use on a jQuery Mobile page?
You have 2 options really - if you want it to popup and fill the page, you can create a JQM dialog page (even dynamicaly), and switch to it. JQM dialogs are explained more in detail here:
http://jquerymobile.com/demos/1.0b1/docs/pages/docs-dialogs.html
It is quite possible to append a new dialog to the same page (simple append it to the container above the one with data-role="page") and switch to it with $.changePage(...)
Another option, if you want it to popup "over" the existing content (modal mode from UI dialog), this plugin will do that:
http://dev.jtsage.com/jQM-SimpleDialog/
Full disclosure: I wrote the second one, so I am biased. However, it does employ a bit of option 1 above, and you are of course welcome to rip the code apart to see how it works if you'd rather roll your own.
Edit:
Another option is to use the builtin popup interface, added in the last major version (1.2.0 I think). It can be found here, and is included in the default:
http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html

Resources