I just started developing applications for firefox OS. I done a sample application and it is working perfectly. My issue is in my simulator my application Icon is not displayed. It uses the default icon.
I added the below code in my manifest file:
"icons": {
"128": "Feed.png"
}
Added a 128 x 128 image named Frrd.png to my directory. But it is not working for me, what can be the issue ?
First Answer:
Finally I got it.
For Firefox OS the icon size should be of size 30 X 30 or 60 X 60.
For Firefox Market place the icon size should be 128 X 128
For Firefox OS icons should be provided without a drop shadow and a
close cropped canvas in the following sizes:
30 x 30
60 x 60
Note: Firefox Marketplace requires all submitted apps to have a minimum of one icon that is at least 128 x 128.
Reference: Firefox OS - Style Guide
Actual Solution
I added all images with the dimensions specified in the doc to my application. But it also not worked !!!
Atlast I added a directory img to my project and added icons to it. Then modified the manifest.webapp file like:
"icons": {
"128": "/img/Feed.png"
}
It worked for me, I don't know whether it is a bug or not.
Firefox OS uses 30x30 and 60x60 icons
Using manifest.webapp to add Manifest not URL in Firefox OS Simulator.
This should work:
"icons": {
"128": "/Feed.png"
}
Firstly, +1 #Midhun MP. Secondly, it seems to only work with top-level directories regardless of the directory name. Tested on the Firefox OS Simulator version 1.2
Works:
"icons": {
"128" : "/icon/128.png"
}
Doesn't Work
"icons": {
"128" : "/assets/icon/128.png"
}
Related
The icon size was fine on previous version of macOS. After installed macOS 12.3, the icon became very small. The icon I used was 34x34 in pixel. I tried to use large icon, size 256x256 in pixel. However, the icon was still small. My code:
override func validateToolbarItem(in window: SFSafariWindow, validationHandler: #escaping ((Bool, String) -> Void)) {
// This is called when Safari's state changed in some way that would require the extension's toolbar item to be validated again.
window.getToolbarItem { (toolbarItem) in
toolbarItem?.setImage(NSImage(named: "MonochromeIcon"))
toolbarItem?.setLabel(NSLocalizedString("Open URL in Page By Poster 2", comment: ""))
}
validationHandler(true, "")
}
Any idea?
It turned out that it was the issue of Safari itself. I tried to used another icon and everything was fine. So only the icon I used can't be used.
For workaround, I had to change the icon. I will file a bug report to Apple and let them to investigate.
----Update-----
To use my original icon, I reimplemented the macOS Safari extension. Currently, macOS Safari extension could be implemented the same as iOS extension. And in that way, the icon will work.
I ran into a really strange issue and I can't really get my head around what is happening here. I was working on the theming of my recent React App when I realised that the default font size is different in Safari than in Chrome or Firefox. At first I thought this has to do with responsive font sizing since I know that Safari treats the rem values differently. Thus, for testing purposes, I have created a fresh install of CRA and tested a header and a paragraph with fixed font sizes:
h1 { font-size: 32px; }
p { font-size: 16px; }
Unfortunately it happened again and the result can be seen here:
There is about a 4px difference between Chrome / FF and Safari. When checking the developer tools of the individual browsers, all of them show the right font size (and line height).
I thought this might have something to do with Safari (since it seems that this browser is on the path of being the new Internet Explorer), so I have created a simple HTML 5 page to test the behaviour again. This is the result:
As you can see, everything appears as expected which indicates it has nothing to do with Safari.
I have also tried to reset the CSS with normalize.css but no success either. Did anyone else experience this problem?
My setup:
SYSTEM --
Mac OS 11.0.1
Safari 14.0.1
Chrome for Mac 86.0.4240.198
Firefox for Mac 82.0.3
CRA -- 4.0.1
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
After playing around for hours, setting up test projects and trying to verify the results on codesandbox.io, I found out that (occasionally) Safari is setting the initial zoom level to 125%. Since this is not always the case I am not sure if it has something to do with my system or it is really something with CRA and Safari...
I would be great to hear if anyone has been experiencing the same issue.
Sorry if I have been wasting anybody's time here!
I believe I can change internal CSS. Or may be somebody already has a solution.
You can apply css to your firefox browser with this method.
first find your firefox user profile based on your operating system. In linux userProfile directory is :
/home/--USER--/.mozilla/--something--.default/
then,make folder called "Chrome".
there are 2 files that can change css of your firefox,"userContent.css" and "userChrome.css".
userContent.css can apply css to your firefox tabs while userChrome.css apply to your firefox appearance,like developer tools and navbar.
So to change your start page(original name is about:home),make userContent.css file inside chrome folder. after all your directory tree should look like this:
/home/--USER--/.mozilla/firefox/--something--.default/chrome/userContent.css
then to change about:home style,use this code inside userContent.css:
#-moz-document url("about:home"), url("about:newtab") {
//insert css here
}
it should work perfectly and i tested it but if anything happen,i would be happy to help you
UPDATE
userprofile directory on windows is :
C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default
and mac OS:
Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default
I am experiencing an issue with production build version of the Sencha Touch based application not being able to apply styles properly in IE10 and Chrome.
Steps to reproduce:
Main.js
Ext.define('Lab.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'panel',
cls: 'MyFirstLogo',
itemId: 'firstLogo'
} ]
}
});
SCSS file - app.scss
.MyFirstLogo{
height: auto !important;
min-height: 100px;
min-width: 404px;
padding: 0px;
background-image:url(../../resources/images/test1.jpeg);
background-repeat:no-repeat;
background-position: left;
}
Make sure the background image URL is like this in resources/sass/app.scss - ../../resources/images/test1.jpeg.
Run "sencha app build production" in project root (Lab/)
Access the application in IE10 64bit (Win 7) : http://localhost/lab/build/production/Lab/
Images are not shown at all in IE10. However, when trying this in Chrome it works well. Chrome somehow is able to convert the ../../resources/images/test1.jpeg to http://localhost/lab/build/production/Lab/resources/images/test1.jpeg but IE10 doesn't do it and fails to show the image. This way it also works in my local development environment as it goes with my project structure.
In order to make it work in IE10, I have changed the image URL from ../../resources/images/test1.jpeg to resources/images/test1.jpeg (This actually makes sense as resources/ directory is in the project root) in resources/sass/app.scss and rebuild it for production. In this case image starts to appear in IE10 but now when I use Chrome - Image does't show up and Chrome is trying to retrieve the image from this URL which in not right: http://localhost/lab/build/production/Lab/resources/css/resources/images/test1.jpeg, and it fails. This way it DOES NOT also work in my local development environment.
This issue happens for other resources as well like "fonts".
Could you please help me understand what's going on here with Sencha's Production Build version not working in both IE10 and Chrome at the same time? Is this this bug with Sencha Touch or Chrome or I am missing something here?
It turns out to be the known bug in Sencha Touch as confirmed by the Sencha people. Check this link: http://www.sencha.com/forum/showthread.php?266275. Thanks #peter and #arthurakay for you help. If I need a workaround or further discussion on this. I will start the discussion again. Thanks guys!
Why are you going back so many directories in the relative file path?
Whether you're in development or production, the CSS file lives at:
{app_root}/resources/css/app.css
Assuming your images are here:
{app_root}/resources/images/
...then your filepaths should look like this:
background-image:url(../images/test1.jpeg);
FYI I'm assuming Touch 2.3 and Cmd 4.0.x since you didn't specify.
The address you access the application (in any browser) becomes the page base address. In your case it's http://localhost/lab/build/production/Lab/
You can confirm this by printing alert(document.location.href).
Check the trailing slash, please.
Address ../../resources/images/test1.jpeg then means http://localhost/lab/build/production/Lab/../../resources/images/test1.jpeg and translates to incorrect
http://localhost/lab/build/resources/images/test1.jpeg
Modify the relative address to ../resources/images/test1.jpeg to get
http://localhost/lab/build/production/resources/css/resources/images/test1.jpeg
You can always verify the resulting address by entering it to the browser's address bar.
Both IE and Chrome translate paths correctly as this is their basic task.
I have found a workaround to make images/icons visible on both IE10 and Chrome.
Here, CSS property given for any given class containing "background-image" should contain working URL's for both IE10 and Chrome as follows :
.menuHome {
background:url(resources/icons/menu/Home.png),url(../icons/menu/Home.png) no-repeat center;
}
Here both URL's are present in the CSS property. So IE10 will fetch image from 1st URL and Chrome will fetch image from 2nd url.
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.