Build options page programatically
Until now we manually created the options page layout, but we want to
add custom elements before each option (for the kill switch
functionality), and this is very cumbersome to do it manually. Thus,
this CL builds the options page layout programatically to be able to
easilly inject a custom component before each option.
Change-Id: Ib110679971fa70c9933be911c4750b7fafa1d40e
diff --git a/src/static/options/options.html b/src/static/options/options.html
index 91a8205..8dde2a4 100644
--- a/src/static/options/options.html
+++ b/src/static/options/options.html
@@ -40,26 +40,7 @@
</div>
<form>
<div class="kill-switch-text" id="kill-switch-warning" hidden data-i18n="killswitchwarning"></div>
- <div class="option"><input type="checkbox" id="list"> <label for="list" data-i18n="list"></label></div>
- <div class="option"><input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label></div>
- <div class="option"><input type="checkbox" id="threadall"> <label for="threadall" data-i18n="threadall"></label></div>
- <h4 data-i18n="enhancements"></h4>
- <div class="option"><input type="checkbox" id="fixedtoolbar"> <label for="fixedtoolbar" data-i18n="fixedtoolbar"></label></div>
- <div class="option"><input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label></div>
- <div class="option"><input type="checkbox" id="history"> <label for="history" data-i18n="history"></label></div>
- <div class="option"><input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
- <div class="option"><input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label></div>
- <div class="option"><input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label></div>
- <div class="option"><input type="checkbox" id="ccdarktheme"> <label for="ccdarktheme" data-i18n="ccdarktheme"></label></div>
- <div class="option"><input type="checkbox" id="ccforcehidedrawer"> <label for="ccforcehidedrawer" data-i18n="ccforcehidedrawer"></label></div>
- <div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>
- <div class="option"><input type="checkbox" id="batchlock"> <label for="batchlock" data-i18n="batchlock"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
- <div class="option"><input type="checkbox" id="enhancedannouncementsdot"> <label for="enhancedannouncementsdot" data-i18n="enhancedannouncementsdot"></label></div>
- <div class="option"><input type="checkbox" id="repositionexpandthread"> <label for="repositionexpandthread" data-i18n="repositionexpandthread"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
- <h4 data-i18n="profileindicator_header"></h4>
- <div class="option"><input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
- <div class="option"><input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
- <div class="option"><a id="profileIndicatorMoreInfo" target="_blank" rel="noreferrer noopener" data-i18n="profileindicator_moreinfo"></a></div>
+ <div id="options-container"></div>
<div class="actions"><button id="save" data-i18n="save"></button></div>
</form>
<div id="save-indicator"></div>