Use plot title as default filename for "Download plot" button

[emilykl]

Addresses #5124

• Use layout.title.text as default download filename when neither config.toImageButtonOptions.filename or gd.fn are defined.
  • "slugify" title by lowercasing, removing HTML tags, removing some special characters, and replacing whitespace with hyphens
  • Ignore MathJax titles entirely, to avoid generating horrible filenames like ihbarfracdpsidt=-v-frac-hbar^22mnabla^2p.png
  • Add helper function to get title from _fullLayout (so that template values are respected) while ignoring the "Click to add title" placeholder
• Change fallback filename to plot-image rather than newplot
• Change notifier wording for image download slightly, to better match button tooltip (remove references to "snapshot")
• Add/modify tests for the above

Steps for testing

1. Pull this branch and run devtools (npm run start)
2. Load any plot in the devtools
3. Click the "Download plot as PNG" button (camera icon) and verify that the downloaded plot filename corresponds to the plot title
4. Repeat for several more plots, including the below:
   a. scatter_marker_line_dash (normal example, filename should match)
   b. bar-like_traces_tozero (title is defined in template, filename should match)
   c. automargin-small-width (no title, should default to plot-image.png)
   d. mathjax (MathJax title, should default to plot-image.png)

[archmoj]

Nice!
What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

[archmoj]

You may also consider adding the subtitle.text if present.

[emilykl]

I'm open to that, but I'm having trouble thinking of a real-world example where adding the subtitle would result in a better filename.

I suppose maybe in the case where you have multiple plots with the same title but different subtitles, that could differentiate the filenames.

Do you have any particular examples in mind?

[emilykl]

Nice! What's the expected behavior when title.text is set to a dot?

Plotly.newPlot(gd, [{y: [1, 2]}], {title: {text: "."}});

Right now it returns png.png!

Good catch!! That's a wild edge case, I guess I would have expected it to return ..png, which also isn't a good outcome.

I suppose . should either be treated the same as whitespace characters, or simply removed, I'll make that change.