Moin.
Das HTML (und CSS) der GUI von Thunderbird ist aus meiner Bewertung extrem aufgebläht, voller Redundanz und daher unübersichtlich.
Beispiel des HTML für Folder Tree:
Code
<div xmlns="http://www.w3.org/1999/xhtml" id="folderPaneHeaderBar" class="sidebar-panel-header" hidden="">
<button id="folderPaneMoreButton" class="button button-flat icon-button icon-only" data-l10n-id="folder-pane-more-menu-button" type="button" tabindex="3" title="Optionen für den Ordnerbereich"></button>
<button id="folderPaneWriteMessage" class="button button-primary icon-button" data-l10n-id="folder-pane-write-message-button" type="button" tabindex="2" title="Eine neue Nachricht verfassen" hidden="">Neue Nachricht</button>
<button id="folderPaneGetMessages" class="button button-flat icon-button icon-only" data-l10n-id="folder-pane-get-messages-button" type="button" tabindex="1" title="Nachrichten abrufen" hidden=""></button>
</div>
<ul xmlns="http://www.w3.org/1999/xhtml" id="folderTree" is="tree-listbox" role="tree" class="sidebar-panel-scroll" aria-multiselectable="true" tabindex="0" aria-activedescendant="all-aW1hcDovL3RodW4uZGVyLmJpcmQlNDBnbXguZGVAaW1hcC5nbXgubmV0L0lOQk9Y"><li class="unselectable children" data-mode="all" role="treeitem" aria-expanded="true" aria-selected="false">
<div class="mode-container" hidden="">
<div class="mode-name">Alle Ordner</div>
<button class="mode-button button button-flat icon-button icon-only" type="button" data-l10n-id="folder-pane-mode-context-button" tabindex="-1" title="Ordner-Modi-Optionen"></button>
</div>
<ul role="group"><li is="folder-tree-row" id="all-aW1hcDovL3RodW4uZGVyLmJpcmQlNDBnbXguZGVAaW1hcC5nbXgubmV0" data-server-key="server2" data-server-type="imap" data-server-secure="true" role="treeitem" class="children" aria-expanded="true" aria-selected="false" aria-label="thun.der.bird@gmx.de" title="thun.der.bird@gmx.de">
<div class="container">
<div class="twisty">
<img class="twisty-icon" src="chrome://global/skin/icons/arrow-down-12.svg" alt="" />
</div>
<div class="icon"></div>
<span class="name" tabindex="-1">thun.der.bird@gmx.de</span>
<span class="folder-count-badge unread-count"></span>
<span class="folder-count-badge total-count" hidden=""></span>
<span class="folder-size" hidden=""></span>
</div>
<ul style="--depth: 1;" role="group"><li is="folder-tree-row" id="all-aW1hcDovL3RodW4uZGVyLmJpcmQlNDBnbXguZGVAaW1hcC5nbXgubmV0L0lOQk9Y" data-server-key="server2" data-folder-type="inbox" class="unread total selected current" draggable="true" role="treeitem" aria-selected="true" aria-label="Posteingang, 1 ungelesene Nachricht" title="Posteingang, 1 ungelesene Nachricht">
<div class="container">
<div class="twisty">
<img class="twisty-icon" src="chrome://global/skin/icons/arrow-down-12.svg" alt="" />
</div>
<div class="icon"></div>
<span class="name" tabindex="-1">Posteingang</span>
<span class="folder-count-badge unread-count">1</span>
<span class="folder-count-badge total-count" hidden="">9</span>
<span class="folder-size" hidden=""></span>
</div>
<ul style="--depth: 2;" role="group"></ul>
</li><li is="folder-tree-row" id="all-aW1hcDovL3RodW4uZGVyLmJpcmQlNDBnbXguZGVAaW1hcC5nbXgubmV0L0VudHcmQVB3LXJmZQ==" data-server-key="server2" data-folder-type="drafts" draggable="true" role="treeitem" aria-selected="false" aria-label="Entwürfe" title="Entwürfe" class="">
<div class="container">
<div class="twisty">
<img class="twisty-icon" src="chrome://global/skin/icons/arrow-down-12.svg" alt="" />
</div>
<div class="icon"></div>
<span class="name" tabindex="-1">Entwürfe</span>
<span class="folder-count-badge unread-count">0</span>
<span class="folder-count-badge total-count" hidden="">0</span>
<span class="folder-size" hidden=""></span>
</div>
<ul style="--depth: 2;" role="group"></ul>
</li><li is="folder-tree-row" id="all-aW1hcDovL3RodW4uZGVyLmJpcmQlNDBnbXguZGVAaW1hcC5nbXgubmV0L0dlbCZBUFktc2NodA==" data-server-key="server2" data-folder-type="trash" class="total" draggable="true" role="treeitem" aria-selected="false" aria-label="Gelöscht" title="Gelöscht">
<div class="container">
<div class="twisty">
<img class="twisty-icon" src="chrome://global/skin/icons/arrow-down-12.svg" alt="" />
</div>
<div class="icon"></div>
<span class="name" tabindex="-1">Gelöscht</span>
<span class="folder-count-badge unread-count">0</span>
<span class="folder-count-badge total-count" hidden="">11</span>
<span class="folder-size" hidden=""></span>
</div>
<ul style="--depth: 2;" role="group"></ul>
</li></ul>
</li></ul>
</li></ul>
<template xmlns="http://www.w3.org/1999/xhtml" id="modeTemplate">
<li class="unselectable">
<div class="mode-container">
<div class="mode-name"></div>
<button class="mode-button button button-flat icon-button icon-only" type="button" data-l10n-id="folder-pane-mode-context-button" tabindex="-1"></button>
</div>
<ul></ul>
</li>
</template>
<template xmlns="http://www.w3.org/1999/xhtml" id="folderTemplate">
<div class="container">
<div class="twisty">
<img class="twisty-icon" src="chrome://global/skin/icons/arrow-down-12.svg" alt="" />
</div>
<div class="icon"></div>
<span class="name" tabindex="-1"></span>
<span class="folder-count-badge unread-count"></span>
<span class="folder-count-badge total-count" hidden="hidden"></span>
<span class="folder-size" hidden="hidden"></span>
</div>
<ul></ul>
</template>Kennt und versteht ihr die Motive der Thunderbird-Entwickler, warum sie keinen schlanken gut wartbaren HTML-Code schreiben, wo sich doch mit modernem CSS damit alles erledigen lässt.
Beispiel:
Code
#folder-tree span::before { content: "["; }
#folder-tree span::after { content: "]"; }
#ipsum { list-style-image: url("..."); }
<ul id="folder-tree">
<li id="lorem">Lorem
<ul>
<li id="ipsum">Ipsum <span>3</span>
<li id="dolor" class="selected current">Dolor
</ul>
<li id="adipisit">Adipisit
<ul>
<li id="sed">Sed
<li id="eiusmod">Eiusmod
</ul>
</ul>
Das ist natürlich hier nur eine grobe Skizze um die Richtung anzudeuten.
Hat da jemand Einblick, warum der Code aktuell so ist, wie er ist? Das würde ich gerne verstehen.
