Merge demo and options pages

Commit message

Merge demo and options pages

• The options page is a concept in web extensions, with browser support in menus etcetera.
  • It is sometimes wrapped in a smaller <iframe>, to integrate with the browser's own styling. This keeps the options page layout simple and small.
• The demo page is a standalone page (opened in a separate tab/window), used to showcase Talkie's features.
• Because of a (temporary? accidental?) change in how some browsers handle the options page in iframe mode, Talkie switched to always using a separate tab for the options page.
• With both the demo and options pages being full tabs, their perceived differences are much smaller than before.
  • Several sections/headings/tabs are the same: voices, about.
  • In particular, the voice listing (used to demo available voices) on the demo page is confused with changing the voice settings (used to change default voice per language, pitch and speed) in the options page.
• The main Talkie button's popup linked to both pages, as well as a smaller in-popup version of the options. It was not clear to users which link opened which page.
• To reduce confusion between the two pages, they have been merged into one, the new options page. The new page is based on the demo page, but includes all (non-overlapping) features of the old options page.
• In particular, the voice settings have been changed to a mixture of the old demo listing (view only) and old options form (editable).

Merge demo and options pages

- The options page is a concept in web extensions, with browser support in menus etcetera.
  - It is sometimes wrapped in a smaller `<iframe>`, to integrate with the browser's own styling. This keeps the options page layout simple and small.
- The demo page is a standalone page (opened in a separate tab/window), used to showcase Talkie's features.
- Because of a (temporary? accidental?) change in how some browsers handle the options page in iframe mode, Talkie switched to always using a separate tab for the options page.
- With both the demo and options pages being full tabs, their perceived differences are much smaller than before.
  - Several sections/headings/tabs are the same: voices, about.
  - In particular, the voice listing (used to demo available voices) on the demo page is confused with changing the voice settings (used to change default voice per language, pitch and speed) in the options page.
- The main Talkie button's popup linked to both pages, as well as a smaller in-popup version of the options. It was not clear to users which link opened which page.
- To reduce confusion between the two pages, they have been merged into one, the new options page. The new page is based on the demo page, but includes all (non-overlapping) features of the old options page.
- In particular, the voice settings have been changed to a mixture of the old demo listing (view only) and old options form (editable).