DevTools: Add some devtools manual tests.

Review URL: http://codereview.chromium.org/385134

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@32053 0039d316-1c4b-4281-b951-d872f2087c98

19 files changed, 445 insertions, 0 deletions

diff --git a/chrome/browser/debugger/manual_tests/console-call-line-numbers.html b/chrome/browser/debugger/manual_tests/console-call-line-numbers.html
new file mode 100644
index 0000000..98bb918
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/console-call-line-numbers.html
@@ -0,0 +1,15 @@
+<script>
+    console.info("Test console.info");
+    console.log("Test console.log");
+    console.warn("Test console.warn");
+    console.error("Test console.error");
+    console.time("Test console.time");
+    console.timeEnd("Test console.time");
+    console.count("Test console.count");
+    console.assert(false, "Test console.assert");
+</script>
+<script src="resources/script-console-calls.js"></script>
+
+<p>To test, open the DevTools's Console (Ctrl+Shift+J) and verify that all console messages have correct
+resource URLs and line numbers. Also verify that errors and warnings show up inline as bubbles in the
+Resource panel file list and each individual resource view.</p>
diff --git a/chrome/browser/debugger/manual_tests/debugger-exception-on-load.html b/chrome/browser/debugger/manual_tests/debugger-exception-on-load.html
new file mode 100644
index 0000000..ef2384f
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-exception-on-load.html
@@ -0,0 +1,5 @@
+<script>
+debugger; // You should see this code and execution line in the Scripts panel. Click Resume (Play/Pause button to the right).
+</script>
+
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page. You should see this file and execution line in the Scripts panel.</p>
diff --git a/chrome/browser/debugger/manual_tests/debugger-execution-while-paused.html b/chrome/browser/debugger/manual_tests/debugger-execution-while-paused.html
new file mode 100644
index 0000000..f33abea
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-execution-while-paused.html
@@ -0,0 +1,17 @@
+<script>
+function stepOne()
+{
+    console.log(1);
+}
+
+function stepTwo()
+{
+    alert("Test failed. The second button event still fired.");
+}
+</script>
+
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page. Set a break point inside the stepOne() function.
+Now click the Step One button in the page. The breakpoint should be hit. While paused at the breakpoint
+click on the Step Two button. You should not see an alert dialog. Continue script.</p>
+<button onclick="stepOne()">Step One</button><br><br>
+<button onclick="stepTwo()">Step Two</button>
diff --git a/chrome/browser/debugger/manual_tests/debugger-pause-on-else-statements.html b/chrome/browser/debugger/manual_tests/debugger-pause-on-else-statements.html
new file mode 100644
index 0000000..3c80a43
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-pause-on-else-statements.html
@@ -0,0 +1,16 @@
+<script>
+function test()
+{
+    debugger;
+}
+
+if (false)
+    debugger; // This should not be hit.
+else
+    test();
+</script>
+
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page. When the debugger breaks, select the (anonymous function) node
+in the call stack, you should see the execution line on the call to test().</p>
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/chrome/browser/debugger/manual_tests/debugger-pause-on-for-in-statements.html b/chrome/browser/debugger/manual_tests/debugger-pause-on-for-in-statements.html
new file mode 100644
index 0000000..79f7983
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-pause-on-for-in-statements.html
@@ -0,0 +1,16 @@
+<script>
+function test()
+{
+    debugger;
+}
+
+var object = { test: 1 };
+
+for (var property in object)
+    test();
+</script>
+
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page. When the debugger breaks, select
+the (anonymous function) node in the call stack, you should see the execution line on the call to test().
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/chrome/browser/debugger/manual_tests/debugger-pause-on-for-statements.html b/chrome/browser/debugger/manual_tests/debugger-pause-on-for-statements.html
new file mode 100644
index 0000000..1a9e274
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-pause-on-for-statements.html
@@ -0,0 +1,14 @@
+<script>
+function test()
+{
+    debugger;
+}
+
+for (var i = 0; i < 1; ++i)
+    test();
+</script>
+
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page. When the debugger breaks, select the
+(anonymous function) node in the call stack, you should see the execution line on the call to test().</p>
+<br><br>
+Also set a breakpoint on the call to test(), and reload. It should break before the test() function is called.
diff --git a/chrome/browser/debugger/manual_tests/debugger-step-on-do-while-statements.html b/chrome/browser/debugger/manual_tests/debugger-step-on-do-while-statements.html
new file mode 100644
index 0000000..f60dd6a
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-step-on-do-while-statements.html
@@ -0,0 +1,27 @@
+<script src="resources/loop-statements.js"></script>
+<script>            
+function runDoWhile()
+{
+    /* place breakpoint on next line and click continue */ debugger;
+    do {
+        statement();
+        increment();
+    } while (condition());
+}
+
+</script>
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page.
+<br><br>
+Before running the tests please perform the following:
+Make sure the execution is not paused in the debugger.<br>
+Click the button and when the debugger breaks, set a breakpoint on the first line in the loop
+(as indicated by the comment), and click continue.<br>
+The debugger should stop at the beggining of the loop.<br>
+The above actions should be performed before <b>each</b> of the following tests.</p>
+<br><br>
+<input type="button" value="run do-while" onclick="initialize();runDoWhile()"/>
+<br><br>
+TEST 1: Click 'continue'. Execution should continue without stopping on the loop breakpoint again.<br>
+TEST 2: Click 'Step into'. Debugger should step inside each function.<br>
+TEST 3: 'Step over' to the end of the loop (and 'while' statement) and step over again. Debugger
+should go to the beggining of the loop.<br>
diff --git a/chrome/browser/debugger/manual_tests/debugger-step-on-for-in-statements.html b/chrome/browser/debugger/manual_tests/debugger-step-on-for-in-statements.html
new file mode 100644
index 0000000..e360394
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-step-on-for-in-statements.html
@@ -0,0 +1,35 @@
+<script>
+var myObj = {test : 1};
+function getObject()
+{
+    return myObj;
+}
+
+function statement() {
+    ;
+}
+
+function runForIn()
+{
+    /* place breakpoint on next line and click continue */ debugger;
+    for (var property in getObject())
+        statement();
+}
+
+</script>
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page.
+<br><br>
+Before running the tests please perform the following:
+Make sure the execution is not paused in the debugger.<br>
+Click the button and when the debugger breaks, set a breakpoint on the first line in the loop
+(as indicated by the comment), and click continue.<br>
+The debugger should stop at the beggining of the loop.<br>
+The above actions should be performed before <b>each</b> of the following tests.</p>
+<br><br>
+<input type="button" value="run for-in" onclick="runForIn()"/>
+<br><br>
+TEST 1: Click 'continue'. Execution should continue without stopping on the loop breakpoint again.<br>
+TEST 2: Click 'Step over'. Debugger should step inside the loop to the next statement line.<br>
+TEST 3: Click 'Step into'. Debugger should step into 'getObject' function.<br>
+TEST 4: 'Step over' to the statement line and then 'Step over' again. Debugger should pause on
+the for-in loop again.<br>
diff --git a/chrome/browser/debugger/manual_tests/debugger-step-on-for-statements.html b/chrome/browser/debugger/manual_tests/debugger-step-on-for-statements.html
new file mode 100644
index 0000000..75289e5f
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-step-on-for-statements.html
@@ -0,0 +1,25 @@
+<script src="resources/loop-statements.js"></script>
+<script>        
+function runFor()
+{
+    /* place breakpoint on next line and click continue */ debugger;
+    for (initialize(); condition(); increment())
+        statement();
+}
+</script>
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page.
+<br><br>
+Before running the tests please perform the following:
+Make sure the execution is not paused in the debugger.<br>
+Click the button and when the debugger breaks, set a breakpoint on the first line in the loop
+(as indicated by the comment), and click continue.<br>
+The debugger should stop at the beggining of the loop.<br>
+The above actions should be performed before <b>each</b> of the following tests.</p>
+<br><br>
+<input type="button" value="run for" onclick="runFor()"/>
+<br><br>
+TEST 1: Click 'continue'. Execution should continue without stopping on the loop breakpoint again.<br>
+TEST 2: Click 'Step over'. Debugger should step inside the loop to the next statement line.<br>
+TEST 3: Click 'Step into'. Debugger should step into 'initialize' function. Click 'Step into' until
+outside of the 'initialize' function - debugger should enter the 'condition' function.<br>
+function.<br>
diff --git a/chrome/browser/debugger/manual_tests/debugger-step-on-while-statements.html b/chrome/browser/debugger/manual_tests/debugger-step-on-while-statements.html
new file mode 100644
index 0000000..7967172
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-step-on-while-statements.html
@@ -0,0 +1,28 @@
+<script src="resources/loop-statements.js"></script>
+<script>            
+function runWhile()
+{
+    /* place breakpoint on next line and click continue */ debugger;
+    while (condition()) {
+        statement();
+        increment();
+    }
+}
+
+</script>
+<p>To test, open the DevTools (Ctrl+Shift+I) and reload the page.
+<br><br>
+Before running the tests please perform the following:
+Make sure the execution is not paused in the debugger.<br>
+Click the button and when the debugger breaks, set a breakpoint on the first line in the loop
+(as indicated by the comment), and click continue.<br>
+The debugger should stop at the beggining of the loop.<br>
+The above actions should be performed before <b>each</b> of the following tests.</p>
+<br><br>
+<input type="button" value="run while" onclick="initialize();runWhile()"/>
+<br><br>
+TEST 1: Click 'continue'. Execution should continue without stopping on the loop breakpoint again.<br>
+TEST 2: Click 'Step over'. Debugger should step inside the loop to the next statement line.<br>
+TEST 3: Click 'Step into'. Debugger should step into 'condition' function.<br>
+step over to the beggingin of the while loop again. Click 'Step into'. Debugger should step into
+the 'condition' function.<br>
diff --git a/chrome/browser/debugger/manual_tests/debugger-watch-expressions.html b/chrome/browser/debugger/manual_tests/debugger-watch-expressions.html
new file mode 100644
index 0000000..a2e9258
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/debugger-watch-expressions.html
@@ -0,0 +1,79 @@
+<p>Test for watched expression</p>
+
+<p>To begin test, open DevTools, go the Scripts Panel 
+and then click this link: <a href="javascript:runTest()">[begin test]</a>.
+
+<p>Perform the following steps, and note the expected results:
+    
+<ol>
+    
+<li><p>After clicking the link above, you should now be paused in the body of 
+the test method, thanks to the <code>debugger</code> statement.
+
+<li><p>Add the following expressions to the "Watch Expressions" section of the
+Scripts panel sidebar pane: "<code>this</code>", "<code>a</code>", 
+"<code>b</code>", "<code>c</code>" and "<code>d</code>". Do <b>NOT</b> enter the quotes.
+
+<li><p>The values of the expressions as shown in the window should be 
+<code>Object</code> for <code>this</code>, <code>undefined</code> for
+the <code>a</code>, <code>b</code>, and <code>c</code> variables, and a 
+value of <code>ReferenceError: d is not defined</code>
+for the <code>d</code> variable.
+
+<li><p>Note that the value for <code>d</code> should not change for the life of 
+the test, as the variable <code>d</code> is never introduced in the program.
+
+<li><p>Step through the code, and you'll see the values of <code>a</code>,
+<code>b</code>, and <code>c</code> change, as the variables are assigned.
+Also note that as the scope changes due to the function invocation, values
+will be changed to refer to their current scope.  The <code>this</code>
+expression will change when the method is invoked on the object constructed by
+the test.
+
+<li><p>Click different stack frames in the Call Stack section to ensure the
+expressions change value appropriately as the current stack frame changes.
+
+</ol>
+
+<script>
+function runTest() {
+    
+    // a nested function
+    function subFunction() {
+        debugger;
+        var a = "a in subFunction()";
+        
+        subSubFunction();
+        
+        // another nested function
+        function subSubFunction() {
+            debugger;
+            var b = "b in subSubFunction()";
+        }
+    }
+    
+    // a class
+    function aClass() {
+        this.x = "xxx";
+        this.y = "yyy";
+    }
+    
+    aClass.prototype.aMethod = function() {
+        debugger;
+        var c = "c in aMethod()";
+    }
+    
+    // main logic
+    debugger;
+    
+    var a = "a in runTest()";
+    var b = "b in runTest()";
+    var c = "c in runTest()";
+    
+    subFunction();
+    
+    var object = new aClass();
+    object.aMethod();
+    
+}
+</script>
diff --git a/chrome/browser/debugger/manual_tests/dom-mutation.html b/chrome/browser/debugger/manual_tests/dom-mutation.html
new file mode 100644
index 0000000..a03b03c
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/dom-mutation.html
@@ -0,0 +1,32 @@
+<script>
+function test1() {
+    document.getElementById("test").src = "resources/mutate-frame.html";
+}
+
+function test2() {
+    document.getElementById("test").src = "resources/mutate-frame-2.html";
+}
+
+var count = 1;
+function run() {
+    var container = document.getElementById("test2");
+    var div = document.createElement("div");
+    div.textContent = "Testing " + (count++);
+    container.appendChild(div);
+    if (count > 10)
+        container.removeChild(container.firstChild);
+}
+
+setInterval(run, 1000);
+</script>
+<p>To begin test, open DevTools, Elements Panel and watch the DOM change to match the page.
+Clicking the buttons will navigate the subframe, and the all the subframe child nodes should change.
+Expand DOM nodes in the Elements Panel to see new nodes appearing in the list live.</p>
+<div style="clear: both">
+<button onclick="test1()">Test Frame 1</button>
+<button onclick="test2()">Test Frame 2</button>
+</div>
+<div style="float: left">
+<iframe id="test" src="resources/mutate-frame.html" width="200" height="300"></iframe>
+</div>
+<div style="float: left; margin-left: 10px;" id="test2"></div>
diff --git a/chrome/browser/debugger/manual_tests/error-warning-count.html b/chrome/browser/debugger/manual_tests/error-warning-count.html
new file mode 100644
index 0000000..3296742
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/error-warning-count.html
@@ -0,0 +1,58 @@
+<script>
+    function clickHandler(errors, warnings)
+    {
+        return function()
+        {
+            for (var i = 0; i < errors; ++i)
+                console.error("Error " + (i + 1));
+            for (var i = 0; i < warnings; ++i)
+                console.warn("Warning " + (i + 1));
+        }
+    }
+
+    function loaded()
+    {
+        var tests = [
+            { errors: 0, warnings: 0 },
+            { errors: 1, warnings: 0 },
+            { errors: 2, warnings: 0 },
+            { errors: 0, warnings: 1 },
+            { errors: 0, warnings: 2 },
+            { errors: 1, warnings: 1 },
+            { errors: 1, warnings: 2 },
+            { errors: 2, warnings: 1 },
+            { errors: 2, warnings: 2 },
+            { errors: 100, warnings: 100 },
+        ];
+
+        for (var i in tests) {
+            var test = tests[i];
+
+            var button = document.createElement("button");
+            var content = "";
+            if (!test.errors && !test.warnings)
+                content = "(nothing)";
+            else {
+                if (test.errors > 0)
+                    content += test.errors + " error" + (test.errors != 1 ? "s" : "");
+                if (test.warnings > 0) {
+                    if (content.length)
+                        content += ", ";
+                    content += test.warnings + " warning" + (test.warnings != 1 ? "s" : "")
+                }
+            }
+            button.innerText = content;
+            button.onclick = clickHandler(test.errors, test.warnings);
+            var p = document.createElement("p");
+            p.appendChild(button);
+            document.body.appendChild(p);
+        }
+    }
+</script>
+<body onload="loaded()">
+<p>To begin test, open DevTools and click one of the buttons below. You should
+see an error and/or warning count in the Inspector's status bar. Clicking on
+the error/warning count should open the Console. Hovering over the
+error/warning count should show you a tooltip that matches the text in the
+button you clicked.</p>
+<p>Note: You must reload the page between each button press.</p>
diff --git a/chrome/browser/debugger/manual_tests/highlight-nodes.html b/chrome/browser/debugger/manual_tests/highlight-nodes.html
new file mode 100644
index 0000000..cbeae6f
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/highlight-nodes.html
@@ -0,0 +1,23 @@
+<style>
+.skewed {
+  -webkit-transform:skew(-5deg,-5deg);
+}
+</style>
+<p>This page has basic tests of node highlighting in the inspected page. To test, load this page, open the DevTools and mouseover the nodes in the treeview of the inspector. You should see the highlights happen with the appropriate padding/border/margin/content highlights.</p>
+<div style="padding:10px; border: 10px solid; margin: 10px;">padding:10px; border: 10px; margin: 10px;</div>
+<div style="padding:10px; border: 10px solid;">padding:10px; border: 10px;</div>
+<div style="padding:10px; margin: 10px;">padding:10px; margin: 10px;</div>
+<div style="border: 10px solid; margin: 10px;">border: 10px; margin: 10px;</div>
+<div style="padding:10px">padding:10px;</div>
+<div style="border: 10px solid;">border: 10px;</div>
+<div style="margin: 10px;">margin: 10px;</div>
+<div>no padding, border, or margin</div>
+<div class=skewed style="padding:10px; border: 10px solid; margin: 10px;">-webkit-transform:skew(-5deg,-5deg); padding:10px; border: 10px; margin: 10px;</div>
+<div class=skewed style="padding:10px; border: 10px solid;">-webkit-transform:skew(-5deg,-5deg); padding:10px; border: 10px;</div>
+<div class=skewed style="padding:10px; margin: 10px;">-webkit-transform:skew(-5deg,-5deg); padding:10px; margin: 10px;</div>
+<div class=skewed style="border: 10px solid; margin: 10px;">-webkit-transform:skew(-5deg,-5deg); border: 10px; margin: 10px;</div>
+<div class=skewed style="padding:10px">-webkit-transform:skew(-5deg,-5deg); padding:10px;</div>
+<div class=skewed style="border: 10px solid;">-webkit-transform:skew(-5deg,-5deg); border: 10px;</div>
+<div class=skewed style="margin: 10px;">-webkit-transform:skew(-5deg,-5deg); margin: 10px;</div>
+<div class=skewed >-webkit-transform:skew(-5deg,-5deg); no padding, border, or margin</div>
+
diff --git a/chrome/browser/debugger/manual_tests/highlight-source-line.html b/chrome/browser/debugger/manual_tests/highlight-source-line.html
new file mode 100644
index 0000000..a56ed97
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/highlight-source-line.html
@@ -0,0 +1,3 @@
+<p>To test, open the DevTools and reload this page. Then open the Console and click the link for the markup error. You should see the line containing the error briefly highlighted in the source view.</p>
+
+<p>This line contains a markup error</i>.</p>
diff --git a/chrome/browser/debugger/manual_tests/resources/loop-statements.js b/chrome/browser/debugger/manual_tests/resources/loop-statements.js
new file mode 100644
index 0000000..cbb4e0d
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/resources/loop-statements.js
@@ -0,0 +1,22 @@
+var i;
+var a;
+
+function initialize()
+{
+    i = false;
+}
+
+function condition()
+{
+    return !i;
+}
+
+function increment()
+{
+    i = !i;
+}
+
+function statement()
+{
+    a = i;
+}
diff --git a/chrome/browser/debugger/manual_tests/resources/mutate-frame-2.html b/chrome/browser/debugger/manual_tests/resources/mutate-frame-2.html
new file mode 100644
index 0000000..9d413b9
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/resources/mutate-frame-2.html
@@ -0,0 +1,12 @@
+<script>
+var count = 1;
+function run() {
+    var div = document.createElement("div");
+    div.textContent = "Testing " + (count++);
+    document.body.appendChild(div);
+    if (count > 10)
+        document.body.removeChild(document.body.firstChild);
+}
+
+setInterval(run, 1000);
+</script>
diff --git a/chrome/browser/debugger/manual_tests/resources/mutate-frame.html b/chrome/browser/debugger/manual_tests/resources/mutate-frame.html
new file mode 100644
index 0000000..08fc656
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/resources/mutate-frame.html
@@ -0,0 +1,10 @@
+<script>
+var count = 1;
+function run() {
+    var div = document.createElement("div");
+    div.textContent = "Testing " + (count++);
+    document.body.appendChild(div);
+}
+
+setInterval(run, 1000);
+</script>
diff --git a/chrome/browser/debugger/manual_tests/resources/script-console-calls.js b/chrome/browser/debugger/manual_tests/resources/script-console-calls.js
new file mode 100644
index 0000000..9c7bc35
--- /dev/null
+++ b/chrome/browser/debugger/manual_tests/resources/script-console-calls.js
@@ -0,0 +1,8 @@
+console.info("Test console.info");
+console.log("Test console.log");
+console.warn("Test console.warn");
+console.error("Test console.error");
+console.time("Test console.time");
+console.timeEnd("Test console.time");
+console.count("Test console.count");
+console.assert(false, "Test console.assert");