Shop Forum More Submit  Join Login
MOZILLA EDGE for Firefox by Wellkins MOZILLA EDGE for Firefox by Wellkins



   CURRENT STATE
                                             Work in progress
   CURRENT VERSION                                        1.2.0
   LAST UPDATED
                                               2016-01-19

   SUPPORTED OS                                              Windows 10
   SUPPORTED LANGUAGES                               English, French, Spanish (soon)
   SUPPORTED FIREFOX VERSION                    43.0.X
   SCREENSHOTS GALLERY                                LINK



******************************************************************************************************************************************

      D E S C R I P T I O N

******************************************************************************************************************************************

       This theme aim to reproduce an accurate replica of the popular Microsoft Edge browser for the Firefox browser.
       Through the progress of this project, every UI parts will be changed to reflect this "Flat" design.



******************************************************************************************************************************************

      F E A T U R E S

******************************************************************************************************************************************

      
Here's a non-exhaustive list of the UI parts that are actually affected by the theme (latest version) :
  • Color scheme (Dark)
  • All Firefox icons + 2 bonus icons for "Ublock Origin" and "Stylish" add-ons.
  • Main menu panel
  • Customization panel
  • Edit Bookmark panel
  • Bookmarks menu panel
  • Downloads panel
  • Share panel
  • Forget panel
  • Context menus
  • Subview menus
  • Website Identity panel
  • Notifications popup
  • New Tab page
  • Home page
  • Preferences page
  • Add-ons manager
  • Library
  • Private windows
  • Toolbar behaviors
  • Tabs animations
  • Personal toolbar
  • Lightweight themes (a.k.a "Personas") are fully compatible


       Upcoming features :
  • Spanish language support
  • Sidebar support
  • Dialog windows support
  • Hello panel
  • Light theme

          and probably more



      Star! ADVICE : Don't like the shadow displayed under the context menus and some other popups? You simply need to disable the option "Show shadows under windows" within Windows 10.
                           If it's possible, I will try to find a way to remove them with the proper CSS code.




******************************************************************************************************************************************

      R E Q U I R E M E N T S

******************************************************************************************************************************************

       Before you proceed to the installation of the theme, make sure you meet the following requirements. It's important, otherwise the theme might not work as intended or not work at all.
       You are also invited to read the license terms before downloading.

       Operating system :
  • Windows 10

       Required Firefox Add-ons :

  • Stylish                             LINK
  • Buttons Back                   LINK



****************************************************************************************************************************************** 

      I N S T A L L A T I O N

**********************************************************************************************
********************************************

      The code is too big to be uploaded on userstyles.org (they have a file size limit). It means that the theme can't be automatically installed (for now), so you'll have to do it manually.
      Below are the simplified steps to achieve the installation. You may also want to follow the tutorial on AskVG. Big thanks to Vishal-Gupta.

      1. Select the folder corresponding to the language used within Firefox.
      2. Open the folder named "Main File".
      3. Open the text file included in this folder, then copy the entire contents.
      4. Now open Firerox, then head to the "Add-ons" section (about:addons).
      5. Select "User Styles" in the left menu.
      6. You will see a boutton named "Create New Style". Click on it.
      7. Paste the text previously copied in this window.
      8. Click the "Preview" button at the top of the window. If you see the theme, you have succeeded! Otherwise, restart from step no. 4.
      9. Click the "Save" button and close the tab.



******************************************************************************************************************************************

      U P D A T E S

******************************************************************************************************************************************

      Please keep in mind that the theme is a work in progress. It's not a finished product and it might contain some display bugs.

      The file will be frequently updated through this page. Make sure to come back from time to time to update the theme.
      If you want to receive a notification when a new version is available, just click on the "Watch" button placed just after the preview picture.

      NOTE : Before updating Mozilla Edge, don't forget to disable or delete the old version in your Stylish menu.



******************************************************************************************************************************************

      C O M P A T I B I L I T Y

******************************************************************************************************************************************
  • The theme might be incompatible with other Stylish theme / Add-ons that modify Firefox's interface.
  • From the build 1.0.0, only the Stable channel is compatible.
  • This theme is designed for Windows 10 only. It'll probably work on older OS version, but you should expect some additional bugs, plus the fact that it won't fit very well with the rest of the system, for instance, in Windows 7. I won't give any support for these older OS and won't fix the bugs related to the use of these.



******************************************************************************************************************************************

      C R E D I T S  /  L I C E N S I N G

******************************************************************************************************************************************
  • The theme ("CSS code") has been entirely wrote by Wellkins.
  • The credits for the required addons ("Stylish" and "Buttons Back") goes to their respective owners.
  • The original visual assets are copyrighted material owned by either Microsoft Corporation and/or its affiliates or the person or organization that developed the concept.


      Some rights reserved. This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.




******************************************************************************************************************************************

      C H A N G E L O G

******************************************************************************************************************************************

      Version 1.2.0 (2016-01-19) :
  I haven't noted all the changes made during the development of this build. I'll try to list most of them.

                                                          - New design for the Library, now fully functional. Design inspired by Windows apps, such as Groove Music.
                                                          - New design for the downloads progress bar.
                                                          - New design for the fullscreen warning popup.
                                                          - New website identity icon for mixed content.
                                                          - All icons have been redone. Some of them have changed to be more representative of what they do.
                                                          - Added the blue "open" visual for some icons in the toolbar when its panel is open.
                                                          - Many fixes for the location bar and the search bar autocomplete popup.
                                                          - Fixes for the "Downloads" panel.
                                                          - The panel "Edit This Bookmark" have been totally redone, to avoid most bugs.
                                                          - The panel "Bookmarks Menu" have been totally redone.
                                                          - The popup "Website Identification" have been fixed and is now fully functional.
                                                          - Fixed a bug which makes the "delete" button not showing in the context menu from the Library.
                                                          - "Polished" many things in most areas.
                                                          - Some code cleaning.

      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      Version 1.1.0 (2015-12-20) : 
- Updated to Firefox 43.0.1
                                                          - Added French language support.
                                                          - New "Add-ons Manager" page design.
                                                          - New "Options" page design (unfinished).
                                                          - New design for the "Sound" icon displayed in tabs. Its position has also been changed to the right of the favicon.
                                                          - New "Forget" panel design.
                                                          - New "Menu bar" design.
                                                          - New "Find bar" design.
                                                          - New "Save password" notification pop-up design.
                                                          - New "Install add-on" notification pop-up design.
                                                          - New "RSS Feed" icon design.
                                                          - New "Stylish" icon design.
                                                          - New folder icon design.
                                                          - New "Back" button when you're in a subview menu in the "Main menu" panel.
                                                          - New "Show more" button in the "Personal Toolbar" when it's full.
                                                          - New "Full screen" button icon when full screen mode is enabled.
                                                          - New window captions when full screen mode is enabled.
                                                          - New text highlight color.
                                                          - Fixed the missing "RSS Feed" button from the toolbar and the "Customize" window.
                                                          - Fixed the "Sync" icon displayed from the "Main menu" panel when users are connected to a Firefox account.
                                                          - Fixed bad height value of the "Cut / Copy / Paste" buttons when placed in the toolbar.
                                                          - Fixed bad height value of the "Zoom control" buttons when placed in the toolbar.
                                                          - Fixed the hover properties for the two bookmark buttons when placed in the toolbar.
                                                          - Fixed the buttons at the bottom of the "Customize" window.
                                                          - Fixed the button's size when placed in the title bar.
                                                          - The "Search bar" for the toolbar have been completely redone.
                                                          - The "URL bar" have received some fixes and improvements, as well as the "Results" popup box.
                                                          - The status bar (the URL shown at the bottom-right of a page when a link is hovered) have been improved.
                                                          - The Context menus have received some fixes and improvements, such as the submenus within them.
                                                          - The icons for the "Find" and "Search" buttons have been changed.
                                                          - The "about:blank" page is now truly blank.
                                                          - Some tabs properties have been edited to prevent display bugs.
                                                          - Some menus have received minor fixes and improvements.
                                                          - Minor changes have been made to the "Edit Bookmark" panel.
                                                          - Removed the animation when you click on the "Bookmark this page" star button.
                                                          - Added back some animations. Doing this have fixed some issues with the "Customize" window and the "Full screen" mode.
                                                          - Added back the auto-scroll button in the submenus, with a new design.
                                                          - Many fixes have been done in the personal bar folders menus, bookmarks menus and the bookmarks submenus.

      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      Version 1.0.0 (2015-11-29) :
This build is for Firefox 42.0 (Stable channel) English (US) only. French and Spanish languages will be added soon.
                                                         The changes/additions I made in this version are too numerous to list them all. Here are some highlights :

                                                         - Every Firefox icons have been reworked to a Microsoft Edge design + bonus icon (Ublock Origin)
                                                         - New "Downloads" panel design
                                                         - New "Social Share" panel design
                                                         - New separators have been added between tabs
                                                         - New tabs favicon added
                                                         - New "Identity pop-up" design
                                                         - New "Private browsing" window design
                                                         - New download states icons have been added
                                                         - New "Reader mode" icon (when active) have been added
                                                         - The "Bookmarks" panel have been reworked
                                                         - The "Edit bookmark" panel have been reworked
                                                         - The "New tab" page have been completly redone and fixed
                                                         - The "Home" page have received some improvements
                                                         - The "Identity icons" have been reworked
                                                         - The "Main menu" have received some improvements and bug fixes
                                                         - The "Cut / Copy / Paste / " buttons are now fully functionnal
                                                         - The "Customize" window have been completly redone

      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

       *
For the complete list of changes made in the previous versions, please refer to the changelog file provided with the theme.







You are invited to give me your feedback in the section bellow !




.
Add a Comment:
 
:iconjojomama:
JoJoMaMa Featured By Owner Apr 4, 2016
Update?
Reply
:iconmhimranhossain:
mhimranhossain Featured By Owner Apr 2, 2016  Hobbyist Traditional Artist
i had an video streaming issue. when i quit the tab while playing the video. the audio stops about 5s after closing. it happens only when the theme is applied
Reply
:icongollyjer:
GollyJer Featured By Owner Mar 31, 2016
Just wanted to say I LOVE this!  Thanks for putting together.
Do you want bug reports and or fix suggestions/code?
Reply
:iconsamw61:
samw61 Featured By Owner Mar 27, 2016  Hobbyist Photographer
Hey mate, love this theme, really great to use! I know you're working on an update, but I'd like to request a few slight usability adjustments if at all possible!

- Make close buttons have a larger selection area (it's difficult to hit using a touch screen), but leave at least 1px at the top so the mouse still selects the tabs.
- Remove the close buttons on hovered pinned tabs.
- Right click menus cannot be navigated by keyboard (I use it mostly when spell checking typed text, having to go back to the mouse interrupts work flow).


I know some of these may not be possible because of the method of skinning, but I'd thought I'd get them out there! Cheers for the sweet theme though! :D
Reply
:iconchristohartono:
christohartono Featured By Owner Mar 22, 2016
The upvote on the embedded disqus is missing:

onedrive.live.com/redir?resid=…
Reply
:iconbroseye:
broseye Featured By Owner Mar 20, 2016
how to disable the theme? i've turned the style of with stylish addon and also removed it but the theme is still there
Reply
:iconchristohartono:
how about adding the light theme?

by the way, this is the best firefox design
Reply
:iconserginhonike10:
serginhonike10 Featured By Owner Mar 12, 2016
Nice work bro.

I had use this theme since the beginning, and I just can say "amazing" ;D

It would be nice if you could 'clone' alert, confirm and prompt javascript dialogs style. You can acomplish this with the tabmodalprompt css element. I've done my own implementation of that (proof), but i hate css and I don't have any dom-elements-inspector tool.

Again, nice work and thanks
Reply
:iconwellkins:
Wellkins Featured By Owner Mar 12, 2016  Hobbyist Interface Designer
Thanks for your feedback, and the kind words! It's nice to receive comments from people using the theme from the beginning.

About the alerts and the dialog windows, I'm already working on it! It should figure in the next releases, when the result will be close enough to the ones within Edge.
Reply
:iconxxzendomxx:
xXZendomXx Featured By Owner Mar 9, 2016
If I close a tab, in which a video is played, the sound goes in the background even further a few seconds. The problem is definitely on Mozilla Edge. If I disable it all works without problems.
Reply
:iconwellkins:
Wellkins Featured By Owner Edited Mar 12, 2016  Hobbyist Interface Designer
Yes, it's a known bug with the theme. I unfortunately don't know why it does that and therefore, how to solve the issue.
I understand that this problem can be really annoying some times, and I'll do my best to fix it as soon as possible.

Thank you for your comment.
Reply
:icontommyberetta:
TommyBeretta Featured By Owner Mar 7, 2016
NICE ! Works with Firefox 44.02 !
Reply
:iconsohappynowwwwww:
SoHappyNowwwwww Featured By Owner Mar 2, 2016
i.imgur.com/G6lDZxb.png

I updated from Windows 7 to Windows 10, but on Windows 7 it doesn't appear.
Can you fix? Thanks for your theme. And I can't wait the update!
Reply
:iconwellkins:
Wellkins Featured By Owner Mar 2, 2016  Hobbyist Interface Designer
Not sure I understand your request. What do you want me to fix exactly ?
Also note that Windows 7 is currently not supported by the theme.
Reply
:iconrisingfirestar:
RisingFireStar Featured By Owner Feb 26, 2016  Student Artist
When will be a next update ?
Reply
:iconwellkins:
Wellkins Featured By Owner Feb 26, 2016  Hobbyist Interface Designer
I'll take back the development in the next few days, so you should expect an update in the second half of March.
Reply
:iconfaust5000:
Faust5000 Featured By Owner Feb 20, 2016
Great job! Only you can transfer up to the end of the skin? Some inscriptions whith Downloads, Bookmarks, Edit, Zoom why something in English.
Reply
:iconanchith:
anchith Featured By Owner Feb 12, 2016
Is this a complete theme? If so, will you PLEASE tell me how to do one myself? And is it possible to make commplete themes without any knowledge of coding?
Reply
:iconwellkins:
Wellkins Featured By Owner Edited Feb 14, 2016  Hobbyist Interface Designer
It's still a work in progress. When it will reach the end of its development then yes, it will be a complete theme.


To create one by yourself, you will need to know the basics of the CSS language. You shouldn't be worried, it's not that difficult to learn. When I started creating Mozilla Edge, I hadn't any knowledge with CSS. Once you have understood the structure of a CSS file, you'll be able to create a wonderful theme.

There are two ways to create a complete theme : You can use the Stylish extension, which will allow you to see your changes as you write them, without restarting Firefox. In this case, you'll have only one file to worry about. Otherwise, you can create an "official" complete theme, intended to be published to the Mozilla Add-ons website. This last method is a bit more complex, because there are several different files to write and there's not much updated tutorials on the web.

I suggest you start with the first method, by using Stylish. It will be easier to manage. You may want to take any Stylish theme as a starting point, but it's recommended to start from scratch to avoid bugs.


Useful information :

  Getting started with CSS
  CSS Reference
  Enabling the Browser Toolbox
  Tutorials on MDN (Outdated, but still have some useful information)

Useful extensions for development :

  DOM Inspector
  Element Inspector


That's all. Good luck !

Reply
:iconanchith:
anchith Featured By Owner Feb 15, 2016
Thank you!!
Reply
:iconsepia66:
sepia66 Featured By Owner Feb 7, 2016
Just go to the icon of Adblock Plus, right click and choose Remove from toolbar
Reply
:iconkaz28100:
kaz28100 Featured By Owner Feb 4, 2016
Very Nice+fav Now i just need Adblock Plus to be hidden :p
Reply
:iconalija638:
Alija638 Featured By Owner Feb 2, 2016
Looks awesome man! Best theme for firefox so far! Can you tell me how can i set my url bar stays black on mouse over and when i type it to stay without white color?
Reply
:iconjazzthieve:
Jazzthieve Featured By Owner Edited Jan 30, 2016
This messes up the new tab completely if you use a new tab extension and the new tab provided with this script isn't really good. Which is too bad, it's a good looking theme.
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 30, 2016  Hobbyist Interface Designer
You are right, most extensions that affect the New Tab page conflicts with the theme, since most of them include their own CSS code.
That said, the New Tab page included with the theme will be improved in future releases.
I may also release a version that doesn't affect this page for compatibility purposes.
Reply
:iconcomarshallcraft:
comarshallcraft Featured By Owner Jan 29, 2016
awesome, create a mozilla edge browser using the open-source code mozilla has
Reply
:icontxgfc:
txgfc Featured By Owner Jan 28, 2016
Extremely successful...
What do you plan to do in the white version?
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 28, 2016  Hobbyist Interface Designer
Yes, Edge's flat design is pretty popular these days..!
The light theme will have the same design and features as the dark theme, except that it will have a different color palette.
Reply
:icontxgfc:
txgfc Featured By Owner Feb 2, 2016
Waiting Impatiently.
Reply
:iconphot0nic:
phot0nic Featured By Owner Jan 27, 2016
Hi, I love the theme, and I can't wait for the light version.

Where do you get all of the Edge-style icon images?  You replied to an earlier comment saying that you got them from the Edge resource folder.  Where specifically are the Edge resources located?  I've been looking all over for a way to extract the images for my own uses, but I just can't find them.  Thanks!
Reply
:iconwellkins:
Wellkins Featured By Owner Edited Jan 27, 2016  Hobbyist Interface Designer
Oh, sorry, I didn't saw your previous comment..!

The icons are actually glyphs, located in a font file named BrowserMDL. You can find it at the following location on your computer : C:\Windows\SystemApps\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\Assets\Fonts
Obviously, you must be on a Windows 10 system.
After then, simply install the font and you'll have access to every glyphs within the font by using the Character Map or any other software that have a glyphs panel, such as Adobe Illustrator or the latest version of Photoshop.

NOTE : If the purpose is to work on my theme, remember that you can modify it for your personal use only. For more information, please read the license terms.
Reply
:iconphot0nic:
phot0nic Featured By Owner Jan 28, 2016
Thank you very much.  I found that directory and those fonts while I was looking for Edge's resources, but I didn't even consider that the icons would be glyphs in the fonts so I just ignored them.  In hindsight, given the style of the icons, I probably should have been able to figure that out.  Thanks again for your help.
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 28, 2016  Hobbyist Interface Designer
You're welcome. If there's anything else, I'd be pleased to help.
Reply
:iconrobster0x:
Robster0x Featured By Owner Jan 25, 2016
Good Work Wellkins!
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 26, 2016  Hobbyist Interface Designer
Thanks, enjoy the theme :) (Smile) 
Reply
:icondavedouble-u:
davedouble-u Featured By Owner Jan 23, 2016
This is really Kewl! I love it! My Status R Forever progress bar works great & I just tweaked the color to a lighter shade of blue. Works Great!
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 26, 2016  Hobbyist Interface Designer
Nice! You're free to customize it the way you like it.
Reply
:iconrisingfirestar:
RisingFireStar Featured By Owner Jan 23, 2016  Student Artist
Don't work animations :c
Reply
:iconwellkins:
Wellkins Featured By Owner Edited Jan 23, 2016  Hobbyist Interface Designer
The default animations regarding the menus have been deliberately removed, simply because I did not like the final result.
Some animations inspired by those in Microsoft Edge will be incorporated in future releases.
Reply
:iconrisingfirestar:
RisingFireStar Featured By Owner Jan 25, 2016  Student Artist
Can u please make it compatible with "Star-Button In Urlbar" ?
Reply
:iconrisingfirestar:
RisingFireStar Featured By Owner Edited Jan 25, 2016  Student Artist
And, will u make a new tab opening/closing animation ?
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 26, 2016  Hobbyist Interface Designer
Yes, animations for tabs will be added in future releases.

About your request for compatibility with the extension "Star button in URL bar", I won't make this theme compatible with it.
Instead, I will eventually convert Mozilla Edge as an official extension and in doing so, I will use some script lines to make the star button displayed in the URL bar, just like Edge. The add-on wouldn't be necessary after that.
Reply
:iconsepia66:
sepia66 Featured By Owner Jan 22, 2016
Again a big thank you for your hard work. I think this has already been reported but when you search in the search bar, the results are in white and cannot be seen. Check this out.

imgur.com/CkParAa
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 23, 2016  Hobbyist Interface Designer
Hmm, I thought I had already solved this problem Facepalm 
I think I will completely rework this part of the interface, to ensure that this bug will be fixed once and for all!
Reply
:iconsohappynowwwwww:
SoHappyNowwwwww Featured By Owner Jan 21, 2016
i.imgur.com/OzZCL2a.jpg

Can you fix it?
It appears in the Customize page.
Thank you for the theme.
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 21, 2016  Hobbyist Interface Designer
The problem will be solved in the next build. Thanks for the report!
Reply
:iconjosephsm:
JosephSM Featured By Owner Edited Jan 20, 2016
Nice Work!

For the latest update:
-When having many open tabs and minimize then maximize, the tab arrows are stuck even in the maximized window
-The final tab just before the "Tabs Right Arrow Button" is showing a dark color on its edge
Reply
:iconwellkins:
Wellkins Featured By Owner Jan 20, 2016  Hobbyist Interface Designer
Thanks!

Could you give me a screenshot of these two bugs? It would be appreciated! Thanks again.
Reply
:iconjosephsm:
JosephSM Featured By Owner Jan 20, 2016
Here is the screenshot:

sta.sh/0jo59y51bw
Reply
:iconhellisherebitches:
HELLISHEREBITCHES Featured By Owner Jan 19, 2016
Is the light version ready?
Reply
Add a Comment:
 
×



Details

Submitted on
September 28, 2015
File Size
375 KB
Link
Thumb

Stats

Views
71,826 (17 today)
Favourites
297 (who?)
Comments
275
Downloads
20,982 (8 today)

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.