NOTICE: Floorp Browser Progressive Web Apps

surapunoyousei commented 7 months ago

Is your feature request related to a problem?

Just a heads up. As you may know, I am currently adding a PWA implementation to Floorp. This requires some icons.

I am currently replacing the pre-Firefox Proton icons, but the design may not match and the Lepton look may be lost.

We have contacted you to see if a new icon is needed.

The solution I'd like

Consider create icons

Screenshots or video

Alternatives I've considered

No response

Additional context

No response

black7375 commented 7 months ago

IMO, You can refer fluent icon.

https://fluenticons.co/outlined

I've been working a full-time job and going to univercity lately, so I don't have time during the week. I'll check it out a bit more over the weekend.

surapunoyousei commented 7 months ago

I am a student like you, so I understand that you are busy.

Take your time and everything will be fine. I do not intend to release this feature any time soon, the main thing is to keep you informed.

zapSNH commented 7 months ago

I might be able to make some icons for it.

-- edit: see: https://www.figma.com/file/Iyym2tjRVlb7rxTR1Gmvr8/lepton?type=design&node-id=154%3A2&mode=design&t=a8V3q0FF83RF9L48-1

There are two variations of the icons, window and square. Let me know which one you like and if you have any feedback on these icons.

black7375 commented 7 months ago

IMO, Although the last one seems hard to recognize as an PWA Apps, I think these are fine for installing and deleting PWAs.

@surapunoyousei What do you think about @zapSNH icon?

Maybe it'll help PWAsForFirefox too. cc @filips123

surapunoyousei commented 7 months ago

I might be able to make some icons for it.

-- edit: see: https://www.figma.com/file/Iyym2tjRVlb7rxTR1Gmvr8/lepton?type=design&node-id=154%3A2&mode=design&t=a8V3q0FF83RF9L48-1

There are two variations of the icons, window and square. Let me know which one you like and if you have any feedback on these icons.

IMO, These icons, users may misread to be "window" icons. All currently icons are difficult to recognize.

Good one is Microsoft Edge's icon (Fluent). Maybe it needs 4 squares in icons

zapSNH commented 7 months ago

IMO, These icons seem to be "window" icons. All currently icons are difficult to recognize.

There's also a square version on the right.

Good one is Microsoft Edge's icon (Fluent). Maybe it needs 4 squares in icons

The 4 square icon kinda looks too similar to the container icon and it may confuse people. I can whip up a 4 square version though if you want. (right after i eat my lunch)

surapunoyousei commented 7 months ago

IMO, These icons seem to be "window" icons. All currently icons are difficult to recognize.

There's also a square version on the right.

Good one is Microsoft Edge's icon (Fluent). Maybe it needs 4 squares in icons

The 4 square icon kinda looks too similar to the container icon and it may confuse people. I can whip up a 4 square version though if you want. (right after i eat my lunch)

OK. I agree with you. I forget about that.

Looks like we'll have no choice but to compromise...

black7375 commented 7 months ago

It certainly looks so similar.

https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/

Fortunately, I have a couple of alternatives.

Icons

Cube

Grid

You have the option to make it a dot or a rectangle.

Variants

I estimate that we'll need four icons.

PWA Apps (Panel item or toolbar button)
PWA Apps install (URL bar before installed)
PWA Apps launch (URL bar after installed)
PWA Apps delete (At popup)

Deform the model itself

Mode in the lower right corner

Combination of one icon and another

In Chrome, only the Apps icon is grid, and install utilize the existing icon.

You might also want to consider the Install button in PWAsForFirefox.

zapSNH commented 7 months ago

I've made something similar to Chrome's (and the PWAsForFirefox's) icon.

launch

What do you think about it?

surapunoyousei commented 7 months ago

In conclusion, the first icon you presented seemed to be a good choice.

https://github.com/black7375/Firefox-UI-Fix/issues/819#issuecomment-1816440851

zapSNH commented 7 months ago

In conclusion, the first icon you presented seemed to be a good choice.

What version? Window or square?

surapunoyousei commented 7 months ago

In conclusion, the first icon you presented seemed to be a good choice.

Square are better

zapSNH commented 7 months ago

I've added the square icons zapSNH/lepton-icons but I can change it if @black7375 wants a different icon.

black7375 commented 7 months ago

Wow, Launch icon is beautiful!!

Currently, the app icon looks like a single app, so it's better to make it look like you have multiple apps. My idea is to place the dots inside a regular desktop icon with a border.

It's probably consistent with mobile as well.

https://acorn.firefox.com/latest/styles/iconography-q7JqGl5H

zapSNH commented 7 months ago

How about this for the app icon (I assume you mean the pwa-manage icon)

black7375 commented 7 months ago

Nice :+1: I like it.

zapSNH commented 7 months ago

I've pushed the svgo'd icons to zapSNH/lepton-icons so you can get them there.

black7375 commented 7 months ago

As soon as the CSS selector names in Floorp are stable, I'll add the icons. @surapunoyousei

surapunoyousei commented 7 months ago

Ok. I'll send infomation here.

surapunoyousei commented 7 months ago

The most of implementation of PWA has been completed and additional features may appear in the future, but we will report them once they are in place.

Please follow below CSS id & attribute.

"open-ssb" means, Not install page. The button will open installed PWA window(ssb window)


/* Panel UI top button */
#appMenu-ssb-button {
  list-style-image: url("chrome://browser/skin/install-ssb.svg");
}

/* Panel UI subView button  for install ssb*/
#appMenu-install-or-open-ssb-current-page-button {
  list-style-image: url("chrome://browser/skin/install-ssb.svg");
}

/* Panel UI subView button  for open ssb window*/
#appMenu-install-or-open-ssb-current-page-button[open-ssb="true"] {
  list-style-image: url("chrome://browser/skin/install-ssb.svg");
}

/* Page Action button. Not always visible */
#ssbPageAction-image {
  list-style-image: url("chrome://browser/skin/install-ssb.svg");
}

/* Page Action button. If page has been already installed or can be install PWA */
#ssbPageAction-image[open-ssb="true"] {
  list-style-image: url("chrome://browser/skin/install-ssb.svg");
}

black7375 commented 7 months ago

I made a commit, check it out

surapunoyousei commented 7 months ago

Add a separate icon by @zapSNH .

I thought these would be included in Lepton but, I guess These not include it in Lepton.

I will create pull request

black7375 commented 6 months ago

I think we can close this issue now!!

surapunoyousei commented 6 months ago

Oh... I forgot it... My apologize.

black7375 / Firefox-UI-Fix