basis.devpanel: isolate styles

src/devpanel/index.js

@@ -1,4 +1,6 @@
 require('basis.data');
+require('basis.data.value');
+require('basis.data.index');
 require('basis.ui');
 require('basis.dragdrop');
 
@@ -15,6 +17,17 @@ var themeList = require('./themeList.js');
 var cultureList = require('./cultureList.js');
 //var fileInspector = resource('./module/fileInspector/fileInspector.js');
 
+var inspectors = new basis.data.Dataset();
+var inspectMode = basis.data.index.count(inspectors, 'update', 'data.mode').as(Boolean);
+
+[l10nInspector, templateInspector, heatInspector].forEach(function(inspectorRes){
+  inspectorRes.ready(function(inspector){
+    inspectors.add(inspector.inspectMode.link(new basis.data.Object, function(value){
+      this.update({ mode: value });
+    }));
+  });
+});
+
 
 //
 // panel
@@ -70,6 +83,7 @@ var panel = new basis.ui.Node({
     cultureName: inspectBasis.l10n.culture,
     cultureList: cultureList,
     isOnline: isOnline,
+    inspectMode: inspectMode,
     reloadRequired: 'satellite:'
   },
 

src/devpanel/inspector/heatmap.js

@@ -10,23 +10,20 @@ var inspectBasisTemplateMarker = inspectBasis.require('basis.template.html').mar
 var inspectBasisEvent = inspectBasis.require('basis.dom.event');
 
 var document = global.document;
-var inspectMode;
+var inspectMode = new basis.data.Value({ value: false });
 var elements = [];
 
 var overlayNode = new basis.ui.Node({
   template: resource('./template/heat_overlay.tmpl'),
-  action: {
-    mouseover: function(e){
-      basis.cssom.classList(overlayContent).add('hover');
-    },
-    mouseout: function(e){
-      basis.cssom.classList(overlayContent).remove('hover');
-    }
+  hide: new basis.Token(false),
+  binding: {
+    hide: 'hide'
   }
 });
 
 var overlay = overlayNode.element;
 var overlayContent = overlayNode.tmpl.content || overlay;
+var tokenDomProto = overlayNode.tmpl.token;
 
 // dom mutation observer
 
@@ -42,11 +39,10 @@ var observer = (function(){
 })();
 
 function startInspect(){
-  if (!inspectMode)
+  if (!inspectMode.value)
   {
-    basis.cssom.classList(document.body).add('devpanel-inspectMode');
     updateOnScroll();
-    inspectMode = true;
+    inspectMode.set(true);
     highlight();
 
     basis.dom.event.addGlobalHandler('scroll', updateOnScroll);
@@ -64,19 +60,17 @@ function startInspect(){
 }
 
 function endInspect(){
-  if (inspectMode)
+  if (inspectMode.value)
   {
     if (observer)
       observer.disconnect();
 
-    basis.cssom.classList(document.body).remove('devpanel-inspectMode');
-
     basis.dom.event.removeGlobalHandler('scroll', updateOnScroll);
     basis.dom.event.removeHandler(window, 'resize', updateOnResize);
     inspectBasisEvent.releaseEvent('contextmenu');
 
     unhighlight();
-    inspectMode = false;
+    inspectMode.set(false);
   }
 }
 
@@ -92,9 +86,9 @@ function updateOnScroll(event){
 var resizeTimer;
 function updateOnResize(){
   clearTimeout(resizeTimer);
-  basis.cssom.classList(overlayContent).add('hide');
+  overlayNode.hide.set(true);
   resizeTimer = setTimeout(function(){
-    basis.cssom.classList(overlayContent).remove('hide');
+    overlayNode.hide.set(false);
     highlight(true);
   }, 100);
 }
@@ -119,32 +113,36 @@ function highlight(keepOverlay){
     var temp = max != min ? 1 - ((data.updates - min) / (max - min)) : 1;
     var bgColor = 'rgba(' + [255 - parseInt(128 * temp), parseInt(temp * 255), 0].join(',') + ', .4)';
     var borderColor = 'rgba(' + [200 - parseInt(128 * temp), parseInt(temp * 200), 0].join(',') + ', .75)';
-    data.element = tokenElements.appendChild(basis.dom.createElement({
-      description: '.devpanel-heat-token',
-      css: {
-        backgroundColor: bgColor,
-        outline: '1px solid ' + borderColor,
-        top: data.rect.top + 'px',
-        left: data.rect.left + 'px',
-        width: data.rect.width + 'px',
-        height: data.rect.height + 'px'
-      }
-    }, data.updates == 1 ? '' : data.updates));
+    data.element = tokenElements.appendChild(basis.cssom.setStyle(tokenDomProto.cloneNode(false), {
+      backgroundColor: bgColor,
+      outline: '1px solid ' + borderColor,
+      top: data.rect.top + 'px',
+      left: data.rect.left + 'px',
+      width: data.rect.width + 'px',
+      height: data.rect.height + 'px'
+    }));
+    data.element.appendChild(document.createTextNode(data.updates == 1 ? '' : data.updates));
   }
 
   overlayContent.appendChild(tokenElements);
 
   if (!keepOverlay)
-
+    document.body.appendChild(overlay);
+}
 
 function unhighlight(keepOverlay){
   var data;
 
   while (data = elements.pop())
+    if (data.element.parentNode)
+      data.element.parentNode.removeChild(data.element);
+
   if (!keepOverlay)
   {
     basis.cssom.classList(overlayContent).remove('hover');
-
+    if (overlay.parentNode)
+      overlay.parentNode.removeChild(overlay);
+  }
 }
 
 function updateHighlight(records){
@@ -212,6 +210,7 @@ function domTreeHighlight(root){
 module.exports = {
   startInspect: startInspect,
   endInspect: endInspect,
+  inspectMode: inspectMode,
   isActive: function(){
     return !!inspectMode;
   }

src/devpanel/inspector/l10n.js

@@ -15,22 +15,33 @@ var colorPicker = require('./colorPicker.js');
 var transport = require('../api/transport.js');
 
 var elements = [];
-var inspectMode;
+var inspectMode = new basis.data.Value({ value: false });
 
 var overlayNode = new basis.ui.Node({
   template: resource('./template/l10n_overlay.tmpl'),
+  hover: new basis.Token(false),
+  hide: new basis.Token(false),
+  top: new basis.Token(0),
+  left: new basis.Token(0),
+  binding: {
+    hover: 'hover',
+    hide: 'hide',
+    top: 'top',
+    left: 'left'
+  },
   action: {
     mouseover: function(e){
-      basis.cssom.classList(overlayContent).add('hover');
+      this.hover.set(true);
     },
     mouseout: function(e){
-      basis.cssom.classList(overlayContent).remove('hover');
+      this.hover.set(false);
     }
   }
 });
 
 var overlay = overlayNode.tmpl.element;
 var overlayContent = overlayNode.tmpl.content;
+var tokenDomProto = overlayNode.tmpl.token;
 
 function pickHandler(event){
   var token = event.sender.token;
@@ -68,11 +79,10 @@ var observer = (function(){
 })();
 
 function startInspect(){
-  if (!inspectMode)
+  if (!inspectMode.value)
   {
-    basis.cssom.classList(document.body).add('devpanel-inspectMode');
     updateOnScroll();
-    inspectMode = true;
+    inspectMode.set(true);
     highlight();
 
     basis.dom.event.addGlobalHandler('scroll', updateOnScroll);
@@ -94,13 +104,11 @@ function startInspect(){
   }
 }
 function endInspect(){
-  if (inspectMode)
+  if (inspectMode.value)
   {
     if (observer)
       observer.disconnect();
 
-    basis.cssom.classList(document.body).remove('devpanel-inspectMode');
-
     basis.dom.event.removeGlobalHandler('scroll', updateOnScroll);
     basis.dom.event.removeHandler(window, 'resize', updateOnResize);
     inspectBasisEvent.releaseEvent('mousedown');
@@ -109,26 +117,27 @@ function endInspect(){
     inspectBasisEvent.releaseEvent('click');
 
     unhighlight();
-    inspectMode = false;
+    inspectMode.set(false);
     transport.sendData('endInspect', 'l10n');
   }
 }
 
 function updateOnScroll(event){
   var scrollElement = document.compatMode == 'CSS1Compat' ? document.documentElement : document.body;
-  overlayContent.style.top = -(global.pageYOffset || scrollElement.scrollTop) + 'px';
-  overlayContent.style.left = -(global.pageXOffset || scrollElement.scrollLeft) + 'px';
 
-  if (event && event.target !== document)
+  overlayNode.top.set(global.pageYOffset || scrollElement.scrollTop);
+  overlayNode.left.set(global.pageXOffset || scrollElement.scrollLeft);
+
+  //if (event && event.target !== document)
     highlight(true);
 }
 
 var resizeTimer;
 function updateOnResize(){
   clearTimeout(resizeTimer);
-  basis.cssom.classList(overlayContent).add('hide');
+  overlayNode.hide.set(true);
   resizeTimer = setTimeout(function(){
-    basis.cssom.classList(overlayContent).remove('hide');
+    overlayNode.hide.set(false);
     highlight(true);
   }, 100);
 }
@@ -152,7 +161,7 @@ function unhighlight(keepOverlay){
 
   if (!keepOverlay)
   {
-    basis.cssom.classList(overlayContent).remove('hover');
+    overlayNode.hover.set(false);
     basis.dom.remove(overlay);
   }
 }
@@ -189,16 +198,13 @@ function addTokenToHighlight(token, ref, domNode){
       var color = getColorForDictionary(token.dictionary.resource.url);
       var bgColor = 'rgba(' + color.join(',') + ', .3)';
       var borderColor = 'rgba(' + color.join(',') + ', .6)';
-      var element = overlayContent.appendChild(basis.dom.createElement({
-        description: '.devpanel-l10n-token',
-        css: {
-          backgroundColor: bgColor,
-          outline: '1px solid ' + borderColor,
-          top: rect.top + 'px',
-          left: rect.left + 'px',
-          width: rect.width + 'px',
-          height: rect.height + 'px'
-        }
+      var element = overlayContent.appendChild(basis.cssom.setStyle(tokenDomProto.cloneNode(false), {
+        backgroundColor: bgColor,
+        outline: '1px solid ' + borderColor,
+        top: rect.top + 'px',
+        left: rect.left + 'px',
+        width: rect.width + 'px',
+        height: rect.height + 'px'
       }));
 
       element.token = token;
@@ -252,6 +258,7 @@ function getColorForDictionary(dictionaryName){
 module.exports = {
   startInspect: startInspect,
   endInspect: endInspect,
+  inspectMode: inspectMode,
   isActive: function(){
     return !!inspectMode;
   }

src/devpanel/inspector/template.js

@@ -13,7 +13,7 @@ var document = global.document;
 var transport = require('../api/transport.js');
 
 var inspectDepth = 0;
-var inspectMode;
+var inspectMode = new basis.data.Value({ value: false });
 
 var overlay = basis.dom.createElement({
   css: {
@@ -172,7 +172,7 @@ var nodeInfoPopup = basis.fn.lazyInit(function(){
 });
 
 function startInspect(){
-  if (!inspectMode)
+  if (!inspectMode.value)
   {
     basis.dom.event.addGlobalHandler('mousemove', mousemoveHandler);
     basis.dom.event.addGlobalHandler('mousewheel', mouseWheelHandler);
@@ -181,14 +181,13 @@ function startInspect(){
     inspectBasisEvent.captureEvent('contextmenu', endInspect);
     inspectBasisEvent.captureEvent('click', pickHandler);
 
-    basis.cssom.classList(document.body).add('devpanel-inspectMode');
-    inspectMode = true;
+    inspectMode.set(true);
     transport.sendData('startInspect', 'template');
   }
 }
 
 function endInspect(){
-  if (inspectMode)
+  if (inspectMode.value)
   {
     basis.dom.event.removeGlobalHandler('mousemove', mousemoveHandler);
     basis.dom.event.removeGlobalHandler('mousewheel', mouseWheelHandler);
@@ -197,8 +196,7 @@ function endInspect(){
     inspectBasisEvent.releaseEvent('contextmenu');
     inspectBasisEvent.releaseEvent('click');
 
-    basis.cssom.classList(document.body).remove('devpanel-inspectMode');
-    inspectMode = false;
+    inspectMode.set(false);
     transport.sendData('endInspect', 'template');
     pickupTarget.set();
   }
@@ -269,6 +267,7 @@ function mouseWheelHandler(event){
 module.exports = {
   startInspect: startInspect,
   endInspect: endInspect,
+  inspectMode: inspectMode,
   isActive: function(){
     return !!inspectMode;
   }

src/devpanel/inspector/template/heat_overlay.css

@@ -1,4 +1,4 @@
-#devpanel-heat-overlay
+.overlay
 {
   position: fixed;
   pointer-events: none;
@@ -10,22 +10,20 @@
   background: rgba(110,163,217,0.2);
   background1: rgba(255,255,255,0.2);
 }
-#devpanel-heat-overlay__content
+.content
 {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 1;
-    -webkit-transition: opacity .3s;
   transition: opacity .3s;
 }
-#devpanel-heat-overlay__content.hide
+.content_hide
 {
   opacity: 0;
-    -webkit-transition: opacity .15s;
   transition: opacity .15s;
 }
-#devpanel-heat-overlay__content .devpanel-heat-token
+.token
 {
   position: absolute;
   z-index: 65000;