Skip to content
This repository has been archived by the owner on Jun 6, 2019. It is now read-only.

Commit

Permalink
first commit alpha version
Browse files Browse the repository at this point in the history
  • Loading branch information
exolution committed Oct 8, 2016
1 parent d394e83 commit 3f44d75
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 120 deletions.
14 changes: 10 additions & 4 deletions chrome/shell/src/devtool.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,17 @@ chrome.devtools.network.onNavigated.addListener(function () {
});
function createPanel() {
if (!panelsCreated) {
chrome.devtools.panels.create('Weex', '/icons/16.png', 'panel.html', function (panel) {
panelsCreated = true;
console.log(panel);
chrome.devtools.inspectedWindow.eval('$WeexInspectorProxy', function (proxy, exceptionInfo) {
if (!exceptionInfo) {
document.body.innerHTML = '<h3>No weex environment detected!</h3>';
chrome.devtools.panels.create('Weex', '/icons/16.png', 'panel.html', function (panel) {
panelsCreated = true;
console.log(panel);

})
}
});

})
}
}
createPanel();
225 changes: 109 additions & 116 deletions chrome/shell/src/inspector.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,135 +5,128 @@ import {DocumentNode} from "./component/NodeRender";
import Port from "./component/Port";
import StyleRender from "./component/StyleRender";


chrome.devtools.inspectedWindow.eval('$WeexInspectorProxy', function (proxy, exceptionInfo) {
if (exceptionInfo) {
document.body.innerHTML = '<h3>No weex environment detected!</h3>';
}
else {
var port = new Port(proxy);
var id = 5;
port.send({id: 0, method: 'Runtime.enable'});
port.send({id: 1, method: 'DOM.enable'});
port.send({id: 2, method: 'CSS.enable'});
port.send({id: 3, method: 'DOM.getDocument'});
port.send({id: 4, method: 'Runtime.run'});
var _highlightTimer;
var currentStyleNodeId = -1;
var requestStyleId = -1, requestComputedStyleId = -1;
var lastSelectedNode;

function findParent(node) {
var cur = node;
do {
if (cur.tagName == 'LI') {
return cur;
}

var port = new Port(proxy);
var id = 5;
port.send({id: 0, method: 'Runtime.enable'});
port.send({id: 1, method: 'DOM.enable'});
port.send({id: 2, method: 'CSS.enable'});
port.send({id: 3, method: 'DOM.getDocument'});
port.send({id: 4, method: 'Runtime.run'});
var _highlightTimer;
var currentStyleNodeId = -1;
var requestStyleId = -1, requestComputedStyleId = -1;
var lastSelectedNode;

function findParent(node) {
var cur = node;
do {
if (cur.tagName == 'LI') {
return cur;
}
while (cur = cur.parentNode);
return null;
}
while (cur = cur.parentNode);
return null;
}

document.querySelector('#elements').addEventListener('click', function (event) {
var li = findParent(event.target);
if (li) {
if (currentStyleNodeId != li._nodeId) {
if (lastSelectedNode)lastSelectedNode.className = lastSelectedNode.className.replace(/\s*selected/g, '');

li.className += ' selected';
lastSelectedNode = li;
requestStyleId = id++;
requestComputedStyleId = id++;
currentStyleNodeId = li._nodeId;
port.send({
"id": requestStyleId,
"method": "CSS.getMatchedStylesForNode",
"params": {"nodeId": li._nodeId}
})
port.send({
"id": requestComputedStyleId,
"method": "CSS.getComputedStyleForNode",
"params": {"nodeId": li._nodeId}
})
}
}
});
document.querySelector('#elements').addEventListener('mouseover', function (event) {
var li = findParent(event.target);
if (li) {
clearTimeout(_highlightTimer);
document.querySelector('#elements').addEventListener('click', function (event) {
var li = findParent(event.target);
if (li) {
if (currentStyleNodeId != li._nodeId) {
if (lastSelectedNode)lastSelectedNode.className = lastSelectedNode.className.replace(/\s*selected/g, '');

li.className += ' selected';
lastSelectedNode = li;
requestStyleId = id++;
requestComputedStyleId = id++;
currentStyleNodeId = li._nodeId;
port.send({
"id": requestStyleId,
"method": "CSS.getMatchedStylesForNode",
"params": {"nodeId": li._nodeId}
})
port.send({
"id": id++,
"method": "DOM.highlightNode",
"params": {"highlightConfig": highlightConfig, "nodeId": li._nodeId}
"id": requestComputedStyleId,
"method": "CSS.getComputedStyleForNode",
"params": {"nodeId": li._nodeId}
})
}

})
window.onblur = function () {
port.send({"id": id++, "method": "DOM.hideHighlight"});
}
document.querySelector('#elements').addEventListener('mouseout', function (event) {
var li = findParent(event.target);
if (li) {
clearTimeout(_highlightTimer);
_highlightTimer = setTimeout(function () {
port.send({"id": id++, "method": "DOM.hideHighlight"});
}, 200)
}

})
port.on('data', function (data) {

if (data.id == 3 && data.result) {
var documentRoot = new DocumentNode(data.result.root);
console.log(data.result.root);
document.getElementById('elements').appendChild(documentRoot.render());
/* var list=document.querySelectorAll('li');
for(var i=0,l=list.length;i<l;i++){
list[i].onmouseover=function(){
clearTimeout(_highlightTimer);
port.send({"id":id++,"method":"DOM.highlightNode","params":{"highlightConfig":highlightConfig,"nodeId":this._nodeId}})
};
list[i].onmouseout=function(){
clearTimeout(_highlightTimer);
_highlightTimer=setTimeout(function(){
port.send({"id":id++,"method":"DOM.highlightNode"});
},200)
}
list[i].onclick=function(){
}
}*/
}
else if (data.id == requestStyleId && data.result) {

var stylesHtml = '', stylesRender = new StyleRender();
data.result.matchedCSSRules.forEach(function (cssRule) {
stylesHtml += stylesRender.render(cssRule.rule);
});
document.getElementById('styles_panel').innerHTML = stylesHtml;
});
document.querySelector('#elements').addEventListener('mouseover', function (event) {
var li = findParent(event.target);
if (li) {
clearTimeout(_highlightTimer);
port.send({
"id": id++,
"method": "DOM.highlightNode",
"params": {"highlightConfig": highlightConfig, "nodeId": li._nodeId}
})
}

}
else if (data.id == requestComputedStyleId && data.result) {
var computedStyle = {};
data.result.computedStyle.forEach(function (style) {
computedStyle[style.name] = style.value;
});
document.getElementById('metrics').innerHTML = renderMetrics(computedStyle);
}
else if (data.method == 'DOM.childNodeInserted') {
DocumentNode.all[data.params.parentNodeId].insertChild(data.params.previousNodeId, data.params.node);
}
else if (data.method == 'DOM.childNodeRemoved') {
DocumentNode.all[data.params.parentNodeId].removeChild(data.params.nodeId);
}
})
})
window.onblur = function () {
port.send({"id": id++, "method": "DOM.hideHighlight"});
}
document.querySelector('#elements').addEventListener('mouseout', function (event) {
var li = findParent(event.target);
if (li) {
clearTimeout(_highlightTimer);
_highlightTimer = setTimeout(function () {
port.send({"id": id++, "method": "DOM.hideHighlight"});
}, 200)
}

})
port.on('data', function (data) {

if (data.id == 3 && data.result) {
var documentRoot = new DocumentNode(data.result.root);
console.log(data.result.root);
document.getElementById('elements').appendChild(documentRoot.render());
/* var list=document.querySelectorAll('li');
for(var i=0,l=list.length;i<l;i++){
list[i].onmouseover=function(){
clearTimeout(_highlightTimer);
port.send({"id":id++,"method":"DOM.highlightNode","params":{"highlightConfig":highlightConfig,"nodeId":this._nodeId}})
};
list[i].onmouseout=function(){
clearTimeout(_highlightTimer);
_highlightTimer=setTimeout(function(){
port.send({"id":id++,"method":"DOM.highlightNode"});
},200)
}
list[i].onclick=function(){
}
}*/
}
else if (data.id == requestStyleId && data.result) {

}
var stylesHtml = '', stylesRender = new StyleRender();
data.result.matchedCSSRules.forEach(function (cssRule) {
stylesHtml += stylesRender.render(cssRule.rule);
});
document.getElementById('styles_panel').innerHTML = stylesHtml;

}
else if (data.id == requestComputedStyleId && data.result) {
var computedStyle = {};
data.result.computedStyle.forEach(function (style) {
computedStyle[style.name] = style.value;
});
document.getElementById('metrics').innerHTML = renderMetrics(computedStyle);
}
else if (data.method == 'DOM.childNodeInserted') {
DocumentNode.all[data.params.parentNodeId].insertChild(data.params.previousNodeId, data.params.node);
}
else if (data.method == 'DOM.childNodeRemoved') {
DocumentNode.all[data.params.parentNodeId].removeChild(data.params.nodeId);
}
});
});

var highlightConfig = {
"showInfo": true,
"showRulers": false,
Expand Down

0 comments on commit 3f44d75

Please sign in to comment.