mucksponge / materialfox Goto Github PK

Commit 8171483 removes the ability to highlight the text in the urlbar. The issue is also mentioned on the reddit thread.

Default Firefox:

MaterialFox:Master:

The mouse is being held down when dragged in both examples.

The problem stems from the #urlbar[focused]::after styles as it doesn't let the pointer pass through correctly.

I have found two possible fixes:

1. Add pointer-events: none; to #urlbar[focused]::after
   Upside: Better than no text selections at all.
   Downside: urlbar must be pressed at least once before being able to select text on the second time. All text is not highlighted when you click on it for the first time. More clunkier than default Firefox.
   I wouldn't use this unless fix 2 is incompatible for some reason.
   

2. Remove the entire #urlbar[focused]::after selector and styles, add the following style to #urlbar[focused]
   Upside: Behaves exactly like default firefox
   Downside: There are some artifacts on the curved parts of the outline due to box-shadow. Not sure if it works on MacOS correctly, I'm trying to get a VM running.
   

box-shadow: 0 0 0 1px var(--textbox-outer-color-focused), 
            0 0 0 1px var(--textbox-outer-color-focused) inset !important;

Previous commits had a variant of the box-shadow solution, but with 2px instead, I'm not sure why it was changed to add a specific element for the border as it breaks the interactivity with the urlbar.

If you'd like to merge the second solution, my fork already has it and you can pull request from it: https://github.com/mnxn/MaterialFox

GIFs and solutions were tested on Windows 1803 with Firefox Developer Edition 63.0b2. I'll update this Issue if I find any problems with the second solution in a MacOS VM.

Edit: Just checked in MacOS and it seems to work fine.

Is it possible to have dark context menus? (favorites, etc)

Wonderful theme! thanks so much!

Since I applied this theme, Firefox now doesn't use my system's min/max/close buttons

They don't even match the theme's color.

I'm on Windows 10 and I am using the Arc theme, and the buttons look like

I've searched on reddit and a user said that it can be fixed by commenting out or deleting tags titlebar-min, titlebar-max and titlebar-close on the .css files, however, Material Fox doesn't seem to have any.

Is there anything that can solve this issue?

In Chromium, any internal chrome:// pages - like settings, bookmarks, extensions - have a "Chromium" title in the address bar, along with the product icon. Firefox also has this style for everything that starts with about:
Why does this userstyle hide the title then? Or even if intended, a preference would make sense.

Firefox 63.0b8, style build b000227.

Firefox's built-in light theme

Firefox's built-in dark theme

Firefox's built-in default theme - looks better, but I'm not sure if it is fully accurate.

Hover and selected states look fine in all except dark theme. Probably related to #9.
Tested on commit b0aa0cd, Firefox 63.0b11, macOS 10.14 (Mojave, light theme).

Any plans for trying to make chrome-like search results?

A short movie says more than thousands words...
https://youtu.be/VYoWlDjgXEk

The EV SSL company name label is green on Firefox 63.0b6. Maybe you're using some old identifiers? This issue does not occur on sites without an EV cert.

Tested on Firefox 63.0b6, macOS 10.13.6.

Firefox 62 introduces an automatic dark theme change when using MacOS Mojave in a system-wide dark mode. It doesn't appear that this is working with MaterialFox enabled?

Left side

The overflow arrows are invisible, but there's a white line that overlaps the tab icons.

Right side

The "Simple New Tab" button clips behind the tab content when it's hovered or focused.

...could emulate Chrome's Incognito mode. Not sure if you should only replace the Firefox one or also add a check for the Synced Tabs button though.

Description

The URL bar becomes smaller when empty
Commit Id: 8171483

Steps to reproduce

You can either:

• Open a new tab (URL bar should be empty)
• Clear the contents of an active URL bar

It's easily noticed when adding/removing a single character from the URL bar

System Details

• Windows 10
• Tested on Firefox 61 and Firefox Developer Edition 63.0b1
• Tested with different themes

With Default Theme, Firefox changes to the Dark Theme if you're enabling the Dark Mode automatically starting with Firefox 64.

Tab selection is a new feature in Firefox 63 (should be partly available in 62 by enabling browser.tabs.multiselect) and this theme does not seem to highlight the selected tabs in any way. Chrome has had this feature for a long time, so it's not hard to guess what they should look like :P

Tested on Firefox 63.0b6, macOS 10.13.6.

When looking at a normal HTTP site, the lock changes to an info icon like Chrome (please recommend users to enable security.insecure_connection_text.enabled for the "Not Secure" text - see PR #27).

However, when looking at a HTTP site with a password field, the info icon persists but the normal lock icon persists too, which is a huge security issue.

I would recommend swapping the broken lock with the warning icon and when the icon exists, make the whole text red, like Chrome in October (also available now on broken HTTPS, FWIW).

Firefox 63.0b6, macOS 10.13.6.

So this happened... I'm suspecting it's a bug.

I think the page info popup can also be made quite similar to Chromium's. Here's my (working, but not pretty yet) start on it, feel free to include:

#identity-popup-mainView { /* Limit overall popup width - default is 33 */
    min-width: 25em !important;
    max-width: 25em !important;
}

#identity-popup-mainView-panel-header { /* Remove primary header "Site information for..." */
  display: none !important;
}

.identity-popup-security-content > description { 
  font-size: 135% !important; /* Increase security text size */
  -moz-box-ordinal-group: 0 !important; /* Make the text topmost */
}

.identity-popup-headline {
  font-size: 100% !important; !important; /* Decrease domain font size to look like the 3 bottom-aligned buttons on Chromium */
  margin-block-start: 0.4em !important; /* Add space between the domain and security state */
  margin-inline-start: 0.2em !important; /* Align similarly to permissions */
}

#identity-popup-security-descriptions > description {
  color: inherit !important; /* Black text for security description */
  font-size: 100% !important; /* Normalize description text */
}

.identity-popup-warning-gray, .identity-popup-warning-yellow {
  background: none !important; /* Remove in-text triangles for mixed content */
  padding-inline-start: 0em !important;
}

#tracking-protection-label, #content-blocking-label, #identity-popup-permissions-headline {
  font-size: 100% !important; !important; /* Decrease category title font size to look like the 3 bottom-aligned buttons on Chromium */
  margin-inline-start: 0.6em !important; /* Align similarly to permissions */
  margin-block-end: 0em !important; /* Remove bottom margin */
}

.identity-popup-security-content, #identity-popup-permissions-content, #identity-popup-content-blocking-content {
  background-image: none !important; /* Remove big category icons */
  padding: 0.5em !important; /* Normalize padding */
}

/* Hide generic messages, including: */
#identity-popup-content-blocking-not-detected, /* Blockable content not detected */
#identity-popup-content-blocking-detected, /* Blockable content detected */
#identity-popup-content-blocking-disabled-label, /* Content blocking itself disabled */
#identity-popup-permission-empty-hint { /* Permissions not given */
  display: none !important;
}

.identity-popup-section {
    border-top: none !important; /* Remove separators */
}

#identity-popup-security-expander {
   /* The inline identity info button - could look like the Certificate button on Chromium */
  
  -moz-box-ordinal-group: 0 !important; /* Move the expanding arrow before text */
  background: none !important;
  
  /* Demo: low-res cert icon */
  list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETk3luqeSQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAExSURBVCjPlZK9TsJgFIYfoSOd6IIjJi2jTBK8BaUmYHDBRePNEK9A0URWYQAmDG6WO4D2Gy0LTbsUUyesg2lj/eHnnc75zvuck7z5duZzJ3xot1kuP9hE6XSK80YDqdPtMp2abKPHTgfJ9xcAqKpKQVNXAqYlEEKwWLwhRY+KkkUraCtB1/MQ4quOQcuycF0vYRSR6w/F4GG5jK5XEsOLy6v1YK8/oNcfbBxQDFaOj9D1CqZl0Wxex4ZicZ+zeh3Hcbi5beH7fhJ8MQxMS/AeBInNJ7qOomRRlCyl0gHD4RMAqcigaRp7+Tz2bJYAbdsGIAxDZt9m8UXX9Qh+XANo3d2T281hGGMmk+lv8L/owzBkNHrGfrWT4chyZm2ChjFO9LKcQTqtVQmCYKtPXqtW+QRoEHiPUN97ZgAAAABJRU5ErkJggg==') !important;
}

.identity-popup-expander > .button-box {
  -moz-box-ordinal-group: 99 !important;
  border-right: none !important; /* Remove inline identity separator */
}

#identity-popup-securityView-body {
  margin-inline-start: 1em !important; /* Fix security details padding when opened */
} 

.identity-popup-preferences-button {
  /* The Content Blocking settings button - could look a fill-width button on Chromium, but with adblock icon */
  
   -moz-box-ordinal-group: 0 !important; /* Move settings buttons before text to look more like Chromium full-width buttons*/
  
  /* Demo: low-res adblock icon */
   list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOEToUH6C8+AAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACiSURBVCjPY/z9+/f/7Tt2M1y7foPh////DMQARkZGBi1NDQZPD1cGliNHjzOs27CJgVRw4+YtBl5eHgamDx8+MpALPnz4yMAC4ygqyDOwsbERpfHXr18M9x88ZGBgYEAYkJIUzyAlJUmUAU+fPWOoqWtmYGBgYGBioBCMGjAYDGAREOBnYGBgYKiuayJZs4AAPwOLjbUlw+fPX8jKTDbWlgwAZgMxfMlgM2AAAAAASUVORK5CYII=') !important; */
}

#identity-popup-clear-sitedata-button {
  /* "Clear Cookies and Site Data..." button - make it look like the cookie button */
  
  background: white !important;
  border-block-start: none !important;
  
  margin-left: -8em !important; /* Hacky way to left-align the button, there are probably better ways */
  
  /* Demo: low-res cookie icon */
  list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETsMFdcV7wAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAJFSURBVDjLjZNLT1NhEIaf0sppm5LQixIESxqhiJKuhAh4gY0QNYIRUIGfIJioe6Mb0agxQoyiiGsvJCBuMAi6EBRRYGELKSkWVi1NBQsnQDmfi6OFWjDObpKZ531nMqMRQgj+CkVR8HqnmJmdZbvNisvlYqvQbUzm5ubo7X3Dx0/DRCIRAPbk5v4fwOfzcfvOXWRZjitYU9b4VyQBRCIR7rW0IssyKSkpXGg6T+mRwwBMT3/nxs1bjI2Nb+3g2fMXLCz8BCAzMxOXy4Veb2Dg3XtWV1eZnJwkOXkbkl4ibUcaZnNqDKCZn18QFy9dZuMu7XY7oVCIxcXFBMWMjAyuXb2y7sDj8SCEoLLyJDvT02l79Bi/37/lzMFgkK6ubpK0Wg4dLEEXDocBKCkuxmq18LKzk0AgiMlk4uyZWr6OjjIy8iUGWFlZoftVj5oIgS66pm75enMzkqQnEAgCUFhYQFHRAYxGYwyQlWXH75+JjStJEjqrxQJAOPwjzurg4BBGo5HxcXX7NdWnqagop739CR8GhwCw2WzonM6cTWeVZZmentdx1hVFYWlJvRONRkN+/j40Qgjx4GEbw8Of4wAOhwOnM4e+vrdEo9EEgbKyUhrq69RDaqivw2QyxRU01J+jtqaavXl5Cc0Wi4VTVVWqkz/P5Ha7aWm9z/LyMgDZ2btxOBz09w/EOTCbU2lqbMRu3xUPUJ8pREfHUzwTEwmqWq2WE8ePUV5+FEmS1i9xs3f2eqf45nYjFOW3qpmCgv0YDIYE8C/lYedSnVP+RQAAAABJRU5ErkJggg==') !important;
}

#identity-popup-permission-preferences-button {
  /* The permission settings button - could look like Site Settings on Chromium */
  
  /* Demo: low-res cog (page settings) icon */
  list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOEToxVKRovwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAHqSURBVDjLlZNNU1JhFMd/h3sdWFzABSPBAoYPkEsvUE4Bu+wFnElzX32IUkvBPkS1rzaiM+rOcgc4Ywv7ANfbDDCYCxjc2eVpQVxRpJnO6rz+n/Oc/zmilFLcIPv7Xzk/PwfAMAxyuexNaeiMkU+fvzDAFpGxAJ6B0mq1cBwHgBPbZrgxpRQntg2A4zi0Wi03Jkop1e50eP1qGX1igunp21QqVa7/TERIpZIcH//g98UFG+9KTAaDfYD3Hz5Sqx3yP2KaM7x88RxPs9m8sXhqaorHjx4ye/cOPp9vJF6rHdJoNJBer6fKW9vs7u65wUAgwPraG/x+PwDtTodicYN2u+3mzM09oJB/gkdEmC/kSZqmG8xlM24xwGQwSDZz37XTqSTzhTwicsmCeMRN0HRtpOXe0FCHdY9Sis3NMpVK1XUeHX2/wkK32+Xg24FrV6s1ylvbKKWQer2uVlbfjryYSCTIZO4BsLOzx+np6UhOqbiGHo1GMc2ZESYsy8KyrLE0Jk2TSCTSn8HCwlN8Xi+GYZBOpxCRkQIRIZ1OYRgGPq+XpaXFy00crHIoFELTNGz7J+vF0hWA1ZVl4vEYjuPw6+yMW+Hw1WMK/3UAxOMxRMQdpK7rxOOxPkOa5hb/8xqXni1envPQTlyXP5pov06hpTmBAAAAAElFTkSuQmCC') !important;
}

.identity-popup-permission-item, /* Permission item */
#identity-popup-content-blocking-category-fastblock, /* Slow-loading trackers */
#identity-popup-content-blocking-category-tracking-protection, /* All detected trackers */
#identity-popup-content-blocking-category-3rdpartycookies { /* Third-party cookies */
 margin: 0.5em !important; /* More margin for Chrome likeness */
}

.identity-popup-content-blocking-category, .identity-popup-permission-item {
  padding-inline-start: 2.2em !important; /* Add padding to content blocking/permission items in order to make their icons visible */
}

.desktop-notification-icon {
  /* Demo: low-res notification icon */
  list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goOETsiyQEYIAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAADhSURBVCjPlZJNboJAGECf1A0XqSegS3uRxgtUV9p26x3Uhel1DDWCWwnQJS4d0JowC9LPjWCdGglvN/nem59kEIOiKOTt/UOGw5Forc2xWBh8LZfsdoo02+P5vjmmJSICkOc5k+mMMIyuhE7nkUH/Fdu2AahOuCUDhGHEZDqr1hZAHH/flP9GURxfgiRJqGObbC/BYX+oDUrHAji/+y6lY9GQ5oFSGQvXrRUXrotSGQ+/wjhN09pAa8167dPaBIE0uVL1NUpWnsd8/glAr/fCc7d7FbTNHZ4ch+PPEeCfDHACeoiOLJ50LOEAAAAASUVORK5CYII=') !important;
}

Edit 07.10: improved design
Edit 14.10: added demo icons
Edit 12.11: fixes for FX 64

Hello!

I am using Windows 10 and with MaterialFox enabled I get this bug when closing tabs. I created a short clip to demonstrate my issue:

https://www.youtube.com/watch?v=PHk0xofoUI4

Hello! I just noticed on macOS the close, maximize and minimize icons are not centered like in the screenshots. Bothers me a bit.

The tab bar has a blue tint while swiping with OSX between fullscreen apps.
On swipe finish, the tab bar flickers black then back to the theme.

Inactive Private Window showing top border in white color.

With your theme

Notice the close button element is still present, causing the tab text to fade prematurely.

With button removed

It should only be displayed on hover/select (or whatever matches the default behavior).

• In private mode, the dropdown doesn't work. Maybe a descriptive text or option (to use different colors or not) would be better?
• The listing home page and support site lead to non-existing location

On UserChrome.css, you have @import "personalbar/personalbar.css";
but the folder and the file are both named personaltoolbar

Thank you for this wonderful theme.

If you select the dark theme in Firefox, the urlbar and tabs still look "light" in normal browsing windows.

There should be a way to detect the current theme by lwthemetextcolor="bright" or "dark".

When the favicon is hidden to make way for the tab load throbber, the tab will jitter slightly due to the throbber having different margins compared to the favicon.

Might be best to tackle this with a Material redesign of the tab load behaviour, including the throbber and flash that occurs after loading has completed.

Thanks for the great theme, the screenshot looks amazing!

I'm having problems using it on Windows, below are the details.
Please let me know if there's anything I can help with to get this fixed, I don't know if this could be related to my machine only or something general for Windows users.

System Details

• Windows 10
• Tested on Firefox 61 and Firefox Developer Edition 63.0b1

Current visual behavior

Here's a screenshot:

Been having weird issues with the arrows in the toolbar sub-folders... I've doubled check all the mandatory and required settings. Luckily this is the only issue I am facing since day one using this.

This code is problematic for me because it removes useful functionality (e.g. Awesome RSS button).

Can you reconsider having them stay visible by default?

I noticed with the new release that the Lock to the left of the URL no longer changes colors based on the security. Is this intentional?

It'd be good to note in the ReadMe that Firefox should be running the Light theme in order to match the preview. Using the Default theme produces unexpected results. Using the Dark theme however, it still looks amazing.

I also want too say this is fantastic! Thank you.

This one is missing:

I'm not sure if this is intentionally or not.

https://imgur.com/a/eFglbkx

If you provide a preference - quoting the readme:

Replicate Chrome identity colours (or lack thereof):

• [about:config] Add new entry materialFox.disableIdentityColors with value true.
• Restart Firefox.

then please make the green locks/texts consistently gray or consistently green on all pages with HTTPS.

Pages with EV SSL are not more secure than those without, this has been proven many times by leading security experts, even Google knows that (so they have an experiment for hiding the text).

My personal opinion is that you should just keep it gray like Chrome and therefore remove the redundancy of a preference/green text code. (Hence my initial confusion at #24)

We no longer control the light and dark themes so we should instead show the default and private browsing themes in the preview.

Using the URL bar I noticed a glitch. It seems that there is something left with the default border-radius.

I did exacly all steps on the README, plus disabled Test Pilot and Vivaldi-Fox but the style havent changed.

This is the layout of my browser (locale is pt-br):

Thanks in advance!

Not sure if it makes sense to support Firefox Color, but I thought I'd raise the issue anyway; the issue being that some of the pre-selected themes don't play nice with this theme.

I think you should place the SVG and CSS files in their respective folders, except for userChrome.css of course. The files you add may increase and showing them all at once just clutters the chrome folder.

After installing the chrome folder and applying the about:config settings, the tab list down arrow to the right of the tab bar is missing. Is there a way to restore this function?

#

thanks for the theme :) ... let me know if you fix your account at buymeacoffe.com ([email protected])