Closed Grief closed 8 years ago
I missed the obvious thing - it's the conflict with FT DeepDark theme (https://addons.mozilla.org/ru/firefox/addon/ft-deepdark/)
I confirm the issue. My icons are even more misplaced! But I don't use any theme, just the default. If I un-pin the tabs, restart, pin again, they are aligned. For some time only though. Today they are messed up again.
Which platform, and which theme of TST's "appearance" pane?
Windows 8.1, FF 40.0.2, left side Mix, Retro Style. No matter which style, I mean I have misplaced icons right now after FF restart and they look bad regardless the theme when I switch it on the fly. The only thing that helps is to unpin all of them, restart FF, and pin again.
@dowiew I couldn't reproduce this problem on Windows 8.1, Firefox 41.0.1, TST latest development build, with same options of TST appearance. Could you upload any screenshot?
I need the inspected result of a misplaced favicon. https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
I hope to know what styles are applied to all nodes related to a misplaced favicon:
<tab class="tabbrowser-tab treestyletab-faviconized">
: this is the pinned tab itself.
<xul:stack class="tab-stack">
<xul:hbox class="tab-content">
<xul:image class="tab-icon-image">
: this is the favicon itself.<xul:image xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xbl:inherits="src=image,fadein,pinned,selected,visuallyselected,busy,crashed" xmlns:xbl="http://www.mozilla.org/xbl" anonid="tab-icon-image" class="tab-icon-image" validate="never" role="presentation" fadein="true" ordinal="400" style="" pinned="true" src="http://vk.com/images/faviconnew.ico?3#-moz-resolution=16,16"/>
элемент {
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content[pinned="true"] > image {
height: 16px;
margin: 0px;
padding: 0px;
width: 16px;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tab-icon-image, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tab-throbber {
margin-left: 0px;
}
.tab-icon-image {
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
}
.tab-throbber, .tab-icon-image {
height: 16px;
width: 16px;
}
:-moz-devtools-highlighted {
outline: 2px dashed #F06 !important;
outline-offset: -2px !important;
}
image {
-moz-binding: url("chrome://global/content/bindings/general.xml#image");
}
* {
-moz-user-focus: ignore;
-moz-user-select: none;
display: -moz-box;
box-sizing: border-box;
}
#TabsToolbar:not(:-moz-lwtheme):not([treestyletab-tabbar-position="top"]) #tabbrowser-tabs .tabbrowser-tab:not([visuallyselected]) {
color: #555 !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab[visuallyselected="true"], .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]) {
color: #555 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned] {
line-height: 0;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
text-align: start !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
line-height: 1;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab {
pointer-events: auto;
}
.tabbrowser-tab:hover, .tabs-newtab-button:hover {
color: #00ADEE !important;
text-shadow: 0px 0px 5px rgba(0, 173, 238, 0.75);
}
.tabbrowser-tab {
pointer-events: none;
}
.tabbrowser-tab, .tabs-newtab-button {
color: #A6A6A6 !important;
}
tab:hover {
color: #FFF;
}
tab {
color: #A6A6A6;
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]), .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
line-height: 0 !important;
}
:root {
--panel-ui-exit-subview-gutter-width: 38px;
}
:root {
font: message-box;
}
:root {
--panelui-subview-transition-duration: 150ms;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
:root {
text-rendering: optimizelegibility;
-moz-control-character-visibility: visible;
}
<xul:hbox xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xbl:inherits="pinned,selected,visuallyselected,titlechanged" xmlns:xbl="http://www.mozilla.org/xbl" class="tab-content" align="center" pinned="true">
элемент {
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content[pinned="true"] {
padding: 0px 4px;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned="true"] .tab-stack, .tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content[pinned="true"] {
-moz-box-align: center;
-moz-box-pack: center;
min-height: 0px;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content {
margin-left: 0px !important;
margin-right: 0px !important;
}
.tab-content {
-moz-padding-start: 5px;
-moz-padding-end: 5px;
margin-top: -1px;
}
:-moz-devtools-highlighted {
outline: 2px dashed #F06 !important;
outline-offset: -2px !important;
}
* {
-moz-user-focus: ignore;
-moz-user-select: none;
display: -moz-box;
box-sizing: border-box;
}
#TabsToolbar:not(:-moz-lwtheme):not([treestyletab-tabbar-position="top"]) #tabbrowser-tabs .tabbrowser-tab:not([visuallyselected]) {
color: #555 !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab[visuallyselected="true"], .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]) {
color: #555 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned] {
line-height: 0;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
text-align: start !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
line-height: 1;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab {
pointer-events: auto;
}
.tabbrowser-tab {
pointer-events: none;
}
.tabbrowser-tab, .tabs-newtab-button {
color: #A6A6A6 !important;
}
tab {
color: #A6A6A6;
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]), .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
line-height: 0 !important;
}
:root {
--panel-ui-exit-subview-gutter-width: 38px;
}
:root {
font: message-box;
}
:root {
--panelui-subview-transition-duration: 150ms;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
:root {
text-rendering: optimizelegibility;
-moz-control-character-visibility: visible;
}
<xul:stack xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="tab-stack" flex="1">
элемент {
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned="true"] .tab-stack, .tabbrowser-tabs[treestyletab-mode="vertical"] .tab-content[pinned="true"] {
-moz-box-align: center;
-moz-box-pack: center;
min-height: 0px;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned="true"] .tab-stack {
height: 100%;
width: 100%;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tab-stack {
max-height: 999999px;
min-height: 22px;
}
.tab-stack {
vertical-align: top;
}
:-moz-devtools-highlighted {
outline: 2px dashed #F06 !important;
outline-offset: -2px !important;
}
stack, bulletinboard {
display: -moz-stack;
}
* {
-moz-user-focus: ignore;
-moz-user-select: none;
display: -moz-box;
box-sizing: border-box;
}
#TabsToolbar:not(:-moz-lwtheme):not([treestyletab-tabbar-position="top"]) #tabbrowser-tabs .tabbrowser-tab:not([visuallyselected]) {
color: #555 !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab[visuallyselected="true"], .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]) {
color: #555 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned] {
line-height: 0;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
text-align: start !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
line-height: 1;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab {
pointer-events: auto;
}
.tabbrowser-tab {
pointer-events: none;
}
.tabbrowser-tab, .tabs-newtab-button {
color: #A6A6A6 !important;
}
tab {
color: #A6A6A6;
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]), .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
line-height: 0 !important;
}
:root {
--panel-ui-exit-subview-gutter-width: 38px;
}
:root {
font: message-box;
}
:root {
--panelui-subview-transition-duration: 150ms;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
:root {
text-rendering: optimizelegibility;
-moz-control-character-visibility: visible;
}
<tab xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="tabbrowser-tab treestyletab-faviconized" fadein="true" context="tabContextMenu" closetabtext="Закрыть вкладку" linkedpanel="panel-3-1" first-tab="true" label="(3) Новости" visibleLabel="(3) Новости" crop="end" onerror="this.removeAttribute('image');" treestyletab-allow-subtree-collapse="true" align="stretch" maxwidth="65000" minwidth="0" dir="ltr" style="margin-left: 0px ! important; width: 27px; max-width: 27px; left: 1676px; right: auto; margin-top: -27px ! important;" pinned="true" treestyletab-insert-before="tab-<1443190232587-32641>" image="http://vk.com/images/faviconnew.ico?3#-moz-resolution=16,16" treestyletab-id="tab-<1443167614726-31077>" treestyletab-nest="0" first-visible-tab="true" titlechanged="true"/>
элемент {
margin-left: 0px !important;
width: 27px;
max-width: 27px;
left: 1676px;
right: auto;
margin-top: -27px !important;
}
#TabsToolbar:not(:-moz-lwtheme):not([treestyletab-tabbar-position="top"]) #tabbrowser-tabs .tabbrowser-tab:not([visuallyselected]) {
color: #555 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) {
background-image: radial-gradient(circle farthest-corner at 50% 3px , #FFF 3%, #569BE4 80%);
}
.tabbrowser-tabs[treestyletab-animation-enabled="true"][treestyletab-mode="vertical"] .tabbrowser-tab:not([treestyletab-collapsed-done="true"]) {
transition: margin-left 0.2s ease-out 0s, margin-right 0.2s ease-out 0s, margin-top 0.15s ease-out 0s, opacity 0.15s ease-out 0s, min-height 0.15s ease-out 0s, max-height 0.15s ease-out 0s, min-width 0.15s ease-out 0s, max-width 0.15s ease-out 0s;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"] .tabbrowser-tab:not([visuallyselected="true"]) {
-moz-border-left-colors: transparent transparent !important;
-moz-border-right-colors: transparent transparent !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]) {
-moz-border-top-colors: transparent transparent !important;
-moz-border-bottom-colors: transparent transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab, .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[visuallyselected="true"], .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([visuallyselected="true"]) {
border-left: 2px solid !important;
-moz-border-left-colors: #EEE transparent !important;
border-right: 2px solid !important;
-moz-border-right-colors: #EEE transparent !important;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab, .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab[visuallyselected="true"], .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab:not([visuallyselected="true"]) {
-moz-appearance: none !important;
min-height: 2em;
margin: 0px !important;
color: #555 !important;
background-origin: border-box !important;
background-position: 0px 0px !important;
border-top: 2px solid !important;
-moz-border-top-colors: transparent transparent !important;
border-bottom: 2px solid !important;
-moz-border-bottom-colors: #A7A7A7 transparent !important;
border-radius: 0px !important;
border-image: none !important;
-moz-box-align: stretch !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned="true"] {
height: 24px;
margin: 0px;
max-height: 24px;
max-width: 24px;
padding: 0px;
width: 24px;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[visuallyselected="true"] {
z-index: auto;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab[pinned] {
line-height: 0;
position: fixed !important;
z-index: 100;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
-moz-box-pack: start !important;
text-align: start !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab {
line-height: 1;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"]) .tabbrowser-tab {
pointer-events: auto;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] .tabbrowser-tab, toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarbutton, toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > .treestyletab-toolbar-inner-box > toolbarbutton, toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbaritem, toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > .treestyletab-toolbar-inner-box > toolbaritem {
-moz-box-flex: 0 !important;
}
.tabbrowser-tab {
pointer-events: none;
}
.tabbrowser-tab {
-moz-box-align: stretch;
}
.tabbrowser-tab, .tabs-newtab-button {
-moz-appearance: none;
background: transparent linear-gradient(#282828 35%, #212121 95%) no-repeat scroll 0% 0% / 200% auto border-box;
height: 25px;
border-radius: 0px;
margin: 0px;
padding: 0px;
color: #A6A6A6 !important;
box-shadow: 0px 1px rgba(255, 255, 255, 0.02) inset;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
border-bottom: 0px none !important;
}
.tabbrowser-tab {
-moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
}
tab {
-moz-appearance: none;
margin-top: 2px;
border-radius: 0px;
padding: 1px 4px 2px;
background: transparent linear-gradient(#464646, #282828) repeat scroll 0% 0%;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #A6A6A6;
}
:-moz-devtools-highlighted {
outline: 2px dashed #F06 !important;
outline-offset: -2px !important;
}
tab {
-moz-binding: url("chrome://global/content/bindings/tabbox.xml#tab");
-moz-box-align: center;
-moz-box-pack: center;
}
* {
-moz-user-focus: ignore;
-moz-user-select: none;
display: -moz-box;
box-sizing: border-box;
}
.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]), .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
line-height: 0 !important;
}
:root {
--panel-ui-exit-subview-gutter-width: 38px;
}
:root {
font: message-box;
}
:root {
--panelui-subview-transition-duration: 150ms;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
window, page, dialog, wizard, prefwindow {
color: #A6A6A6;
font: message-box;
}
window {
font: 3mm tahoma,arial,helvetica,sans-serif;
}
:root {
text-rendering: optimizelegibility;
-moz-control-character-visibility: visible;
}
@piroor - I have to put my desktop machine into sleep instead of shutdown just not to restart Firefox and have the icons properly placed once I organize them. To complete your request I restarted FF 3 times (the icons not always get misplaced) and got them like this, on the screenshot.
And here are the pasted styles of the 1st and 2nd icon (only 1 difference for the 3rd one - margin-left: 48px instead of 24px). I can not include more files here for some reason, so here are the links to pastebin
http://pastebin.com/stJgSSBy
http://pastebin.com/guRpNkSR
@dowiew The navigation toolbar in your screenshot seems very narrow. Any theme or custom rules in userChrome.css? TST is designed to work with default Firefox theme with no modification by userChrome.css.
@Grief Thanks, TST's style rules seems to conflict with the one of the theme itself. Could you try to put following style rules to your userChrome.css?
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([busy]):not(:hover)
.tab-content[pinned],
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([busy]):hover
.tab-content[pinned],
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([busy]):not(:hover)
.tab-content[pinned][visuallyselected="true"],
.tabbrowser-tabs[treestyletab-mode="vertical"]
.tabbrowser-tab:not([busy]):hover
.tab-content[pinned][visuallyselected="true"] {
padding-left: 10px /* change the value as you like. */ !important;
}
Anyway, TST just supports the default theme of Firefox itself because it is impossible to design TST to work with various custom theme or unknown userChrome.css rules. I think this is an unavoidable limitation of addons which is developed by an individual author.
@piroor Indeed, the userChrome.css contained a few lines and I noticed a style addon called 'Minimal for Australis' which claims to interfere with UI.
I reverted userChrome.css to default, disabled the style addon, made sure only default theme, restarted - no change, the icons are still misplaced...
I have noticed that after FF starts with no pinned tabs and I start pinning them, the icons seem to be placed a few pixels to the left right away:
When I restart FF I get them moved to the left much more (like previous screenshot) but the Browser Toolbox style rules are almost exactly the same (at the beginning, the margin-left: line is placed after max-width: line:
element {
margin-left: 0px !important;
width: 24px;
max-width: 24px; )
Oh well, I've been using my current addons set, including TST for a very long time and was happy but now I am annoyed. Can my other addons interfere? Should I start disabling them one by one? Is there any chance TST will work well?
@piroor The userChrome.css rules you've provided didn't fix the issue unfortunately