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


Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

Question:

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: https://bitbucket.org/neogucky/polymer-dialog-problem/

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

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

CSS-file:

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.


Answer:

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 https://www.polymer-project.org/0.5/docs/polymer/styling.html and https://www.polymer-project.org/0.5/articles/styling-elements.html for more details


Related:


Selenium Firefox webdriver does not adopt profile


python,firefox,selenium-webdriver
I have created a FF profile: fp = webdriver.FirefoxProfile() fp.set_preference("browser.download.dir", CLIENT_SAVING_DIR) fp.set_preference("browser.download.folderList",2) fp.set_preference("browser.download.manager.showWhenStarting",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...

Abstract methods in Dart


inheritance,dart,dart-editor,abstract-methods
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...

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


dart,dart-polymer
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();...

SVG data image not working on Firefox


css,image,firefox,svg,data
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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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...

How to access second element using relative Xpath


firefox,xpath,selenium-webdriver,selenium-ide,robotframework
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...

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


html,css,firefox
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: http://postimg.org/image/6sqgo7xul/ Here is a basic fiddle: http://jsfiddle.net/FtVGg/33/ <div class="styled-select"> <select id="select"> <option value="0">Option one</option>...

Firefox Windows / Linux inconstancies


css,linux,firefox,fonts,font-face
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...

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


jquery,css,firefox
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...

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


javascript,jquery,forms,firefox,radio
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...

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


javascript,firefox,firefox-addon
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...

How to remove diacritics (accents) from a string?


string,dart,diacritics,unaccent
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?...

PercentCompleteEditor allows values > 100 in bwu_datagrid


dart,bwu-datagrid
PercentCompleteEditor allows to enter values > 100 and < 0 without any error/warning in bwu_datagrid.

Refuse to load JS in Dart


javascript,dart,google-chrome-app,content-security-policy
In my web page for Dart amount this script: <script src="https://test.net/test/test.js"></script> but when you launch the application it gives me the following error: Refused to load the script 'https://test.net/test/test.js' 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'...

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


javascript,firefox,events,contextmenu,unbind
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 ==...

Using resumable.js from Dart


dart,dart-js-interop,resumablejs
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...

Firefox Add-Ons: Variable Is Not Defined In Console


javascript,debugging,firefox,firefox-addon,xul
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="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="Uedit.js" /> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="Uedit"...

Opentype features cross-browser compatibility


css,css3,firefox,webkit,opentype
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...

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


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

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


firefox,ssl,browser,ssl-certificate
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...

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


javascript,firefox,plugins,requirejs,mozilla
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...

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


css,firefox,firefox-developer-tools,html5-apps
i have developed this website http://www.falestinona.com/nashra 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...

Checking, if optional parameter is provided in Dart


syntax,dart,syntax-error,questionmark
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,...

Manual adding firefox for android addon


android,firefox,firefox-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....

Can CSS identifiers begin with two hyphens?


css,css3,firefox,css-selectors,identifier
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...

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


javascript,firefox,firefox-addon-sdk
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...

CSS flexbox wraps content in FireFox (not Chrome)


css,google-chrome,firefox,flexbox,pseudo-element
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...

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


javascript,jquery,firefox,wamp,document-ready
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>...

Why is position of html button in tablecell different in Firefox


html,css,firefox,cross-browser
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...

nsICacheService doesn't work in Firefox 38


javascript,firefox,firefox-addon
I use Components.classes["@mozilla.org/network/cache-service;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?...

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


javascript,firefox,dojo,dgrid,broken-pipe
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...

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


firefox,firefox-developer-tools,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 display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?


css,html5,google-chrome,firefox
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....

Jquery not working while browsing with Firefox


javascript,jquery,firefox
Hello I'm using this code: $("#cart").click(function () { if ($(event.target).closest('.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...

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


firefox,caching,firebug
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....

using dart route package url got error 404


routes,dart
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){...

xul overlay for new menu in TB/Firefox main menubar


firefox,firefox-addon,overlay,xul
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"...

Magnific Popup position bug


google-chrome,firefox,position,magnific-popup
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: http://codepen.io/mediadivisiongmbh/pen/bdRjKy HTML <div class="hover-container">...

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


c,memory,dart,dart-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];...

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


javascript,firefox,iframe,firefox-addon,xul
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...

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


dart,polymer,dart-polymer
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...

Google maps not working in Firefox (gray box)


javascript,google-maps,firefox,google-maps-api-3
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...

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


javascript,jquery,html,google-chrome,firefox
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',...

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


unit-testing,testing,dart,dart-polymer
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>...

Inconsistent display on IE & Firefox


html,css,internet-explorer,firefox,twitter-bootstrap-3
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....

Exact solution to keep cookie after closing firefox


firefox,cookies
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....

Firefox dropdown menu click


html,firefox,select,drop-down-menu
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...

Show Firefox OS devtools on Firefox Developer Edition 'desktop'


firefox,firefox-os,gecko,firefox-developer-tools,firefox-developer-edition
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 2.1.0.0-prerelease (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...

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


javascript,dart,dart-js-interop
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...

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


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: https://bitbucket.org/neogucky/polymer-dialog-problem/ 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"...