Git Product home page Git Product logo

qpp's Introduction

qpp's People

Contributors

curcio avatar johnjbarton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

qpp's Issues

Token Events won't work after lastChange found

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.

Can't apply lastChange to two different object's properties

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.

[demo] Setup text needs improvements

From Patrick Dubroy:

  • On http://google.github.com/qpp/, I would make the demo setup the first link (before the link to the Google Code page). I first went to Google code, and then started following instructions there, but I think your demo instructions are the best thing to follow.
  • In your installation instructions (http://google.github.com/qpp/test/LayoutTests/DocGen/demoSetup.html):
    • 'set experimental extension APIs enable' should be 'enable "Experimental Extension APIs"'
    • In Step 5, it says the main menu item is "DevtoolsExtended" but it's "Querypoint Debug"

[feature] [logScrubber] Display the turn-starting events/functions

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:

  1. Open devtools on qpd.html
  2. Open TimeLine
  3. Start recording (click dot)
  4. Deselect Loading, Rendering, and Painting across the bottom.
  5. Click on the Try Me button in the demo page

Keybinding error messages

When debugging Querypoint there are two error messages regarding the key bindings, specifically for commands 'show' and 'openChainedEditor'.

[feature] Investigate line-based selection and output

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.

Sometimes we see an error message about fireLoad() and appendChild

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.

Can't debug variables.

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.

Console area grows in size

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,

reducePropertyChangesToOurObject() is not called late enough

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;
 }

lastChange fails to anything if applied to obj.prop on line 35 of demo.js

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.

Problems with large amount of messages (too slow)

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.

Load scripts only one time.

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.

Selecting three properties to view last change

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.

Allow the URISelector (file dialog) to dynamically update its list

When running under the testRunner we need to

  1. set the page being debugged,
  2. open the querypoint panel,
  3. select a file

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.