Was ist das Motiv von Mozilla für das extrem aufgeblähte schwer wartbare HTML?

thun.der.bird · August 29, 2025 at 12:59 AM

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>

Display More

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.

Display More

MSFreak · August 29, 2025 at 7:54 AM

Wir sind hier nicht das Entwicklerteam von Mozilla, wenn du diesbezüglich Fragen hast, musst du dich bitte an denen wenden. Wir sind hier nur ein Hilfeforum, indem User ehrenamtlich andere User bei ihren Problemen mit Thunderbird helfen.
Bitte auch mal lesen:

- Thunderbird Mail DE

thun.der.bird · August 29, 2025 at 8:22 AM

Das weiß ich doch : ) Hätte doch sein können, dass hier jemand mitliest, der Einblick in solche Themen hat.

Und mich interessiert auch eure Bewertung, euer Empfinden zur Qualität des HTML und CSS von Thunderbird.

Ich will auch erfahren, ob nur ich mich wundere.

ggbsde · August 29, 2025 at 2:57 PM

Ich kann da nichts Aufgeblähtes erkennen. Jedes Element und jedes Attribute hat seinen Sinn. Und mit CSS lässt sich nur das Aussehen ändern aber nicht die Funktion.

s_hentzschel · August 30, 2025 at 9:41 PM

Ich verstehe auch nicht, woher die Annahme kommt, das sei in irgendeiner nennenswerten Form „extrem aufgebläht, voller Redundanz und daher unübersichtlich“. Natürlich kann man Code schlanker machen, indem man wie im Beispiel unter anderem einfach mal alle Attribute für die Barrierefreiheit entfernt. Aber das kann ja wohl nicht Sinn der Sache sein.

thun.der.bird · August 31, 2025 at 10:42 AM

Quote from s_hentzschel

Natürlich kann man Code schlanker machen, indem man wie im Beispiel unter anderem einfach mal alle Attribute für die Barrierefreiheit entfernt.

Das war doch nur eine schnell Skizze. Es ging um die Richtung. Ich antworte hier später nochmal mit einem viel konkreteren Beispiel. Erstmal muss ich an der Doku zu meinem Projekt weiterkommen.

s_hentzschel · August 31, 2025 at 11:25 AM

Eine „schnelle Skizze“, um deinen Punkt zu demonstrieren, ergibt nicht viel Sinn. Denn sobald du wirklich alles berücksichtigst, was notwendig ist, hast du keinen weniger komplexen Code (nicht dass der von dir gezeigte Original-Code außerordentlich komplex wäre, das ist er nämlich nicht). Du kannst nicht einfach Attribute, IDs oder Klassen entfernen, die alle einen Zweck erfüllen. Und die Aussage, dass der Code „nicht gut wartbar“ sei, wäre erste einmal zu beweisen. Ich habe starke Zweifel an dieser Behauptung, insbesondere da wir hier definitiv von keiner historisch gewachsenen Altlast aus Netscape-Zeiten sprechen, sondern von Code, der tatsächlich relativ neu ist und für Thunderbird 115 von Grund auf neu geschrieben worden war. Es wäre auch überhaupt nicht zielführend, möglichst viel ins CSS auszulagern, weil es optisch vielleicht zum gleichen Ergebnis führt. Es gibt viel mehr Aspekte zu berücksichtigen, wie die Funktionalität, Performance und bereits angesprochene Barrierefreiheit. Und im Übrigen impliziert weniger Code auch nicht automatisch bessere Wartbarkeit. Manchmal bringt durchaus auch mehr Code bessere Wartbarkeit. Das kann man nicht pauschalisieren.

thun.der.bird · August 31, 2025 at 11:38 AM

Ich lasse mich gerne überzeugen, dass ich falsch lag.

Wie gesagt: das Thema muss erstmal ruhen, da ich bei der Doku vorankommen will und noch sehr viele ungelöste Aufgaben vor mir liegen.

Siehe die diversen Threads hier von mir, die noch ohne Lösung sind.

Was ist das Motiv von Mozilla für das extrem aufgeblähte schwer wartbare HTML?

Thunderbird 152.0.1 veröffentlicht

Thunderbird 140.12.1 ESR veröffentlicht

Similar Threads

tbkeys lite: Code für Tastenkürzel für "Verfassenfenster > Format > Absatz > Absatz"?

Verlorene Mails durch Umsortierung, Ordnerumbenennung? Größen lokale Ordner? (MacOS)