Adds an error and warning count indicator at the bottom right in the
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 May 2008 20:46:57 +0000 (20:46 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 May 2008 20:46:57 +0000 (20:46 +0000)
Inspector's status bar.

https://bugs.webkit.org/show_bug.cgi?id=18650

Initial implementation by Adam Roben.
Reviewed by Sam Weinig.

Test: manual-tests/inspector/error-warning-count.html

* English.lproj/localizedStrings.js: Added new strings.
* manual-tests/inspector/error-warning-count.html: Added.
* page/inspector/Console.js:
(WebInspector.Console.prototype.show): Don't do anything if visible.
(WebInspector.Console.prototype.hide): Don't do anything if hidden.
Temporally set properties and classes to mimic the post-animation
values so panels like Elements in their updateStatusBarItems call will
size things to fit the final location.
* page/inspector/ElementsPanel.js:
(WebInspector.ElementsPanel.prototype.updateBreadcrumbSizes):
Account for the #error-warning-count width when sizing breadcrumbs.
* page/inspector/Resource.js:
(WebInspector.Resource.prototype.set errors): Update the global error count.
(WebInspector.Resource.prototype.set warnings): Update the global warning count.
* page/inspector/inspector.css: Make .hidden's display property
!important to ensure things really hide, and added styling for the new
* page/inspector/inspector.html: Added an #error-warning-count div
in the #anchored-status-bar-items div.
* page/inspector/inspector.js:
(WebInspector.get errors): Added.
(WebInspector.set errors): Added. Calls _updateErrorAndWarningCounts.
(WebInspector.get warnings): Added.
(WebInspector.set warnings): Added. Calls _updateErrorAndWarningCounts.
(WebInspector._updateErrorAndWarningCounts): Added. Update the
(WebInspector.loaded): Add a click event listener to the
_updateErrorAndWarningCounts to display the initial error/warning counts.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@33525 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebCore/ChangeLog
WebCore/English.lproj/localizedStrings.js
WebCore/manual-tests/inspector/error-warning-count.html [new file with mode: 0644]
WebCore/page/inspector/Console.js
WebCore/page/inspector/ElementsPanel.js
WebCore/page/inspector/Resource.js
WebCore/page/inspector/inspector.css
WebCore/page/inspector/inspector.html
WebCore/page/inspector/inspector.js

index a7f9aa1..2d41358 100644 (file)
 
 2008-05-15  Timothy Hatcher  <timothy@apple.com>
 
+        Adds an error and warning count indicator at the bottom right in the
+        Inspector's status bar.
+
+        https://bugs.webkit.org/show_bug.cgi?id=18650
+
+        Initial implementation by Adam Roben.
+        Reviewed by Sam Weinig.
+
+        Test: manual-tests/inspector/error-warning-count.html
+
+        * English.lproj/localizedStrings.js: Added new strings.
+        * manual-tests/inspector/error-warning-count.html: Added.
+        * page/inspector/Console.js:
+        (WebInspector.Console.prototype.show): Don't do anything if visible.
+        (WebInspector.Console.prototype.hide): Don't do anything if hidden.
+        Temporally set properties and classes to mimic the post-animation
+        values so panels like Elements in their updateStatusBarItems call will
+        size things to fit the final location. 
+        * page/inspector/ElementsPanel.js:
+        (WebInspector.ElementsPanel.prototype.updateBreadcrumbSizes):
+        Account for the #error-warning-count width when sizing breadcrumbs. 
+        * page/inspector/Resource.js:
+        (WebInspector.Resource.prototype.set errors): Update the global error count.
+        (WebInspector.Resource.prototype.set warnings): Update the global warning count.
+        * page/inspector/inspector.css: Make .hidden's display property
+        !important to ensure things really hide, and added styling for the new
+        #error-warning-count element.
+        * page/inspector/inspector.html: Added an #error-warning-count div
+        in the #anchored-status-bar-items div.
+        * page/inspector/inspector.js:
+        (WebInspector.get errors): Added.
+        (WebInspector.set errors): Added. Calls _updateErrorAndWarningCounts.
+        (WebInspector.get warnings): Added.
+        (WebInspector.set warnings): Added. Calls _updateErrorAndWarningCounts.
+        (WebInspector._updateErrorAndWarningCounts): Added. Update the
+        #error-warning-count div with the current error/warning count.
+        (WebInspector.loaded): Add a click event listener to the
+        #error-warning-count element that will show the Console. Call
+        _updateErrorAndWarningCounts to display the initial error/warning counts.
+
+2008-05-15  Timothy Hatcher  <timothy@apple.com>
+
         Fixes a bug in the view source parsing of text within <script>,
         <style>, <xmp>, <textarea> and other special tags. The text was
         being parsed as HTML and would be syntax highlighted if a "<"
index 164e195..c5490a3 100644 (file)
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
diff --git a/WebCore/manual-tests/inspector/error-warning-count.html b/WebCore/manual-tests/inspector/error-warning-count.html
new file mode 100644 (file)
index 0000000..9f6b9c2
--- /dev/null
@@ -0,0 +1,60 @@
+<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>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=18650">Bug 18650:
+Errors/warnings in Inspector should be visible outside of Resources</a>.</p>
+<p>To test, open the Inspector 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>
index b22e370..aac624c 100644 (file)
@@ -58,7 +58,7 @@ WebInspector.Console = function()
 WebInspector.Console.prototype = {
     show: function()
     {
-        if (this._animating)
+        if (this._animating || this.visible)
             return;
 
         WebInspector.View.prototype.show.call(this);
@@ -97,7 +97,7 @@ WebInspector.Console.prototype = {
 
     hide: function()
     {
-        if (this._animating)
+        if (this._animating || !this.visible)
             return;
 
         WebInspector.View.prototype.hide.call(this);
@@ -113,6 +113,14 @@ WebInspector.Console.prototype = {
 
         var anchoredItems = document.getElementById("anchored-status-bar-items");
 
+        // Temporally set properties and classes to mimic the post-animation values so panels
+        // like Elements in their updateStatusBarItems call will size things to fit the final location.
+        document.getElementById("main-status-bar").style.setProperty("padding-left", (anchoredItems.offsetWidth - 1) + "px");
+        document.body.removeStyleClass("console-visible");
+        if ("updateStatusBarItems" in WebInspector.currentPanel)
+            WebInspector.currentPanel.updateStatusBarItems();
+        document.body.addStyleClass("console-visible");
+
         var animations = [
             {element: document.getElementById("main"), end: {bottom: 0}},
             {element: document.getElementById("main-status-bar"), start: {"padding-left": 0}, end: {"padding-left": anchoredItems.offsetWidth - 1}},
@@ -125,8 +133,6 @@ WebInspector.Console.prototype = {
             mainStatusBar.insertBefore(anchoredItems, mainStatusBar.firstChild);
             mainStatusBar.style.removeProperty("padding-left");
             document.body.removeStyleClass("console-visible");
-            if ("updateStatusBarItems" in WebInspector.currentPanel)
-                WebInspector.currentPanel.updateStatusBarItems();
             delete this._animating;
         }
 
index 699850f..9400c38 100644 (file)
@@ -597,6 +597,9 @@ WebInspector.ElementsPanel.prototype = {
         function crumbsAreSmallerThanContainer()
         {
             var rightPadding = 20;
+            var errorWarningElement = document.getElementById("error-warning-count");
+            if (!WebInspector.console.visible && errorWarningElement)
+                rightPadding += errorWarningElement.offsetWidth;
             return ((crumbs.totalOffsetLeft + crumbs.offsetWidth + rightPadding) < window.innerWidth);
         }
 
index 563e42c..3f2e260 100644 (file)
@@ -443,6 +443,10 @@ WebInspector.Resource.prototype = {
     {
         if (this._errors === x)
             return;
+
+        var difference = x - this._errors;
+        WebInspector.errors += difference;
+
         this._errors = x;
     },
 
@@ -457,6 +461,10 @@ WebInspector.Resource.prototype = {
     {
         if (this._warnings === x)
             return;
+
+        var difference = x - this._warnings;
+        WebInspector.warnings += difference;
+
         this._warnings = x;
     },
 
index 39cf564..8095a71 100644 (file)
@@ -51,7 +51,7 @@ img {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 #toolbar {
@@ -341,6 +341,40 @@ body.detached #dock-status-bar-item.toggled-on:active {
     background-position: 32px 0;
 }
 
+#error-warning-count {
+    position: absolute;
+    right: 16px;
+    top: 0;
+    cursor: pointer;
+    padding: 6px 2px;
+    font-size: 10px;
+    height: 19px;
+}
+
+#error-warning-count:hover {
+    border-bottom: 1px solid rgb(96, 96, 96);
+}
+
+#error-count::before {
+    content: url(Images/errorIcon.png);
+    width: 10px;
+    height: 10px;
+    vertical-align: -1px;
+    margin-right: 2px;
+}
+
+#error-count + #warning-count {
+    margin-left: 6px;
+}
+
+#warning-count::before {
+    content: url(Images/warningIcon.png);
+    width: 10px;
+    height: 10px;
+    vertical-align: -1px;
+    margin-right: 2px;
+}
+
 #console {
     display: none;
     position: absolute;
index 0b83f55..81393f2 100644 (file)
@@ -78,7 +78,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
         <div id="searchResults" class="focusable hidden"></div>
         <div id="searchResultsResizer" class="hidden"></div>
         <div id="main-panels" class="focusable focused"></div>
-        <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><button id="dock-status-bar-item" class="status-bar-item toggled"></button><button id="console-status-bar-item" class="status-bar-item"></button></div></div>
+        <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><button id="dock-status-bar-item" class="status-bar-item toggled"></button><button id="console-status-bar-item" class="status-bar-item"></button><div id="error-warning-count" class="hidden"></div></div></div>
     </div>
     <div id="console">
         <div id="console-messages" class="focusable blurred"><div id="console-prompt"><br></div></div>
index 3b99f88..797abd9 100644 (file)
@@ -181,6 +181,88 @@ var WebInspector = {
 
             WebInspector.animateStyle(animations, 250, animationFinished);
         }
+    },
+
+    get errors()
+    {
+        return this._errors || 0;
+    },
+
+    set errors(x)
+    {
+        x = Math.max(x, 0);
+
+        if (this._errors === x)
+            return;
+        this._errors = x;
+        this._updateErrorAndWarningCounts();
+    },
+
+    get warnings()
+    {
+        return this._warnings || 0;
+    },
+
+    set warnings(x)
+    {
+        x = Math.max(x, 0);
+
+        if (this._warnings === x)
+            return;
+        this._warnings = x;
+        this._updateErrorAndWarningCounts();
+    },
+
+    _updateErrorAndWarningCounts: function()
+    {
+        var errorWarningElement = document.getElementById("error-warning-count");
+        if (!errorWarningElement)
+            return;
+
+        if (!this.errors && !this.warnings) {
+            errorWarningElement.addStyleClass("hidden");
+            return;
+        }
+
+        errorWarningElement.removeStyleClass("hidden");
+
+        errorWarningElement.removeChildren();
+
+        if (this.errors) {
+            var errorElement = document.createElement("span");
+            errorElement.id = "error-count";
+            errorElement.textContent = this.errors;
+            errorWarningElement.appendChild(errorElement);
+        }
+
+        if (this.warnings) {
+            var warningsElement = document.createElement("span");
+            warningsElement.id = "warning-count";
+            warningsElement.textContent = this.warnings;
+            errorWarningElement.appendChild(warningsElement);
+        }
+
+        if (this.errors) {
+            if (this.warnings) {
+                if (this.errors == 1) {
+                    if (this.warnings == 1)
+                        errorWarningElement.title = WebInspector.UIString("%d error, %d warning", this.errors, this.warnings);
+                    else
+                        errorWarningElement.title = WebInspector.UIString("%d error, %d warnings", this.errors, this.warnings);
+                } else if (this.warnings == 1)
+                    errorWarningElement.title = WebInspector.UIString("%d errors, %d warning", this.errors, this.warnings);
+                else
+                    errorWarningElement.title = WebInspector.UIString("%d errors, %d warnings", this.errors, this.warnings);
+            } else if (this.errors == 1)
+                errorWarningElement.title = WebInspector.UIString("%d error", this.errors);
+            else
+                errorWarningElement.title = WebInspector.UIString("%d errors", this.errors);
+        } else if (this.warnings == 1)
+            errorWarningElement.title = WebInspector.UIString("%d warning", this.warnings);
+        else if (this.warnings)
+            errorWarningElement.title = WebInspector.UIString("%d warnings", this.warnings);
+        else
+            errorWarningElement.title = null;
     }
 }
 
@@ -258,6 +340,10 @@ WebInspector.loaded = function()
     else
         dockToggleButton.title = WebInspector.UIString("Dock to main window.");
 
+    var errorWarningCount = document.getElementById("error-warning-count");
+    errorWarningCount.addEventListener("click", this.console.show.bind(this.console), false);
+    this._updateErrorAndWarningCounts();
+
     document.getElementById("search-toolbar-label").textContent = WebInspector.UIString("Search");
 
     if (platform === "mac-leopard")