aslushnikov/console-search-reveals-messages.html

## console-search-reveals-messages.html
<!--
Developer Tools has a lot of different tests. Here we'll go through the most
common type which tests Developer Tools front-end.

Every front-end test is just a webpage. The testing system (which is essentially a special
lightweight browser, content_shell) opens this page, and then opens Developer Tools to inspect
it.

 -->
<html>
<head>
<!-- inspector-test.js defines important functions for test writing, it is imported in every test. -->
<script src="../../http/tests/inspector/inspector-test.js"></script>
<!-- console-test.js defines helper functions for console test writing.  -->
<script src="../../http/tests/inspector/console-test.js"></script>
<script>
function populateConsoleWithMessages()
{
    /**
     * Generate some sample console messages.
     */
    for (var i = 0; i < 200; ++i)
        console.log("Message #" + i);
    console.log("LAST MESSAGE");
    /**
     * Launch testing code.
     */
    runTest();
}

/**
 * This one is important: test-specific logic should be placed into the function called "test".
 *
 * Function "test" is stringified and evaluated in the context of Developer Tools frontend. The
 * same happens to all the functions in the page global scope with the "initialize_" prefix, e.g
 * initialize_consoleTest defined in console-test.js
 */
function test()
{
    /**
     * TIME-SAVER TIP
     * The test doesn't produce any output if it timeouts, which makes it very hard to debug.
     * One popular way of solving this issue is adding setTimeout(InspectorTest.competeTest.bind(InspectorTest), 2000)
     * in the very beginning of the function to force-complete the test after 2 seconds.
     */

    /**
     * The following code is executed in the Developer Tools front-end context, so its trivial to reach all the
     * components we want to test.
     */
    var consoleView = WebInspector.ConsolePanel._view();
    var viewport = consoleView._viewport;
    const maximumViewportMessagesCount = 150;
    /**
     * The convention is to call InspectorTest.completeTest to report test completion.
     * InspectorTest.runTestSuite runs a bunch of functions in the specified order and
     * calls InspectorTest.completeTest after the last.
     */
    InspectorTest.runTestSuite([
        /**
         * Pay attention to the "next" argument - its a callback function which should be called to proceed
         * to the next function. Forgetting to call "next" always results in the test timeout.
         */
        function verifyViewportIsTallEnough(next)
        {
            viewport.invalidate();
            var viewportMessagesCount = viewport._lastVisibleIndex - viewport._firstVisibleIndex;
            if (viewportMessagesCount > maximumViewportMessagesCount) {
                InspectorTest.addResult(String.sprintf("Test cannot be run because viewport could fit %d messages which is more then maxiumum of %d.", viewportMessagesCount, maximumViewportMessagesCount));
                InspectorTest.completeTest();
                return;
            }
            next();
        },

        function scrollConsoleToTop(next)
        {
            viewport.forceScrollItemToBeFirst(0);
            dumpTop();
            next();
        },

        function testFindLastMessage(next)
        {
            consoleView._searchableView._searchInputElement.value = "LAST MESSAGE";
            consoleView._searchableView.showSearchField();
            consoleView._searchableView.handleFindNextShortcut();
            dumpBottom();
            next();
        }
    ]);

    /**
     * Just a few helper functions.
     */
    function dumpTop()
    {
        viewport.refresh();
        InspectorTest.addResult("first visible message index: " + viewport.firstVisibleIndex());
    }

    function dumpBottom()
    {
        viewport.refresh();
        InspectorTest.addResult("last visible message index: " + viewport.lastVisibleIndex());
    }
}
</script>
</head>
<body onload="populateConsoleWithMessages()">
<p>
    Tests that console viewport reveals messages on searching.
</p>
</body>
</html>
	<!--
	Developer Tools has a lot of different tests. Here we'll go through the most
	common type which tests Developer Tools front-end.

	Every front-end test is just a webpage. The testing system (which is essentially a special
	lightweight browser, content_shell) opens this page, and then opens Developer Tools to inspect
	it.

	-->
	<html>
	<head>
	<!-- inspector-test.js defines important functions for test writing, it is imported in every test. -->
	<script src="../../http/tests/inspector/inspector-test.js"></script>
	<!-- console-test.js defines helper functions for console test writing. -->
	<script src="../../http/tests/inspector/console-test.js"></script>
	<script>
	function populateConsoleWithMessages()
	{
	/**
	* Generate some sample console messages.
	*/
	for (var i = 0; i < 200; ++i)
	console.log("Message #" + i);
	console.log("LAST MESSAGE");
	/**
	* Launch testing code.
	*/
	runTest();
	}

	/**
	* This one is important: test-specific logic should be placed into the function called "test".
	*
	* Function "test" is stringified and evaluated in the context of Developer Tools frontend. The
	* same happens to all the functions in the page global scope with the "initialize_" prefix, e.g
	* initialize_consoleTest defined in console-test.js
	*/
	function test()
	{
	/**
	* TIME-SAVER TIP
	* The test doesn't produce any output if it timeouts, which makes it very hard to debug.
	* One popular way of solving this issue is adding setTimeout(InspectorTest.competeTest.bind(InspectorTest), 2000)
	* in the very beginning of the function to force-complete the test after 2 seconds.
	*/

	/**
	* The following code is executed in the Developer Tools front-end context, so its trivial to reach all the
	* components we want to test.
	*/
	var consoleView = WebInspector.ConsolePanel._view();
	var viewport = consoleView._viewport;
	const maximumViewportMessagesCount = 150;
	/**
	* The convention is to call InspectorTest.completeTest to report test completion.
	* InspectorTest.runTestSuite runs a bunch of functions in the specified order and
	* calls InspectorTest.completeTest after the last.
	*/
	InspectorTest.runTestSuite([
	/**
	* Pay attention to the "next" argument - its a callback function which should be called to proceed
	* to the next function. Forgetting to call "next" always results in the test timeout.
	*/
	function verifyViewportIsTallEnough(next)
	{
	viewport.invalidate();
	var viewportMessagesCount = viewport._lastVisibleIndex - viewport._firstVisibleIndex;
	if (viewportMessagesCount > maximumViewportMessagesCount) {
	InspectorTest.addResult(String.sprintf("Test cannot be run because viewport could fit %d messages which is more then maxiumum of %d.", viewportMessagesCount, maximumViewportMessagesCount));
	InspectorTest.completeTest();
	return;
	}
	next();
	},

	function scrollConsoleToTop(next)
	{
	viewport.forceScrollItemToBeFirst(0);
	dumpTop();
	next();
	},

	function testFindLastMessage(next)
	{
	consoleView._searchableView._searchInputElement.value = "LAST MESSAGE";
	consoleView._searchableView.showSearchField();
	consoleView._searchableView.handleFindNextShortcut();
	dumpBottom();
	next();
	}
	]);

	/**
	* Just a few helper functions.
	*/
	function dumpTop()
	{
	viewport.refresh();
	InspectorTest.addResult("first visible message index: " + viewport.firstVisibleIndex());
	}

	function dumpBottom()
	{
	viewport.refresh();
	InspectorTest.addResult("last visible message index: " + viewport.lastVisibleIndex());
	}
	}
	</script>
	</head>
	<body onload="populateConsoleWithMessages()">
	<p>
	Tests that console viewport reveals messages on searching.
	</p>
	</body>
	</html>