Why the design for the tab "close" button was changed?

[badnick]

I think the design for the tab close button for both active and non-active tabs was a good inovation, why has been changed on the latest unstable?

[therube]

In what way are they different?

Screenshot.

[Tomaso]

There was an issue with the close icons under Win8.x, which were fixed recently:
https://github.com/MoonchildProductions/UXP/issues/317/
I can confirm that this fix works, and that the close icons for v28 beta now looks identical to the ones found in v27 stable.
However, since the icons now looks different to you, I'm guessing that the fix might have had a unpredictable side-effect under other Windows versions.
How about posting a screenshot?

[Moonchild]

Not unpredictable, just "different". "Different" is enough to spark complaints these days.

[badnick]

In what way are they different?

Screenshot.

On the previous unstable version the tab""close" button was a greyed circle instead of the classic red square (this for the active tab) and for the backgound tabs was an undefined shape-something like a sail, also darker greyed-and on mouse hovering he turns in to the grey circle like for the active tab.

Now PM unstable with the latest update looks like that, I mean classic:

[Tomaso]

Oh, so you actually want those grey ones, which were imported from the nasty Australis interface?
The ones shown in your screenshot looks good to me.
No need to change anything, IMO.

[adesh]

Well, actually looking at the screenshot, I can say that I don't like the "close" button either. It is too prominent and screaming red. But then, I don't know how Windows (10) people like their interfaces.

[Lootyhoof]

On the previous unstable version the tab""close" button was a greyed circle instead of the classic red square (this for the active tab) and for the backgound tabs was an undefined shape-something like a sail, also darker greyed-and on mouse hovering he turns in to the grey circle like for the active tab.

No...that was definitely a bug. The default theme wasn't accounting for the larger icons that Basilisk was using in Win8/10, for which it was sharing the styling for. With this change Pale Moon now uses its own close icons, as originally intended.

If you want to see how those Win8/10 close icons were meant to be shown, try this style in either userChrome.css or Stylem:

Code: Select all

.close-icon {
  list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAQAAAB7CpaiAAACA0lEQVR4AZ3WhW7cUBAF0FaWnG8qc4VhjiOWbvsZU2GYxWWm7ym3YRaUuZ2M3mosvxmvV87ewI00yjE++0j9D6U0QA9pmX7RF3oprZ/SsjmkGMBDLOMXvuCltH6YuXpsN70lNnlLPY7txluwyVv0HA5NaFwxl3FKcjTBuGIu40jqw5Y1dA5b1tAtofajEdtnKZe+wPY1I69o64uZnfbj0d+n2/fbk8Iltd7491/5RsTd4m98rdE3KEWKdTAkn3g8Yif5C19t9A2kRehy+3b7iYg9W9jfTKF7/EXoInubSTOKTKE5pXN2iqEZjff5kuz1CcMq/IxYc1f32rCS53gG1swqbVjJc3tWLwp9MrBnzIW1QhzTNwN7i6mYFayAY3rCsZIVf0FdENqxAv+kiLgjtGUlv/ATETEjtGUlvzx8Rtjd9lMO/kzukpK99vDnmJgS9jNPetiz8n3e0/TasPJ9x9MreG1Y+Z7x9EoJG9rZ9r2YpmeGDe22tJvm4rJsaJZ+Xsrm9OkCnHlW6VvmdrKspc3tJOxps4DshmIWEIHM2f6qfYPa8gVE2EmzgHzWvoG2Oit1P3GL9Iclsx/cImGuDj1RyU7oHCYq2YnDPBYXm7JL0WNxsSm7BJ2rifeWvgj02Tn0lr4I2LladEoZPadl+i1ZlpY1ffXJ8BzL+C1ZlpahMHcALb/sKY083YMAAAAASUVORK5CYII=) !important;
  -moz-image-region: rect(0, 20px, 20px, 0) !important;
}

.close-icon:hover {
  -moz-image-region: rect(0, 40px, 20px, 20px) !important;
}

.close-icon:hover:active {
  -moz-image-region: rect(0, 60px, 20px, 40px) !important;
}

.close-icon > .button-icon,
.close-icon > .button-box > .button-icon,
.close-icon > .toolbarbutton-icon {
  width: 20px !important;
}

@media (min-resolution: 1.1dppx) {
  .close-icon {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAQAAACf4/auAAAET0lEQVR4Ac3aN4zrOBAG4IMv5yDvRWP7vtHre5Ybe0x5OVjddBtbQ76+fTn13ctxU/WS49051M9u5gYinGQPRYtr7du/EUiA0LcckJDJt7L7wxz6WMTz+BQ7+JrT4afz3OJjLs14kAMfinAenkIHXnM6/HSeW3yQx8sMW8AtrCAJqXBvYS5sAbagAiSkwr2Fs8N6WMIeUkJ6WELPCutBCXpACelBCbyz4K5iC8kyLVxL5K5CC8gyLVjLFvsOhkhzJsR3ROw7EALNmRDeyYr7EV5DSpFr+NFM7kdwDShFrsFH2czuFaSUuYLvzJjdK0ApcyWDWcYykkPKU+AykEPKi+auITlmY4K7BuSYDcPrKlIP1VcmkPpWnSgybEQtZ3AHl8Y2opYzuANLMufETNZc9VAEx9ZmoibtGHn71CISyzq+NhNV6Bcj73dqEtmXNYOOGfRgNll9E/U+VJ7AXcb+5Ku3NDmB24y393E54i5Df/LVm5qcwK3E2/uwLJIZpclfTvV8rY5ErgZvzQY1BPKe/A/ZisBb06AGEb0SyNwr/UN4PBP5SJNncr8yfCJUJVSDtmf0/CfPfxVzkIMqkET+earnN5lLPFJuLrJaUoeDUhfBPhJHgDHZlqvjgw/Ekcm2XB3fAB7O530ma+5BEpfBAZIteVe3iFxOEQIgSzJz63Kp6xSN4Ih8qMnMfTKYbyP4PJIVmbn/JnA55+E8kBQ9ny+ZbMflnE8AD8v4vh2XwQdIFmTm/jPAm3IAB0ByGKnJ/FQdzLcpB4ngQSkPSjsR3DYCBmVsxeW0oQ1kQ7bhcto2YE89isD31BcW4F4CQZeyFZfTgx6QDXlQ2gnp2XAf6pLWZHfwDjWjF6yfEvgXqpweWH0VcRnKhf04evrcraQ1V5d03bmkNXdQ0i9dS5rX5gejebUj40ESV0N3SZO3nBYtzdWLlib/lH7R4lm9P1nGKi+TLbYlZjZG8yqTbbclZr4azasd+byZG8cxOVrA7spkDOy4luQiBDL3ZayMf00mFyXu50ydCVOemYznRG4Mp8lNM9mHc0ZuDPdrVOIvZLIvce8y6g6j5HWbe+0/HraoLsB2ZLL88cCglwLsF5ksfzyo2wIoRrb9PNTcmkYJZO61/jz8iUECykzekkCaa96uHigSwIX4XlwTQDHy9FlEIQIX4nvxcwkUI8f34IUdv2Bp8tXNXE1uEMVbw8F4UJp8dTNXk18RxVvDRZ4mtZEc00ZvCPagDeSY9kJPmnDdGbw5Ph6sO4M33+wf4v8+5R/iebxFg99zOmp5bwr8ntNRy3vZHKbdTMW9Lh6m3UzFvQ56vAzI76Yo7DK+K40H76Yo7DIMxssIvT7XgfhG0niwPteB+GC8TMl5DK2uPISYtxkP8hBaXXkIIX+Wl1q2sSZia7g996WWbaiJ2Br3yuNlem0piK4tdbHP6UbXlgKna0tBdG2pC31Ol5/OQ2C+tvQ/Fo12psZ5aE0AAAAASUVORK5CYII=) !important;
    -moz-image-region: rect(0, 40px, 40px, 0) !important;
  }

  .close-icon:hover {
    -moz-image-region: rect(0, 80px, 40px, 40px) !important;
  }

  .close-icon:hover:active {
    -moz-image-region: rect(0, 120px, 40px, 80px) !important;
  }
}

@media not all and (min-resolution: 1.1dppx) {
  .tab-close-button:-moz-lwtheme-brighttext {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAQAAAB7CpaiAAACHUlEQVR4AZ3Wg5IjURTG8Tt+kME7jM3SWsEjTHmeYDlGXmFtFhZnbTNYG6W199uTG/Xp0x39o4uq/NKxKT3UYgW24Al+4jMe8Gg5ao1HVEP9tI4O0AU6Tbt41Ec1pvywGAm4S2CJYrtpL111nfZST3loFTbBr02oyqKVNOrg5GmUKkuGJavpLCxYTReGKsRsGXz6lxkss2yvH3kiM+qVzFu0iHkHPqDK8ZZ6AVsIDwR7FwH8he0laqmGjqTuvunXQtTJzkYbfh+7ZsdHxNsMA3iDVsF2OXYDGeg6wrgv2NvIFqThDDQeb/o1H3Wy07HMjEbkMffjLdOa5bAT2W4gZGnFArtoU+4YJyytWT6NGxn6mG6zbKcR4Skc3WT6nmXvQPSUDtJVSc9Fk+yMg+XTQeMOvXirWA4/ABetWeAnnZdvqMlY0y/J2tMFDXcy+w7tav0TRHeYDeKuhk9LYibW8Lvp92xUw5rtRI+mEXOzd3BL009pj5udiU3FFH3Qg7WjLryXNHa62WS3La3eXIJNjqZjjZIe92SzdIf4OClW0OLjJFlJq48Tsx2uL5B3xugvkIA8RtxlOt1L1OW+QBoYkl8gTb/T4yNUa4oPy1Go5Yajvizmd+ozpYVx5Gu8hB+Jkn8WF+BXRPwsjvmyY1RpyglLPf8ILDOuqMfzj0CvKT/UIoBdeIJffHrCo4DvX59hGqcDdJFPB3g07PxN+g/VnrncsGxjLgAAAABJRU5ErkJggg==) !important;
  }
  
  .tab-close-button:not([selected]) {
    -moz-image-region: rect(0 20px 20px 0);
  }
}

@media (min-resolution: 1.1dppx) {
  .tab-close-button:-moz-lwtheme-brighttext {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAQAAACf4/auAAAEfklEQVR4Ac3axX4bVxTH8fmYyjVD8QXKqDxAGZbFVbwLMykPUGaS+wQlsx1vAmcVNkOzDqzCzMmvU53SjHx0rzTxuP8TcMTf3KOhe4P0QgUZNtHJJCe4HNYJJulkExkqgjIiFfKoLJRP5GfZIbvC2hH+9El4y6NSEcx3eJAPOYSVQ3zIgyVhW2SZbJFho7aE97bMH7aR77mCK1f4nkYvbK1slN0y7Kjd4aNq54P7NsfwzTHecXJflG1K8qht8lK62CpylJocVSa2UrI2z6isVKbFvZMByskAd87KvV2+VESJ9aXcns7o9lFu+qiaZXS/cMDs+iKFUaaDJOkoAG+W4QS1ea6575A070W4LyXAar0c2AFGaSgKauMA2DsijpE0J2j+z45oW2LwDqm3OQeKk5XLqHl/jkjeZCVnKZaTLOZNs63j2+b7ee5C33gxXufEE5fux6+tFfQ7MDI7mdb8vaPWYQIPc5VIFjvIyl1JLFd5OM9tkz3Rjx5iTLJy9RGx2/dIm01W1AgFbUALMxZXw4eFoCW8ySqDfIol1n/Ih3nwskLQk0XIXX/d21t477JAY5Bn4mTlOtq9gsMWahXniOe0zYXDVEiFDNmovrH4Pd3jTxncsIakoiQyzUzbra4hg8YiG1wjGXm08IMrWWFKjnPNdn80sPPPeA4rmWaminE1ZMGXfJqldqtrNkm7DHuRlXvR5GotDAIXeVrJNDMRGW8jdGJGx3M1Sj7NMhcXOuUT88PrePK8kl1crU8CV2hWspurYQozOqZKPs3yyHgbmZJf7I+vSCV3jz+j3DzerF8Cd7SV0dZ2huPgQfbjwnHZLsM+ZCdXa7vfCfwYAPupC5zhCo5oK+s4O3PFfaqvZB1n92UBH+6otrSSk4PPslLBnL8l4N7xZy8ouD85mAZGFUoz4/mfahO0tHK1pZWcqKWV+9wFbWklJ2pp6hn5d1z9yEy5uAo9zYr8TxcSbbT6lBtCu8eVPFD+Ros6hqNtTJObTCdmzrFKuQA22Xu31DemXB1XL/InDm4Ep+QxYJ9NJouR86yOtfEZg+x34NE/9vw/XK0ei+w+8KCW/QozttkmmQU2txB3Jt/ia2xyRh6zuVGckp/989bzJvlRi7sP2Euttd027zVOHi6w2oCdtcnYJw8Dyp0F1muT7ZMH9higGNn39PBCCHqTtYoyyHqvx+mhcs/fT0ZRxnZb7/U8PVSuY3c1Aua0yhUiWWuBYuRYrvCgTqvE98ULLG6MHN8Hz9n0C98TSXGuklfxJrHkgr8iG6MfXbnu3VXs1uxcziYdJ2mO0/gPuFYPPxLV9jmdaeJdkub9W3yZ9pX/94X4H9O/EJ8w1CSaaqkpAFcnmmqpTmcybYhyMmhOpn1TFvcruT1IJ1SX0dgdmKMhVWU09mapCtIM75Y0If5e4Ii8VNKE+MtB+qGJnNeShxxNgUekTrJeSx6yUjefi1o+4ghWjvBRyYtalsuQiR2S5dZRVdrLlrJ0MslJroZ1kkk6ySZattSuy5ZkT1i6bKm9+LKlPwBz2mxQs106qwAAAABJRU5ErkJggg==) !important;
  }
  
  .tab-close-button:not([selected]) {
    -moz-image-region: rect(0 40px 40px 0);
  }
}

[badnick]

Oh, so you actually want those grey ones, which were imported from the nasty Australis interface?
The ones shown in your screenshot looks good to me.
No need to change anything, IMO.

Is not exactly Australis but this combination looks good for me, maybe will be launched as an alternative theme (only for this button not for the entire UI)

[badnick]

Yeah.I see now the "design" was a bug, the "sail"-shape was in fact a deformed circle quarter
But for me was pleasant for the eye.

[Moonchild]

Sorry but it was most definitiely a bug, and we'd like to stick to existing styles where possible (or people will have trouble with their post-Firefox PTSD where any change is considered "bad").
In the process the close buttons have also been made HiDPI-ready, so that's a plus.