[Suggestion] Remove close button and bottom edge for selected pinned tabs #10

zhuopeng-tan · 2021-05-25T04:37:56Z

Thanks for your work, it looks better than official UI.

As the image shows, it's weird to show just a close button for selected pinned tabs, it's better to remove it.

And I suggest to removing the bottom edge for selected pinned tabs to be consistent with unpinned tabs.

black7375 · 2021-05-25T05:51:26Z

Closed button is the intended design.

Inspired from chromium.

Maybe just erase the next part.

Firefox-UI-Fix/userChrome.css

Lines 369 to 413 in 28caaad

    
           /** Pinned Tab - Replace Favicon to Close Button at Selected ****************/ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { 
        
             display: -moz-box !important; 
        
             -moz-box-ordinal-group: 0 !important; 
        
             transform: translateX(-1px); 
        
             /* Looks like hover */ 
        
             width: 24px !important; 
        
             height: 24px !important; 
        
             padding: 7px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { 
        
             display: none !important; 
        
           } 
        
           /* Left Padding - Assume the icon size is 17px */ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { 
        
             padding-inline: 7.5px !important; /* Original: 10px */ 
        
           } 
        
           /* Right Padding - Assume the icon size is 17px */ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { 
        
             width: 8.5px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { 
        
             padding-inline-end: 0px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content { 
        
             padding-inline-end: 9.5px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][busy] .tab-content { 
        
             padding-inline: 10.5px !important; 
        
           } 
        
           /* Sound Tab - Don't move overlay */ 
        
           .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { 
        
             transform: translateX(.5px) translateY(-2px) !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay { 
        
             transform: translateX(-9px) translateY(-2px) !important; 
        
             left: 0 !important; 
        
           }

Bottom shadow line is a bug and can be reproduced in case of tab overflow.
I'll fix it as soon as possible.

zhuopeng-tan · 2021-05-25T05:57:31Z

Yeah, close button removed, it would be perfect if the bottom edge (the line between tab bar and tool bar) could be removed too.

Actually we can close pinned tab by middle click without close button.

black7375 · 2021-05-25T06:14:39Z

Fixed it now, test please

zhuopeng-tan · 2021-05-25T07:01:11Z

Perfect! Thanks!

How about creating a separate branch for the change(Hide close button for selected pinned tabs)?

Firefox-UI-Fix/userChrome.css

Lines 369 to 413 in 28caaad

    
           /** Pinned Tab - Replace Favicon to Close Button at Selected ****************/ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { 
        
             display: -moz-box !important; 
        
             -moz-box-ordinal-group: 0 !important; 
        
             transform: translateX(-1px); 
        
             /* Looks like hover */ 
        
             width: 24px !important; 
        
             height: 24px !important; 
        
             padding: 7px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { 
        
             display: none !important; 
        
           } 
        
           /* Left Padding - Assume the icon size is 17px */ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { 
        
             padding-inline: 7.5px !important; /* Original: 10px */ 
        
           } 
        
           /* Right Padding - Assume the icon size is 17px */ 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { 
        
             width: 8.5px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content { 
        
             padding-inline-end: 0px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content { 
        
             padding-inline-end: 9.5px !important; 
        
           } 
        
           .tabbrowser-tab[pinned][busy] .tab-content { 
        
             padding-inline: 10.5px !important; 
        
           } 
        
           /* Sound Tab - Don't move overlay */ 
        
           .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) { 
        
             transform: translateX(.5px) translateY(-2px) !important; 
        
           } 
        
           .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay { 
        
             transform: translateX(-9px) translateY(-2px) !important; 
        
             left: 0 !important; 
        
           }

black7375 · 2021-05-25T07:20:05Z

I created it because it is a function that can split like and dislike.
https://github.com/black7375/Firefox-UI-Fix/tree/hide-closebutton-at-pinned

I'll merge regularly and I will try and ensure maximum compatibility, but support may be less compared to the base version.

Guessing, are you trying to sync with git pull?

zhuopeng-tan · 2021-05-25T07:31:06Z

I created it because it is a function that can split like and dislike.
https://github.com/black7375/Firefox-UI-Fix/tree/hide-closebutton-at-pinned

I'll merge regularly and I will try and ensure maximum compatibility, but support may be less compared to the base version.

Guessing, are you trying to sync with git pull?

At the present, I just copy the content, the reason that I suggest creating a separate branch is that maybe one day I need to setup a new machine, and for other users who also need this change.

It's a small change, so merge future updates shouldn't take much effort.

Again, thanks for you work.

black7375 · 2021-05-25T07:45:07Z

Thanks for the answer

zhuopeng-tan · 2021-05-28T10:31:42Z

@black7375
I just checked the latest version Chrome, it does not show close button for pinned tabs, so can we rebase/merge branch hide-closebutton-at-pinned to master?

Closed button is the intended design.

Inspired from chromium.

Maybe just erase the next part.

Firefox-UI-Fix/userChrome.css

Lines 369 to 413 in 28caaad

/** Pinned Tab - Replace Favicon to Close Button at Selected ****************/

.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {

display: -moz-box !important;

-moz-box-ordinal-group: 0 !important;

transform: translateX(-1px);

/* Looks like hover */

width: 24px !important;

height: 24px !important;

padding: 7px !important;

}

.tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {

display: none !important;

}

/* Left Padding - Assume the icon size is 17px */

.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content {

padding-inline: 7.5px !important; /* Original: 10px */

}

/* Right Padding - Assume the icon size is 17px */

.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {

width: 8.5px !important;

}

.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content {

padding-inline-end: 0px !important;

}

.tabbrowser-tab[pinned][visuallyselected][busy] .tab-content {

padding-inline-end: 9.5px !important;

}

.tabbrowser-tab[pinned][busy] .tab-content {

padding-inline: 10.5px !important;

}

/* Sound Tab - Don't move overlay */

.tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {

transform: translateX(.5px) translateY(-2px) !important;

}

.tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay {

transform: translateX(-9px) translateY(-2px) !important;

left: 0 !important;

}

Bottom shadow line is a bug and can be reproduced in case of tab overflow.
I'll fix it as soon as possible.

black7375 · 2021-05-28T12:16:15Z

There is no plan yet, but if many people feel uncomfortable a lot later, we will reflect it.

Stepan-H · 2021-06-02T09:05:52Z

I feel wery uncomfortable and I unintentionally close a tab by missclick (unintentionally doubleclick)...

zhuopeng-tan · 2021-06-02T09:29:40Z

@black7375 @Stepan-H The behaviors Hide close button for **pinned** tabs and Close pinned tabs by middle click or right click + menu are same to Chrome, Chrome does not keep close button for pinned tabs, pinned tabs are expected to be accessed frequently, so users would keep them for long time

For regular tabs, showing close button makes sense.

Closed button is the intended design.
Inspired from chromium.

black7375 · 2021-06-02T10:11:23Z

Yes. I will seriously consider it when I work on it tomorrow.

black7375 · 2021-06-02T12:30:41Z

This will be discussed again after 1.0. #31

ghost · 2021-06-02T13:39:45Z

Yeah man the close button is mostly useful but could be insanely annoying when I drop the mouse and close some tabs.
How about using JS to add toggling of it?

black7375 · 2021-06-02T13:44:36Z

All features using JS should be introduced after the installer is created.
It requires too many settings from users.

ghost · 2021-06-02T13:59:37Z

Ok. I'm working on the installer script. I'll implement the backup and redirection later.
I agree on your statement that it requires too may settings from users.
This project shouldn't be bloated by any means.

black7375 · 2021-06-02T14:01:01Z

@7k5x check #32
Seems like a good example.

ghost · 2021-06-02T14:06:01Z

Crazy big script, but I think that's really good. Maybe someone should implement that on chrome too.
Google, are you listening?

ghost · 2021-06-02T14:13:44Z

@black7375 IMO putting options in install.sh should be minimized or be removed. Most people want things to just work. I'll review replacing the options with prompting the user input from the console.
i.e. install.sh prompts Will you include Firefox selection fix?(Y/n):

black7375 · 2021-06-02T15:50:15Z

First of all, changes to default options should be minimized.
It would be nice to control it by adding parameters.

cubetastic33 · 2021-06-04T02:54:51Z

I agree, showing the close button on pinned tabs seems counter-intuitive and gets in the way. Pinned tabs are likely to be open for long and it looks ugly to see just a close icon whenever the tab is active.

black7375 · 2021-06-09T02:52:55Z

1.0 has been released.
Now, closed button on tab will be removed.

…ed' #10" This reverts commit 8fefe8a, reversing changes made to e30cf6f.

mikesafari · 2021-06-09T16:48:54Z

1.0 has been released.
Now, closed button on tab will be removed.

It looks like this is still an issue in Photon-Style.

black7375 · 2021-06-10T01:19:46Z

reflected for photon-stlye.

zhuopeng-tan changed the title ~~[Suggestion] Do not show close button and bottom edge for pinned tabs~~ [Suggestion] Do not show close button and bottom edge for selected pinned tabs May 25, 2021

zhuopeng-tan changed the title ~~[Suggestion] Do not show close button and bottom edge for selected pinned tabs~~ [Suggestion] Remove close button and bottom edge for *selected* pinned tabs May 25, 2021

zhuopeng-tan changed the title ~~[Suggestion] Remove close button and bottom edge for *selected* pinned tabs~~ [Suggestion] Remove close button and bottom edge for selected pinned tabs May 25, 2021

black7375 added the Issue::Bug Something isn't working label May 25, 2021

black7375 added a commit that referenced this issue May 25, 2021

Fix: Selected Tab - pinned when tabbrowser overflowing #10

00b7d9f

black7375 added Issue::Question Further information is requested Issue::Wontfix This will not be worked on and removed Issue::Question Further information is requested labels May 25, 2021

black7375 added a commit that referenced this issue May 25, 2021

Add: Remove Closebutton at selected #10

2f3d1f6

black7375 closed this as completed May 25, 2021

black7375 added the Component::Tabbar Tab or tabbar label May 27, 2021

black7375 reopened this Jun 2, 2021

This was referenced Jun 3, 2021

Active pinned tabs are wider than inactive ones #38

Closed

Close button hides favicon in active pinned tab #46

Closed

Pinned tabs become "x to close" when active #55

Closed

Active pinned tab not displaying the favicon #52

Closed

black7375 mentioned this issue Jun 4, 2021

Pinned tab favicon showing #58

Closed

black7375 added a commit that referenced this issue Jun 9, 2021

Merge remote-tracking branch 'origin/hide-closebutton-at-pinned' #10

8fefe8a

black7375 added a commit that referenced this issue Jun 9, 2021

Revert "Merge remote-tracking branch 'origin/hide-closebutton-at-pinn…

942047a

…ed' #10" This reverts commit 8fefe8a, reversing changes made to e30cf6f.

black7375 closed this as completed Jun 9, 2021

black7375 removed the Issue::Wontfix This will not be worked on label Jun 9, 2021

black7375 added a commit that referenced this issue Jun 9, 2021

Doc: Pinned - combinded Close Button is removed #10

9d6940c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Suggestion] Remove close button and bottom edge for selected pinned tabs #10

[Suggestion] Remove close button and bottom edge for selected pinned tabs #10

zhuopeng-tan commented May 25, 2021 •

edited

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 28, 2021

black7375 commented May 28, 2021

Stepan-H commented Jun 2, 2021

zhuopeng-tan commented Jun 2, 2021 •

edited

black7375 commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

ghost commented Jun 2, 2021 •

edited by ghost

black7375 commented Jun 2, 2021

cubetastic33 commented Jun 4, 2021

black7375 commented Jun 9, 2021

mikesafari commented Jun 9, 2021

black7375 commented Jun 10, 2021

[Suggestion] Remove close button and bottom edge for selected pinned tabs #10

[Suggestion] Remove close button and bottom edge for selected pinned tabs #10

Comments

zhuopeng-tan commented May 25, 2021 • edited

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 25, 2021

black7375 commented May 25, 2021

zhuopeng-tan commented May 28, 2021

black7375 commented May 28, 2021

Stepan-H commented Jun 2, 2021

zhuopeng-tan commented Jun 2, 2021 • edited

black7375 commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

black7375 commented Jun 2, 2021

ghost commented Jun 2, 2021

ghost commented Jun 2, 2021 • edited by ghost

black7375 commented Jun 2, 2021

cubetastic33 commented Jun 4, 2021

black7375 commented Jun 9, 2021

mikesafari commented Jun 9, 2021

black7375 commented Jun 10, 2021

zhuopeng-tan commented May 25, 2021 •

edited

zhuopeng-tan commented Jun 2, 2021 •

edited

ghost commented Jun 2, 2021 •

edited by ghost