google / qpp Goto Github PK
View Code? Open in Web Editor NEWQuerypoint Debugging Prototype
Home Page: http://google.github.com/qpp/
License: BSD 3-Clause "New" or "Revised" License
Querypoint Debugging Prototype
Home Page: http://google.github.com/qpp/
License: BSD 3-Clause "New" or "Revised" License
// Google BSD license http://code.google.com/google_bsd_license.html // Copyright 2012 Google Inc. [email protected] Chrome Devtools extension for Querypoint debugging prototype overview: http://google.github.com/qpp/ development: https://github.com/google/qpp/wiki/Development-Workflow
Run the test case http://localhost:8686/test/LayoutTests/Panel/clickMessages-expected.txt
Click on the yellow box on the left side of the logScrubber
We can't see the warning message.
I recall this limitation was chosen as a compromise to move forward, but I think we should test the window width and throw an error if it is too large so we don't run the test then puzzle over why its not working.
When trying to change the inspected element the mouseOver over the source won't detect the token correctly. Only 'BLOCK' tokens are selected even if mouse is over some attribute in the block.
Way to reproduce: (using demo.js)
1 - Select attribute condition.value from line 34 and click on button labeled 'lastChange' on the Querypoint Panel.
2 - Press the button in the html a couple of times, working as expected.
3 - Press the button labeled 'Click to Select Another Syntax Tree' on the panel.
4 - Try to select another attribute (eg: obj.prop in line 23). Going over the attribute will try to select the entire block.
Once we select an attribute to inspect last changes it's not possible to select another attribute to inspect.
Way to reproduce: (using demo.js)
1 - Select attribute obj.prop from line 23 and click on button labeled 'lastChange' on the Querypoint Panel.
2 - Press the button in the html a couple of times, working as expected.
3 - Press the button labeled 'Click to Select Another Syntax Tree' on the panel.
4 - Select attribute condition.value on line 34 and click on button labeled 'lastChange' on the panel.
5 - Pressing the button in the html won't track the new attribute.
Furthermore, if the first attribute is selected again, pressing the button won't track the attribute.
In master branch, when both debug flags are false in QPRuntime.js, messages appear in the console, but when last change is applied to a property the tracing isn't working.
if we run without debugging ...
TODO for next release.
Tests are missing for the features: drop down load selector, resizeable event indicators and displaying in console clicked event.
From Patrick Dubroy:
Suggestion by Patrick Dubroy
Part of the feedback from Patrick Dubroy was that the lastChange demo seems unnatural. Why would the developer select obj.prop to apply lastChange? To say this another way, the lastChange operation is intended to be an end-game accelerator but the demo does not give us a feeling for the game up to that point.
The demo would be more compelling if we started from the button click and followed the debugging logic to obj.prop.
One way to draw the connection between obj.prop and the button is with the click event handler. Thus our plans to show event turn information on the logScrubber is in line with making the demo better.
One additional observation by Patrick Dubroy: the devtools TimeLine provides a UI to event turns:
When debugging Querypoint there are two error messages regarding the key bindings, specifically for commands 'show' and 'openChainedEditor'.
The current expression based UI is very dense, making the user do a lot of thinking about the source details. A line-oriented model we be less dense. One idea: clicking/hovering a line could offer a menu of operations related to a line. A simple example:
23 var message = "I've been clicked " + obj.prop + " times";
would offer lastChange on obj.prop and allInFile.
Related: markers lines to show they have lastChange data (similar to current allInFile)
Based on feedback from Patrick Dubroy.
The fireLoad() event from QPP is running before the document.body is ready. fireLoad() was written assuming we would always hit the real load event before QPP would send the fireLoad(). With the new preprocessor version we are getting to the fireLoad() before the document is.
Currently we can only use qpd.html as our test page. To allow general pages we need to load qpd.html in the current tests and load other pages on other tests.
However currently issue #8 blocks setting the pages.
In demo.js there are three cases of variable declarations (p,message and button). When passing the mouse over these the option 'Last Change' isn't available.
Once the number of messages exceeds the size of the console area, it begins to grow. Instead it should scroll such that the latest message is at the bottom of the console area,
In this case from demo.js we trace obj.prop and condition.prop, but we cannot test the
object 'obj' against the traces at the same location as we trace. If we do, the subsequent
condition.prop trace will not be filtered.
function bar() {
if (!condition.value) {
obj.prop = 0;
}
condition.prop = 7;
}
Because otherwise the two projects are too dependent, requiring simultaneous updates or the tests fail.
When trying to develop a new test we discovered that the mutation-summary textChange observers are not disconnected.
Selecting the same attribute in different parts of the code yields different results.
Way to reproduce: (using demo.js)
1 - Select attribute obj.prop from line 23 and click on button labeled 'lastChange' on the Querypoint Panel.
2 - Press the button in the html a couple of times, working as expected.
3 - Reload the extension
4 - Select attribute obj.prop from line 35 and click on button labeled 'lastChange' on the panel.
5 - Press the button in the html a couple of times, not working.
chrome-extension://mpbflbdfncldfbjicfcfbaikknnbfmae/Panel/addEventFunctions.js
When the amount of messages in a single load is more than the size of the window, there is a compression process that allows all the messages to show on screen with useful information. At the moment this process is rather slow making it very hard to add new turns.
If instead of making all the messages occupy the whole width of the window we allow some extra room we can add extra turns without recomputing all the previous messages.
Using demo.js when pressing lastChange on obj.prop on line 23, scripts get reloaded and the html appears with 3 buttons.
I'm guessing this is because we're appending two buttons to the current html(one for each script). On the other hand, sometimes no button appears.
Don't know exactly how to reproduce. I get the 3 buttons quite frequently, and the no button is a little rare.
And make sure they can all be toggled via testRunner
Since we are using Google Code to host the Querypoint Debugger integrated extension I think it's appropiate to remove it from this project.
On start up the console is empty and there are no traces, so the novice user is a bit lost on how to get going.
Border width is measured and pixels and should be an integer number.
My primary excuse is trying to be extremely compact with horizontal space.
Sometimes log becomes to big to explore comfortably. Being able to collapse turns would allow an easier navigation.
In demo.js when selected obj.prop on line 23, doing last change, and then obj.prop on lne 35 it doesn't do anthing.
Can't test what happens other way around because of issue #2
From demo.js, lastChange on obj.prop fails because
function bar() {
if (!condition.value) {
obj.prop = 0;
}
condition.prop = 7;
}
In demo.js on function bar(), selecting last change on condition.value, then last value obj.prop, then condition.prop, when pressing the button it doesn't show last changes of the last selected property.
The same happens if the order is condition.value, condition.prop, obj.prop.
to link from the Documentation in the onOpenPanel area.
In demo.js, selecting value
in condition.value
for lastChange fails
function bar() {
if (!condition.value) {
obj.prop = 0;
}
condition.prop = 7;
}
When running under the testRunner we need to
But the page files will not be loaded by the time the select dialog appears and the test script will fail.
If the URISelector driving the file dialog monitored resource additions, then the list could be updated dynamically after the dialog appears. Then the test can succeed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.