search

black7375 / Firefox-UI-Fix

🦊 I respect proton UI and aim to improve it.
Mozilla Public License 2.0
5.42k stars 190 forks source link

Image next to firefox sync information seems to be broken #14

Closed Jhyub closed 3 years ago

Jhyub commented 3 years ago

Describe the bug Image next to firefox sync information in the hamburger menu seems to be broken when firefox sync is active. Happens on both lepton and photon, didn't test other branches yet

Expected behavior The mozilla account avatar displayed

Screenshots Before (Clean environment) After photon
original photon-style

Environment (please complete the following information):

black7375 commented 3 years ago

Need more information.

Please let us know the results after doing the following:

  1. Run Browser Tool Box

https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/

Pre-setup

  • Press Ctrl + Shift + I on Win/Linux or Cmd + Opt + I on Mac
  • Click on the cog that appears in a right or left top corner, next to other buttons.
  • Scroll down to Advanced Settings and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
  • Close the developer tools panel and proceed with next tutorial

Testing a style

  • Press Ctrl + Alt + Shift + I on Win/Linux or Cmd + Opt + Shift + I on Mac
  • A permission dialog will prompt you to allow remote debug, accept
  1. Search --avatar-image-url Browser Tool Box

Does the displayed image URL appear accessible and normal?

Jhyub commented 3 years ago

image Points to the correct image. https://firefoxusercontent.com/e54247b41abfc3f7c45bbae261adebc4

black7375 commented 3 years ago

Ok, It's reproducible. I'll fix it.

black7375 commented 3 years ago

Now it works fine on my computer. Try it.

Jhyub commented 3 years ago

works great, thanks!

black7375 commented 3 years ago

yeah. nice report

Bad3r commented 3 years ago

Is it possible to make the image circular?

black7375 commented 3 years ago

@Bad3r Maybe it's possible with border-radious. Since the image shown in the Account Panel is circular, I think it is better to match it.

I'll work on it tomorrow.

Bad3r commented 3 years ago

@Bad3r

Maybe it's possible with border-radious.

Since the image shown in the Account Panel is circular, I think it is better to match it.

I'll work on it tomorrow.

Thanks! That would be great. I think it would look much better than the square image

ghost commented 3 years ago

Is it possible to implement toggling of icons such as icons on/off?

black7375 commented 3 years ago

@7k5x

Is it possible to implement toggling of icons such as icons on/off?

Adding dynamic features is not possible with CSS.

It is possible using JS, but it is difficult to set up, so we have not yet officially considered introducing it. Developers will have no problems, but regular users may experience difficulties.

black7375 commented 3 years ago

@Bad3r

I like it. good. account circle

Bad3r commented 3 years ago

Looks great! going to test it

Qwerty-Space commented 3 years ago

I'm having a similar issue. The avatar image and plenty of other icons aren't showing up. I'm running the photon-like-panel branch on Linux.

image image

https://firefoxusercontent.com/c43aaa6bbd2fa494c8a5cb5fa921f5aa

black7375 commented 3 years ago

I checked. It should be fixed by the end of the week.

black7375 commented 3 years ago

@Qwerty-Space Would you like to try it?

Qwerty-Space commented 3 years ago

@Qwerty-Space Would you like to try it?

Sure, but are those changes for the photon-like-panel branch? I don't need all of the other changes because I don't have a tab bar

black7375 commented 3 years ago

Yes, original do not need to be set because they have all icons. In my tested, the spacing of align in the subpanel should be hardcoded to 8px.

Qwerty-Space commented 3 years ago

@black7375 it doesn't look like you've pushed the changes to this branch image

black7375 commented 3 years ago

Ah...I updated directly to photon-style. I will cherry-pick.

black7375 commented 3 years ago

apply now

black7375 commented 3 years ago

FYI, the panel width has increased width to truncation issues in some languages. #40

Qwerty-Space commented 3 years ago

apply now

Still having the same issues

black7375 commented 3 years ago

Are you run Click the Clear startup cache... at about:support? I checked that it was reproduced on Windows and Linux and disappeared after the test.

Qwerty-Space commented 3 years ago

Are you run Click the Clear startup cache... at about:support?

Tried that. Still didn't work.

black7375 commented 3 years ago

That's weird. Have you been updated to the latest commit? On my computers, the bug is gone and is no longer reproducible.

Qwerty-Space commented 3 years ago

That's weird. Have you been updated to the latest commit? On my computers, the bug is gone and is no longer reproducible.

Yup

Qwerty-Space commented 3 years ago

I've got it working differently now. I cloned the master branch and added this to my userChrome.css

/* Reduce padding, and re-arrange content in the hamburger menu */
@import "Firefox-UI-Fix/userChrome.css";

image

black7375 commented 3 years ago

master has all the icons so the behavior is different. Use photon-style if you hate all icons.

black7375 commented 3 years ago

A related issue already exists and should be discussed here. #41