Filter computed styles from browser defaults

index.html

@@ -1354,12 +1354,12 @@ <h1 class="heading">Insert title here</h1>
       console.log('STORE ', e);
     })
 
-    editor.on('styleManager:change:text-shadow', function(view) {
+    editor.on('styleManager:change:padding-top', function(view) {
       var model = view.model;
       let targetValue = view.getTargetValue({ignoreDefault: 1});
       let computedValue = view.getComputedValue();
       let defaultValue = view.model.getDefaultValue();
-      //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
+      console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 
     editor.render();

src/style_manager/config/config.js

@@ -25,9 +25,13 @@ module.exports = {
 
   // Properties which are valid to be shown as computed
   // (Identified as inherited properties: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance)
+  // not used anymore
   validComputed: ['border-collapse', 'border-spacing', 'caption-side', 'color', 'cursor', 'direction', 'empty-cells',
   'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'font-size-adjust', 'font-stretch', 'font',
   'letter-spacing', 'line-height', 'list-style-image', 'list-style-position', 'list-style-type', 'list-style', 'orphans',
   'quotes', 'tab-size', 'text-align', 'text-align-last', 'text-decoration-color', 'text-indent', 'text-justify',
   'text-shadow', 'text-transform', 'visibility', 'white-space', 'widows', 'word-break', 'word-spacing', 'word-wrap'],
+
+  // Properties not to take in account for computed styles
+  avoidComputed: ['width', 'height'],
 };

src/style_manager/view/PropertyView.js

@@ -1,4 +1,5 @@
-import {bindAll} from 'underscore';
+import { bindAll } from 'underscore';
+import { camelCase } from 'utils/mixins';
 
 module.exports = Backbone.View.extend({
 
@@ -271,10 +272,18 @@ module.exports = Backbone.View.extend({
    * @private
    */
   getComputedValue() {
-    let computed = this.propTarget.computed;
-    const valid = this.config.validComputed;
+    const target = this.propTarget;
+    const computed = target.computed;
+    const computedDef = target.computedDefault;
+    const avoid = this.config.avoidComputed;
     const property = this.model.get('property');
-    return computed && valid.indexOf(property) >= 0 && computed[property];
+    const notToSkip = avoid.indexOf(property) < 0;
+    const value = computed[property];
+    const valueDef = computedDef[camelCase(property)];
+    if (property == 'padding-top') {
+      console.log('value',value, 'valuedef', valueDef, computedDef);
+    }
+    return computed && notToSkip && valueDef !== value && value;
   },
 
   /**

src/style_manager/view/SectorsView.js

@@ -1,3 +1,5 @@
+import { extend } from 'underscore';
+
 const SectorView = require('./SectorView');
 
 module.exports = Backbone.View.extend({
@@ -8,8 +10,15 @@ module.exports = Backbone.View.extend({
     this.target = o.target || {};
 
     // The taget that will emit events for properties
-    this.propTarget   = {};
-    _.extend(this.propTarget, Backbone.Events);
+    const target = {};
+    extend(target, Backbone.Events);
+    const body = document.body;
+    const dummy = document.createElement(`el-${new Date().getTime()}`);
+    body.appendChild(dummy);
+    target.computedDefault = { ...window.getComputedStyle(dummy) };
+    body.removeChild(dummy);
+    this.propTarget = target;
+
     this.listenTo( this.collection, 'add', this.addTo);
     this.listenTo( this.collection, 'reset', this.render);
     this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated ' +

src/utils/mixins.js

@@ -7,6 +7,7 @@ const on = (el, ev, fn) => {
   }
 }
 
+
 const off = (el, ev, fn) => {
   ev = ev.split(/\s+/);
   el = el instanceof Array ? el : [el];
@@ -16,12 +17,25 @@ const off = (el, ev, fn) => {
   }
 }
 
+
 const getUnitFromValue = (value) => {
   return value.replace(parseFloat(value), '');
 }
 
+
+const upFirst = value => value[0].toUpperCase() + value.toLowerCase().slice(1);
+
+
+const camelCase = value => {
+  const values = value.split('-');
+  return values[0].toLowerCase() + values.slice(1).map(upFirst);
+}
+
+
 export {
   on,
   off,
+  upFirst,
+  camelCase,
   getUnitFromValue
 }