Incorrect styling of labels in Icon plugin preview.

[rerdavies]

Using Chrome on Windows, via the docker image.

Problem:

A style-sheet entry from the root of the page knocks out font selection in all text elements in the plugin preview on the Icon tab.

Repro steps:

Windows, Chrome Version 88.0.4324.146 (Official Build) (64-bit) (current as of Feb 6, 2021).

Use the icon wizard to generate a UI with "Rack/Model 001". Note that the UI is rendered correctly in the wizard.

After completing the wizard, the fonts in the UI preview are rendered in a non-antialiased typeface, with incorrect font-weights.

The offending stylesheet entry is:

.canvas * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "cooper hewitt", Sans-serif !important;
  font-weight: 500;
}

from main.css. Chrome computes this as taking precedence over (for example)

.mod-rack-model-001_http_3A__two-play_com_plugins_toob-input_stage_0_1_ {
    background-image: url(/resources/racks/model-001/model-001.png?uri=http%3A//two-play.com/plugins/toob-input_stage&v=_0_1_);
    background-position: center center;
    background-repeat: no-repeat;
    font-family: Helvetica,Arial,Sans-serif;
    height: 150px;
    position: relative;
    width: 1000px;
}

which is the style that should be selecting font-famly for text elements in the plugin UI.

Computed value of font-family as is, for <div class="mod-plugin-name" />

font-family: "cooper hewitt", Sans-serif !important;

Knocking out font-family in ".canvas *", you get the expected result::

font-family: Helvetica,Arial,Sans-serif;

So the font-family selection is overridden. As a result, all text in the plugin preview is routed to "cooper hewitt" (which for whatever reason doesn't render on the current version of Chrome; the embedded typefaces don't match what chrome expects). So text is rendered in default sans font, which, on windows, is some non-antialiased bitmap typeface from the dark ages of the internet, probably not ever seen in the last decade (Microsoft Sans?).

Chrome reports " Unable to load this content" for all of the .woff and woff2 typefaces (not just the cooper hewitt typefaces, so you know. Maybe update to a more recent woff?

Wouldn't be such a big issue, but the ability to generate screenshots and thumbnails is also broken on the current docker image, so this is a good place to capture screenshots and snapshots. Also, this is the natural location to use when developing custom MOD GUIs on Windows (target is Raspberry Pi, fwiw).