Store styling settings to project

[ripla]

Settings created in #1868 and #1869 should be stored in the filesystem in the project folder .vaadin/designer

[anssit]

These are the settings we store currently in the project workspace:

  <component name="com.vaadin.designer2.intellij.settings.SizePresetsSettingsComponent">
    <option name="sizePresets">
      <list>
        <SizePreset>
          <option name="caption" value="Phone" />
          <option name="height" value="568" />
          <option name="width" value="320" />
        </SizePreset>
        <SizePreset>
          <option name="caption" value="Tablet" />
          <option name="height" value="1024" />
          <option name="width" value="768" />
        </SizePreset>
        <SizePreset>
          <option name="caption" value="Desktop" />
          <option name="height" value="900" />
          <option name="width" value="1440" />
        </SizePreset>
      </list>
    </option>
  </component>
  <component name="designer2.settings">
    <option name="applicationTheme" value="src/main/webapp/frontend/styles/shared-styles.html" />
    <option name="autodetectServerAddress" value="true" />
    <option name="componentTheme" value="MATERIAL" />
    <option name="lastJavaLocation" value="$PROJECT_DIR$/src/main/java" />
    <option name="lastTemplateLocation" value="$PROJECT_DIR$/src/main/webapp/frontend/src/views" />
    <option name="serverIp" value="192.168.10.36" />
    <option name="serverPort" value="56548" />
  </component>

Settings such as server IP and port are user specific and thus not something we want to store into VCS.

Size presets may be good to store in VCS.

Theme settings clearly need to be stored into VCS so that they do not have to be manually reset after project import and that they transfer between developers and designers.

Settings that should be stored into VCS need to be stored in files separate from settings that are not intended to be stored into VCS - so that the unwanted settings can be easily excluded from commits.

Therefore, there may be several Designer related files in .vaadin/designer folder.

[ripla]

I feel that when weighing ease of use against powerful features, in this case, I would go with ease of use. That is, store only the styling settings. Storing viewport sizes sounds like a good idea, but I can imagine a few edge cases which would require conflict resolution.

[anssit]

Three approaches can be used to separate the non-VCS and VCS settings:

.vaadin/designer
  +-- project.json // intended to be stored into VCS
  +-- workspace.json // not intended to be stored into VCS
  +-- other files // intended to be stored into VCS

.vaadin/designer // all files here intended to be stored into VCS
  +-- project.json
  +-- other files
.vaadin-designer.json // contains workspace settings, not intended to be stored into VCS

.vaadin/designer // all files here intended to be stored into VCS
  +-- project.json
  +-- other files

// contains workspace settings, not intended to be stored into VCS
<IDE workspace files> or <Browser local storage> 

In particular, the theme settings would go into .vaadin/designer/project.json.

Currently, all settings are stored in IDE, so the natural next step to implement is option 3.

[anssit]

The format of the file can be JSON as parsers are readily available in all target environments.

.vaadin/designer/project.json

{
    "flow": {
        "theme": {
            "component": "MATERIAL",
            "application": "src/main/webapp/frontend/styles/shared-styles.html"
        }
    }
}

[anssit]

To simplify JSON parsing, the settings could be stored in the JSON file alternatively like this:

{
    "flow.theme.component": "MATERIAL",
    "flow.theme.application": "src/main/webapp/frontend/styles/shared-styles.html"
}

[tanbt]

I think option 3 is good enough. We don't need to touch what IDEs already handled.
Storing viewport settings can be considered in another card (?).

The simpler version of JSON structure looks fine, it could help to reduce nested objects after parsing.