chore: Setting style property to make CSP less grumpy. (#7503)

* Setting style property to make CSP less grumpy.

"Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)."

The 'style' property should be set as an object, not as a string, according to CSP rules.

Back-ported from Blockly Games.

Author: Neil Fraser

core/field_angle.ts

@@ -219,8 +219,8 @@ export class FieldAngle extends FieldInput<number> {
       'version': '1.1',
       'height': FieldAngle.HALF * 2 + 'px',
       'width': FieldAngle.HALF * 2 + 'px',
-      'style': 'touch-action: none',
     });
+    svg.style.touchAction = 'none';
     const circle = dom.createSvgElement(
       Svg.CIRCLE,
       {

core/flyout_base.ts

@@ -340,8 +340,8 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
     // hide/show code will set up proper visibility and size later.
     this.svgGroup_ = dom.createSvgElement(tagName, {
       'class': 'blocklyFlyout',
-      'style': 'display: none',
     });
+    this.svgGroup_.style.display = 'none';
     this.svgBackground_ = dom.createSvgElement(
       Svg.PATH,
       {'class': 'blocklyFlyoutBackground'},

core/renderers/common/marker_svg.ts

@@ -641,7 +641,6 @@ export class MarkerSvg {
       {
         'width': this.constants_.CURSOR_WS_WIDTH,
         'height': this.constants_.WS_CURSOR_HEIGHT,
-        'style': 'display: none',
       },
       this.markerSvg_,
     );
@@ -653,15 +652,14 @@ export class MarkerSvg {
         'class': 'blocklyVerticalMarker',
         'rx': 10,
         'ry': 10,
-        'style': 'display: none',
       },
       this.markerSvg_,
     );
 
     // A filled in puzzle piece used to represent an input value.
     this.markerInput_ = dom.createSvgElement(
       Svg.PATH,
-      {'transform': '', 'style': 'display: none'},
+      {'transform': ''},
       this.markerSvg_,
     );
 
@@ -671,13 +669,14 @@ export class MarkerSvg {
       Svg.PATH,
       {
         'transform': '',
-        'style': 'display: none',
         'fill': 'none',
         'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
       },
       this.markerSvg_,
     );
 
+    this.hide();
+
     // Markers and stack markers don't blink.
     if (this.isCursor()) {
       const blinkProperties = this.getBlinkProperties_();

core/renderers/zelos/marker_svg.ts

@@ -116,11 +116,11 @@ export class MarkerSvg extends BaseMarkerSvg {
       Svg.CIRCLE,
       {
         'r': this.constants_.CURSOR_RADIUS,
-        'style': 'display: none',
         'stroke-width': this.constants_.CURSOR_STROKE_WIDTH,
       },
       this.markerSvg_,
     );
+    this.hide();
 
     // Markers and stack cursors don't blink.
     if (this.isCursor()) {

core/utils/dom.ts

@@ -353,7 +353,10 @@ export function measureFontMetrics(
   block.style.height = '0';
 
   const div = document.createElement('div');
-  div.setAttribute('style', 'position: fixed; top: 0; left: 0; display: flex;');
+  div.style.display = 'flex';
+  div.style.position = 'fixed';
+  div.style.top = '0';
+  div.style.left = '0';
   div.appendChild(span);
   div.appendChild(block);
 

demos/blockfactory/workspacefactory/wfactory_generator.js

@@ -45,7 +45,7 @@ WorkspaceFactoryGenerator.prototype.generateToolboxXml = function() {
   // Create DOM for XML.
   var xmlDom = Blockly.utils.xml.createElement('xml');
   xmlDom.id = 'toolbox';
-  xmlDom.setAttribute('style', 'display: none');
+  xmlDom.style.display = 'none';
 
   if (!this.model.hasElements()) {
     // Toolbox has no categories. Use XML directly from workspace.
@@ -111,7 +111,7 @@ WorkspaceFactoryGenerator.prototype.generateWorkspaceXml = function() {
   // Generate XML and set attributes.
   var xmlDom = Blockly.Xml.workspaceToDom(this.hiddenWorkspace);
   xmlDom.id = 'workspaceBlocks';
-  xmlDom.setAttribute('style', 'display: none');
+  xmlDom.style.display = 'none';
   return xmlDom;
 };
 

tests/playgrounds/screenshot.js

@@ -84,7 +84,7 @@ function workspaceToSvg_(workspace, callback, customCss) {
   );
   svg.setAttribute('width', width);
   svg.setAttribute('height', height);
-  svg.setAttribute('style', 'background-color: transparent');
+  svg.style.backgroundColor = 'transparent';
 
   const css = [].slice
     .call(document.head.querySelectorAll('style'))