NOTICE: Floorp Browser Progressive Web Apps #819

surapunoyousei · 2023-11-14T12:50:33Z

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 · 2023-11-14T13:05:02Z

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 · 2023-11-14T13:44:50Z

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 · 2023-11-17T13:33:27Z

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 · 2023-11-19T03:14:19Z

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 · 2023-11-19T03:18:52Z

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 · 2023-11-19T03:25:26Z

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 · 2023-11-19T03:29:37Z

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 · 2023-11-19T04:14:02Z

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 · 2023-11-19T04:51:14Z

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

What do you think about it?

surapunoyousei · 2023-11-19T05:14:43Z

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

#819 (comment)

zapSNH · 2023-11-19T05:16:35Z

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

What version? Window or square?

surapunoyousei · 2023-11-19T05:17:43Z

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

Square are better

zapSNH · 2023-11-19T05:32:30Z

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

black7375 · 2023-11-19T08:04:54Z

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 · 2023-11-19T08:22:30Z

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

black7375 · 2023-11-19T08:24:02Z

Nice 👍 I like it.

zapSNH · 2023-11-19T08:32:46Z

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

black7375 · 2023-11-19T08:35:48Z

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

surapunoyousei · 2023-11-19T08:38:52Z

Ok. I'll send infomation here.

surapunoyousei · 2023-11-29T14:07:24Z

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");
}

Co-authored-by: Ryosuke Asano <[email protected]>

black7375 · 2023-12-02T05:36:22Z

I made a commit, check it out

surapunoyousei · 2023-12-06T14:06:14Z

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 · 2023-12-21T15:32:18Z

I think we can close this issue now!!

surapunoyousei · 2023-12-22T06:32:02Z

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

surapunoyousei added the Issue::Enhancement New feature or request label Nov 14, 2023

surapunoyousei changed the title ~~NOTICE:~~ NOTICE: Floorp Browser Progressive Web Apps Nov 14, 2023

black7375 added a commit that referenced this issue Dec 2, 2023

Add: Icons - Floorp browser progressive web apps #819

08079e8

Co-authored-by: Ryosuke Asano <[email protected]>

black7375 added Class::Icon Icon for panels, menus, libraries Browser::Fork Changes or bugs from Fork browsers labels Dec 7, 2023

black7375 closed this as completed Dec 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NOTICE: Floorp Browser Progressive Web Apps #819

NOTICE: Floorp Browser Progressive Web Apps #819

surapunoyousei commented Nov 14, 2023

black7375 commented Nov 14, 2023

surapunoyousei commented Nov 14, 2023

zapSNH commented Nov 17, 2023 •

edited

Loading

black7375 commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023 •

edited

Loading

surapunoyousei commented Nov 19, 2023

black7375 commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023 •

edited

Loading

surapunoyousei commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023

surapunoyousei commented Nov 29, 2023 •

edited

Loading

black7375 commented Dec 2, 2023

surapunoyousei commented Dec 6, 2023 •

edited

Loading

black7375 commented Dec 21, 2023

surapunoyousei commented Dec 22, 2023

NOTICE: Floorp Browser Progressive Web Apps #819

NOTICE: Floorp Browser Progressive Web Apps #819

Comments

surapunoyousei commented Nov 14, 2023

Is your feature request related to a problem?

The solution I'd like

Screenshots or video

Alternatives I've considered

Additional context

black7375 commented Nov 14, 2023

surapunoyousei commented Nov 14, 2023

zapSNH commented Nov 17, 2023 • edited Loading

black7375 commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023 • edited Loading

zapSNH commented Nov 19, 2023 • edited Loading

surapunoyousei commented Nov 19, 2023

black7375 commented Nov 19, 2023 • edited Loading

Icons

Cube

Grid

Variants

Deform the model itself

Mode in the lower right corner

Combination of one icon and another

zapSNH commented Nov 19, 2023 • edited Loading

surapunoyousei commented Nov 19, 2023 • edited Loading

zapSNH commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023 • edited Loading

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023

zapSNH commented Nov 19, 2023

black7375 commented Nov 19, 2023

surapunoyousei commented Nov 19, 2023

surapunoyousei commented Nov 29, 2023 • edited Loading

black7375 commented Dec 2, 2023

surapunoyousei commented Dec 6, 2023 • edited Loading

black7375 commented Dec 21, 2023

surapunoyousei commented Dec 22, 2023

zapSNH commented Nov 17, 2023 •

edited

Loading

surapunoyousei commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023 •

edited

Loading

black7375 commented Nov 19, 2023 •

edited

Loading

zapSNH commented Nov 19, 2023 •

edited

Loading

surapunoyousei commented Nov 19, 2023 •

edited

Loading

black7375 commented Nov 19, 2023 •

edited

Loading

surapunoyousei commented Nov 29, 2023 •

edited

Loading

surapunoyousei commented Dec 6, 2023 •

edited

Loading