Umbraco-CMS: Umbraco shouldn't store JSON property data as indented

Bug summary

When saving a content or media item in Umbraco backoffice, the data of properties that store JSON will be saved as indented, which takes up more space in the database. Ideally JSON data shouldn’t be indented when saved.

If saved via the content service, it instead depends on the specific implementation whether JSON data is indented or not, making it a bit inconsistent.

Steps to reproduce

For instance, when saving a page with a grid property, the JSON value saved inthe database is something like:

{
  "name": "1 column layout",
  "sections": [
    {
      "grid": 12,
      "rows": [
        {
          "label": "Section",
          "name": "Section",
          "areas": [
            {
              "grid": 12,
              "hasConfig": false,
              "controls": [
                {
                  "value": "Here is a headline",
                  "editor": {
                    "alias": "headline"
                  },
                  "active": false
                }
              ],
              "active": false
            }
          ],
          "hasConfig": false,
          "id": "e96ffdff-bfd2-8238-0909-33f1717cf7f3",
          "active": false
        },
        {
          "label": "Section",
          "name": "Section",
          "areas": [
            {
              "grid": 12,
              "hasConfig": false,
              "controls": [
                {
                  "value": {
                    "id": 1058,
                    "udi": "umb://media/31e5d65860174179b4052d54eca304b5",
                    "image": "/media/1031/photo-1460901419481-3fc27f0cdae9.jpg",
                    "caption": "Here is a bird"
                  },
                  "editor": {
                    "alias": "media"
                  },
                  "active": true
                }
              ],
              "active": true,
              "hasActiveChild": true
            }
          ],
          "hasConfig": false,
          "id": "1e4639a7-e8e2-00f7-c92a-7c9e27ef1140",
          "hasActiveChild": true,
          "active": true
        }
      ]
    }
  ]
}

{"name":"1 column layout","sections":[{"grid":12,"rows":[{"label":"Section","name":"Section","areas":[{"grid":12,"hasConfig":false,"controls":[{"value":"Here is a headline","editor":{"alias":"headline"},"active":false}],"active":false}],"hasConfig":false,"id":"e96ffdff-bfd2-8238-0909-33f1717cf7f3","active":false},{"label":"Section","name":"Section","areas":[{"grid":12,"hasConfig":false,"controls":[{"value":{"id":1058,"udi":"umb://media/31e5d65860174179b4052d54eca304b5","image":"/media/1031/photo-1460901419481-3fc27f0cdae9.jpg","caption":"Here is a bird"},"editor":{"alias":"media"},"active":true}],"active":true,"hasActiveChild":true}],"hasConfig":false,"id":"1e4639a7-e8e2-00f7-c92a-7c9e27ef1140","hasActiveChild":true,"active":true}]}]}

The indended JSON string has a size of 1668 bytes, while the non-intended JSON string ha a size of 744 bytes. That is a reduction of roughly 44%. It may be even more for larger JSON strings.

For a site with thousands of pages, which each may have lots of versions, this will be a lot of extra and unnecessary white space that is being saved to the database.

Another example is when uploading a new image in the media section, the crops of the image is automatically generated and saved (probably directly from C#). The crops are stored something like:

{"src": "/media/1031/photo-1460901419481-3fc27f0cdae9.jpg", "crops": []}

Although the result here still has a few spaces here and there, there are no line break or indentation. However if an editor later saves the image through the backoffice, the JSON will instead be stored as indented:

{
  "src": "/media/1031/photo-1460901419481-3fc27f0cdae9.jpg",
  "focalPoint": {
    "left": 0.51166666666666671,
    "top": 0.3575
  }
}

Fix?

I haven’t yet found the part of the code where the property values are being serialized to JSON. With a few hints in the right direction, I’d be happy to create a PR for this 😉