template.html

        <!-- BEGIN markup for Preference Editor -->
        <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
            <!--
                This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
                A separate panel bar for mobile displays is needed to preserver the correct tab order.
            -->
            <div class="fl-panelBar fl-panelBar-smallScreen">
                <span class="fl-prefsEditor-buttons">
                    <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
                    <button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
                </span>
            </div>

            <!-- This is the div that will contain the Preference Editor component -->
            <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>

            <!--
                This div is for the sliding panel bar that shows and hides the Preference Editor controls in the desktop view.
                A separate panel bar for desktop displays is needed to preserver the correct tab order.
            -->
            <div class="fl-panelBar fl-panelBar-wideScreen">
                <span class="fl-prefsEditor-buttons">
                    <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide"> Show/Hide</button>
                    <button class="flc-prefsEditor-reset fl-prefsEditor-reset"><span class="fl-icon-undo"></span> Reset</button>
                </span>
            </div>
        </div>
        <!-- END markup for Preference Editor -->