firefox,dart,polymer , Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


Tag: firefox,dart,polymer

I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views.

Example repository available at:

DialogView: view.html

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="packages/paper_elements/paper_dialog.html">
<link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import" href="packages/core_elements/core_animated_pages.html">

<polymer-element name="test-view">
    <paper-dialog id="extendedNode" vertical autoCloseDisabled=true transition="paper-transition-center" opened=true class="noTitle">
      <core-animated-pages selected="{{page}}" valueattr="id" transitions="hero-transition cross-fade">
            <section id="0">
                <p cross-fade>Click next to see the secret text.</p>
            <section id="1">
                <p cross-fade >This text is a secret, so don't tell Firefox users!</p>

<script type="application/dart" src="view.dart"></script>


html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;

html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;

Expected behavior: Upon page load a 300px x 600px dialog should popup with a button at the bottom left.

Behavior in Firefox: A small dialog is shown and resembles the dialog in chrome when there is no size set in the css file.

I would like to confirm if this is my fault for using incorrect CSS hooks or if this seems to be a polymer problem with Firefox.


If you CSS is not inside a Polymer element you need to add the polyfill version of the selectors to make it work on browsers without native shadow-DOM support

html paper-dialog,
html /deep/ paper-dialog {
  margin-top: -150px;
  margin-left: -300px;

html paper-dialog core-animated-pages,
html /deep/ paper-dialog /deep/ core-animated-pages{
  height: 300px;
  width: 600px;

See and for more details


How to access detail from core-signal event in polymer.dart?

I am working on a web app in polymer.dart. When I use core-signal, I am unable to access the detail. Here's some of the code that I'm using... main_app.dart class MainApp extends PolymerElement { onClick(Event event, var detail, Node sender) { print('button clicked'); fire("core-signal", detail:{'name':'button-click', 'data':0}); } ready() { super.ready();...

In the dart:io library, why would one want to set runInShell: true when calling

What functionality does this offer? Furthermore, how does the process get called when runInShell is set to false? What's the difference?

Google maps not working in Firefox (gray box)

I have a plugin I'm working on that uses the Google Maps API v3. Works like a charm, except in Firefox! I present to you the following URL: [REDACTED BECAUSE SOLVED]. You'll notice that if you're using firefox there is a gray box with google maps stuff available. If you...

XUL iframe firefox addon, how to change the src within the iframe?

I am developing a firefox addon, in my settings page dialog.xul i have an iframe where i load different settings pages page1.xul page2.xul page3.xul Iframe : <vbox flex="1"> <iframe id="iframe" src="chrome://xxx/content/page1.xul" flex="1"></iframe> </vbox> Within the iframe i need to navigate from page2.xul to page3.xul with the code in page2.xul My...

Refuse to load JS in Dart

In my web page for Dart amount this script: <script src=""></script> but when you launch the application it gives me the following error: Refused to load the script '' because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src'...

Jquery not working while browsing with Firefox

Hello I'm using this code: $("#cart").click(function () { if ($('.content').length > 0) return false; $('#cart').load('index.php?route=module/cart #cart > *'); var e = window.event || e; $("#cart").toggleClass("active"); e.stopPropagation(); $(document).click(function (e) { $("#cart").removeClass("active"); $('#cart').live('mouseleave', function () { // Code Here }); }); }); It works just fine in Chrome but when testing it...

How to remove diacritics (accents) from a string?

I'm trying to convert some strings that are in Czech, Spanish, French etc. I'd like to take out the accent marks in the letters while keeping the letter. (E.g. convert é to e, č to c, Ž to Z, ñ to n) What is the best way to achieve this?...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event

Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...

Does the dart VM impose restrictions on the stack memory size of a native extension?

I'm learning to write a native extension and I noticed an odd occurrence. When I allocate a multidimensional array and access it like so: (excuse any messy C code and bad practices I might be using unless they're likely the cause of my error. My C is not-so-great) int table[rows][cols];...

CSS flexbox wraps content in FireFox (not Chrome)

I have a button that consists of an <i> and an <span> element (an icon and some text). Now both have different sizes so I'm applying a flexbox to my button that should center my items nicely. In Chrome everything works as I expected but using the page in a...

How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

I have to bring red borders around the input element in chrome on HTML5 validation like as that of Firefox. I have search it a lot but unable to find precise answer. Any help of how to do it using css is greatly appreciated. Thank you....

Exact solution to keep cookie after closing firefox

I know this is asked many time but i want exact solution. Why cookies are deleted after closing firefox? I want to keep cookies after closing firefox....

Dgrid - Firefox breaks while trying to load large data set in dgrid

I have a dgrid connected to a store with a very large data set. (Currently over 137,000 rows). I expect there to be a delay. When I first connected the store - the data populated the dgrid. However I keep getting a pipe break now. I didn't change anything between...

input radio checked / unchecked not working in Firefox 38.0.5 Windows - jquery

I am trying to figure out a way to allow users to select radio options but then deselect the option if they change their mind. I would also like hide other form fields if they select an option because those fields are not relevant. I can get the code to...

how can i use require(“”); in javascript

i want to use a plugin in Firefox that it is in this. in this plugin tutorial use require function, and it is: require("sdk/preferences/service"); but i get error that require is not defined. so i search and download requireJS. but when attach this i get error module name sdk/preference/service has...

Manual adding firefox for android addon

I've got an firefox add-on, but I want to test before I upload it to the firefox add-on center.. Does anybody know if I can install the add-on (XPI file) on firefox for android? Thanks for help....

PercentCompleteEditor allows values > 100 in bwu_datagrid

PercentCompleteEditor allows to enter values > 100 and < 0 without any error/warning in bwu_datagrid.

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

Opentype features cross-browser compatibility

I am trying to utilise the opentype features of 'Plantin MT Pro' from myfonts. More specifically, I am hoping to use 'true' small-caps and old-style numbering. By 'true' small-caps, I mean i'd prefer not to mimic small-caps via the font-variant selector if possible. The below css is achieving success in...

Inconsistent display on IE & Firefox

I'm using Bootstrap on my website project. I'm through with the design but the items are displayed out of place on IE & Firefox. The same page renders great on Chrome. I used developer tools on the three browsers to make sure there was no difference in the CSS properties....

Firefox Windows / Linux inconstancies

My website has very different rendering in Firefox Windows / Firefox Linux (however, similar versions, default parameters for both). The reason seems to be that the font are rendered very differently. This: font-family: sans-serif; gives Arial-like font on Windows: and a little bit different font on Linux: How to solve...

Why does the expiration date of the request cache lie in the past?

I am working on caching some pages and I noticed this in Firebug: So it says that the cache expired 45 years ago. Is this a bug or some bad data? I have another page that is caching correctly I just do not understand why its saying Expires ... 1970....

Need help finding a bug with jquery $(document).ready() not working properly in firefox

I made a jquery function that sets the width of an element so that it fills any extra width left by it's siblings inside it's parent. (basically a flexbox) I call this function in both $(document).ready() and $(window).resize() HTML <body> <div class='pageCenter'> <div class='fixedCol'>my fixed col</div> <div class='flexCol'>my flexible col</div>...

Show Firefox OS devtools on Firefox Developer Edition 'desktop'

I've an iMac with OS X Yosemite v.10.10.3. I use Firefox Developer Edition 40.0a2. I've a ZTE Open C (FR version) with Firefox OS; Boot2Gecko (B2G OS). What I'd like to do is the following: I've a basic webpage (mostyl HTML, CSS and JS) opened in my browser on...

Firefox CSS transition fails in conjunction with jQuery prop() on placeholder

Got a weird one for you all. I am using CSS transition to change length of input at same time as modifying placeholder attribute / property. For some reason it fails to animate in firefox. Works fine in Chrome and Safari. As demonstrated below, I can alter another property like...

How to access second element using relative Xpath

Given this page snippet <section id="mysection"> <div> <div> <div> <a href=""> <div>first</div> </a> </div> <div> <a href=""> <div>second</div> </a> </div> </div> </div> </section> I want to access the second a-element using relative Xpath. In FF (and locating with Selenium IDE) this //section[@id='mysection']//a[1] works but this does not match //section[@id='mysection']//a[2] What...

Can I put a button on the tab header using Firefox Add-on?

In a Firefox browser window, I would like to put a button on the tab header next to the web page title. Is this possible with a Firefox add-on? So far I am still unsure what to call this part of a tab. Sorry for duplicates! Edit: I didn't have...

using dart route package url got error 404

Here's my main.dart: import 'dart:html'; import 'package:route/client.dart'; import 'urls.dart'; void main() { var router = new Router() ..addHandler(homeUrl, showHome) ..addHandler(galleryurl, showGallery) ..listen(); HttpRequest.getString("home.html").then((html){ querySelector("#container").innerHtml = html; }); } void showHome(String path){ HttpRequest.getString("home.html").then((html){ querySelector("#container").innerHtml = html; }); } void showGallery(String path){ HttpRequest.getString("gallery.html").then((html){...

JsFunction.apply doesn't work while JsObject.callMethod does work (dart)

I have this often, that JsFunction.apply doesn't work like I would expect. Consider this example: import "dart:js"; import "dart:html"; void main() { var div = querySelector('div'); var span = new SpanElement()..text = "hello world"; var js = new JsObject.fromBrowserObject(div); js["appendChild"].apply([span]); // this one does work: // js.callMethod("appendChild", [span]); } I...

xul overlay for new menu in TB/Firefox main menubar

I'd like to add a new menu at the end of the main menu bar (file, edit, ...) after the Help menu via an extension i wrote. I already know how to add a new item to one of the menus by something like: <menupopup id="menu_HelpPopup"> <menuitem id="example-item" oncommand="alert('Hello!');" label="TEST"...

$(this).val() not working in FireFox but works in Chrome

This is my problem. When I try to set the value of an input field in FireFox nothing happens. I don't get any errors. It simply just doesn't work. It is supposed to add two decimal places after the number. It works perfectly in Chrome. Here's my jQuery code... $('input.drawer').on('blur',...

Firefox Add-Ons: Variable Is Not Defined In Console

I'm developing a Firefox extension. When I run it, I open up the browser console and it says, [name] is not defined. It's in "browser.xul." <?xml version="1.0"?> <?xml-stylesheet href="chrome://Uedit/skin/skin.css" type="text/css"?> <!DOCTYPE Uedit SYSTEM "chrome://Uedit/locale/translations.dtd"> <overlay id="Uedit-overlay" xmlns=""> <script src="Uedit.js" /> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="Uedit"...

how to unbind/prevent context menu by keybord (key #93) with FF?

I want to prevent the default event on key #93 ("select key", between "alt gr" and "ctrl right" on AZERTY keybord). This key open context menu like right click. I tried : $(document).off('keydown'); $(document).off('keyup'); $(document).off('keypress'); $(document).on('keypress', function(e){ if(e.keyCode == 93) { e.preventDefault(); return false; } }); $(document).on('keyup', function(e){ if(e.keyCode ==...

nsICacheService doesn't work in Firefox 38

I use Components.classes[";1"].getService(Components.interfaces.nsICacheService); to manipulate http cache when developing Firefox extension. But after I upgrade to Firefox 38 esr, this interface throws error when calling its function [Exception... "Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsICacheService.visitEntries]" nsresult: "0x80004001 (NS_ERROR_NOT_IMPLEMENTED)" And I didn't find it obsolete in MDN, so anyone knows why?...

Firefox and SSL pages - takes very long on certain sites [closed]

I use openSUSE 13.1 and Firefox 38.0.1. On some pages with ssl it takes minutes until the connection is established. It only happens on sites whose ssl certificate is not trusted by firefox, so that it asks you if you really want to enter the site. But even this security...

Why is position of html button in tablecell different in Firefox

Why is the position of a button element different in Firefox vs Chrome/IE when nested inside a li with display: table-cell? In Chrome and IE the button is aligned to the top of the cell while in Firefox it is aligned to the bottom. Can this be influenced in Firefox...

Checking, if optional parameter is provided in Dart

I'm new to Dart and just learning the basics. The Dart-Homepage shows following: It turns out that Dart does indeed have a way to ask if an optional parameter was provided when the method was called. Just use the question mark parameter syntax. Here is an example: void alignDingleArm(num axis,...

Firefox dropdown menu click

I have a dropdown menu for languages in my website and it works fine in Google Chrome, Safari and Internet Explorer, but it is bugged in Firefox. This is the code: <a href=""> <select id="languageSelector" style="background-color: transparent" onchange="location = this.options[this.selectedIndex].value;"> <option value=".">ESPAÑOL</option> <option value="./en/index.html">ENGLISH</option> <option value="./de/index.html">DEUTSCH</option> <option...

i have developed website and the issue is that same version of firefox shows different design on different computers while other browsers were fine?

i have developed this website the website tests on my laptop are correct and same design over IE, Chrome, FF and Opera the problem i have found that same version of firefox shows the design different on different computers. FF on my laptop shows correct design while same version...

How do you close the DOM Properties window in Firefox Developer Edition?

I am using Firefox Developer Edition and when I had the Inspector open, which is accessed by right-clicking an item and selecting Inspect Element, I then right clicked something in the Inspector and selected Show DOM Properties, which you can see in the screenshot below: However I cannot figure out...

How to test Dart Polymer elements using the new Test library?

How do you test Polymer elements using the new test library? Using the new test library to test a Dart Polymer element, I build my_element_test.html as prescribed. Please see my repo: polymer-dart-testing. No Polymer Initiation Passes my_element_test.html and my_element_test.dart (commenting out Polymer initiation) passes tests as expected: my_element_test.html <!doctype html>...

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

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...

Abstract methods in Dart

I'm implementing an inheritance hierarchy in which derived-class construction consists only of a call to the base-class constructor. The base-class constructor then calls method(s) implemented only in the derived-class. I have a basic implementation, but DartEditor of course complains about the missing methods in the base class. How can I...

Magnific Popup position bug

There is a strange bug happening when you have got a link triggering Magnific Popup and that link is contained inside an absolute positioned element, which is positioned inside a relative positioned element with overflow:hidden. To reproduce the bug, checkout this example in Chrome or Firefox: HTML <div class="hover-container">...

Can CSS identifiers begin with two hyphens?

CSS 2.1 defines identifiers as In CSS, identifiers can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters...

Using resumable.js from Dart

I am trying to use resumable.js from Dart with this code: var rs = new JS.JsObject(JS.context['Resumable'], [new JS.JsObject.jsify({ 'target':context.server+'/upload' })]); files.forEach((file) { rs.callMethod("addFile",[file]); }); files variable is defined as List<File> (dart.html.File). When I check properties of rs object with these two lines: JS.context["console"].callMethod("log",[rs['opts']]); JS.context["console"].callMethod("log",[rs['files']]); I find that rs.opts are initialized...

SVG data image not working on Firefox

I'm setting a SVG as background-image for a pseudo element: content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 12px; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12...

Selenium Firefox webdriver does not adopt profile

I have created a FF profile: fp = webdriver.FirefoxProfile() fp.set_preference("", CLIENT_SAVING_DIR) fp.set_preference("",2) fp.set_preference("",False) fp.set_preference("browser.helperApps.neverAsk.saveToDisk", "application/octet-stream") Then pass this profile to remote mode webdriver: remoteHost="192.168.x.y:4444/wd/hub" driver = webdriver.Remote(remoteHost, desired_capabilities=DesiredCapabilities.FIREFOX, browser_profile=pf) I've...

Remove the black line from the bottom and right side of Firefox select boxes

This may seem to be a stupid question but is there a way to remove the black line on the bottom and right sides from the drop down of a select box in Firefox? For example: Here is a basic fiddle: <div class="styled-select"> <select id="select"> <option value="0">Option one</option>...