add workaround for Chrome 40+ selectionChanged regression

js/main.js

@@ -83,14 +83,20 @@
   Extension.prototype.onSelectedElementChange = function(){
     var self = this;
 
-    if (this.activeEditor){
-      this.removeEditor(this.activeEditor);
-    }
-
-    self.getSelectedElementStyles().then(function(data){
-      self.controller.setModel(new app.Model(data));
-      self.controller.setView();
-    });
+    this.ensureDifferentElementSelected()
+      .then(function(){
+        if (self.activeEditor){
+          self.removeEditor(self.activeEditor);
+        }
+
+        self.getSelectedElementStyles().then(function(data){
+          self.controller.setModel(new app.Model(data));
+          self.controller.setView();
+        });
+      })
+      .catch(function(err){
+        console.info("reselecting prev element; stop")
+      })
   };
 
   Extension.prototype.onEditorStateChange = function(editor){
@@ -101,6 +107,38 @@
     }
   };
 
+  /*
+    Workaround for Chrome 40+ regression in DevTools API where `onSelectionChanged` triggers twice.
+    @see https://code.google.com/p/chromium/issues/detail?id=438267
+
+    Check if the selection change happens consecutively on the same element.
+    Return a promise which resolves if the selection change occurs on different elements as expected,
+    and rejects if the selection change occurs consecutively on the same element which is caused by the regression.
+  */
+  Extension.prototype.ensureDifferentElementSelected = function(){
+    return new Promise(function(resolve, reject){
+
+        function check(role){
+          var marker = 'editor-target';
+
+          // data-role matches, same element is selected
+          if (role == marker){
+            reject();
+          }
+
+          // data-role is undefined, element is not the previously selected one
+          // mark currently selected element ($0), unmark previously selected element ($1)
+          if (role == undefined){
+            chrome.devtools.inspectedWindow.eval('$0.dataset.role="'+ marker.toString() +'"; delete $1.dataset.role', function(){
+              resolve();
+            });
+          }
+        }
+
+        chrome.devtools.inspectedWindow.eval('$0.dataset.role', check);
+    })
+  }
+
   Extension.prototype.setupEditor = function(editor){
     chrome.devtools.inspectedWindow.eval('setup($0, "'+ editor.property.toString() +'", "'+ editor.value.toString() +'")', { useContentScriptContext: true });
     this.activeEditor = editor;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-css-shapes-editor",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Interactive editor for CSS Shapes",
   "main": "background.js",
   "scripts": {