Popup view fails when tab title contains HTML

[PinkPandaKatie]

When the title of a tab contains certain HTML elements, such as , viewing the group in the popup can fail with a spinning gear.</p> <p>Steps to reproduce:</p> <ol> <li>Enable Popup view in options</li> <li>Open <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea</a></li> <li>Open the popup view</li> <li>Click the arrow next to the current tab group</li> </ol> <p>Traceback:</p> <pre><code>Uncaught (in promise) TypeError: can't access property "addEventListener", node.querySelector(...) is null tabNodes moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/Frame.js:111 getRenderedTabList moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/Frame.js:77 _renderTabList moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupDetailFrame.js:140 render moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupDetailFrame.js:16 _renderGroupListItem moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupsFrame.js:227 _renderGroupListItem moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupsFrame.js:226 _renderGroupList moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupsFrame.js:150 render moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/js/GroupsFrame.js:14 PopupView moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/index.js:19 PopupView moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/index.js:22 <anonymous> moz-extension://ada9b373-b62e-45a0-a5f0-02ddfa830e88/popup-view/index.js:11</code></pre> <p>This is almost certainly caused by failing to escape HTML in the title in the following code:</p> <pre><code> const node = getElementNodeFromString(` <li data-tab="${Tab.id}" class="list__item list__item--tab ${ isActive ? "list__item--highlight" : "" }" data-nav-row> <button class="list__link" title="${Tab.title} ${Tab.url}"> <img class="tab__icon" src="${Tab.favIconUrl}" width="16" height="16" alt="" /> <span>${Tab.title}</span> </button> <button class="list__close" title="${browser.i18n.getMessage("closeTab")}" ${options.hideCloseButton ? "hidden" : ""}></button> </li> `);</code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>