这是indexloc提供的服务，不要输入任何密码

Changeset 48314 in webkit


Ignore:
Timestamp:
Sep 11, 2009, 1:21:29 PM (16 years ago)
Author:
bweinstein@apple.com
Message:

2009-09-11 Brian Weinstein <​bweinstein@apple.com>

Reviewed by Timothy Hatcher.

The inspector should have scope bars.
​https://bugs.webkit.org/show_bug.cgi?id=14353


Add scope bars to the console, so the user can choose which category
of messages they want to see (All, Errors, Warnings, Logs), and they
can choose from one or more of {Errors, Warnings, Logs}.

  • inspector/front-end/ConsoleView.js: (WebInspector.ConsoleView.createFilterElement): (WebInspector.ConsoleView): (WebInspector.ConsoleView.prototype._updateFilter): (WebInspector.ConsoleView.prototype.filter): (WebInspector.ConsoleView.prototype.attach):
  • inspector/front-end/inspector.css:
  • inspector/front-end/inspector.html:
Location:
trunk/WebCore
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/WebCore/ChangeLog

    r48313 r48314  
     12009-09-11  Brian Weinstein  <bweinstein@apple.com>
     2
     3        Reviewed by Timothy Hatcher.
     4
     5        The inspector should have scope bars.
     6        https://bugs.webkit.org/show_bug.cgi?id=14353
     7       
     8        Add scope bars to the console, so the user can choose which category
     9        of messages they want to see (All, Errors, Warnings, Logs), and they
     10        can choose from one or more of {Errors, Warnings, Logs}.
     11
     12        * inspector/front-end/ConsoleView.js:
     13        (WebInspector.ConsoleView.createFilterElement):
     14        (WebInspector.ConsoleView):
     15        (WebInspector.ConsoleView.prototype._updateFilter):
     16        (WebInspector.ConsoleView.prototype.filter):
     17        (WebInspector.ConsoleView.prototype.attach):
     18        * inspector/front-end/inspector.css:
     19        * inspector/front-end/inspector.html:
     20
    1212009-09-11  Yusuke Sato  <yusukes@chromium.org>
    222

  • trunk/WebCore/inspector/front-end/ConsoleView.js

    r48046 r48314  
    5858    var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
    5959    anchoredStatusBar.appendChild(this.toggleConsoleButton);
    60 
     60   
     61    // Will hold the list of filter elements
     62    this.filterBarElement = document.getElementById("console-filter");
     63   
     64    function createFilterElement(category) {
     65        var categoryElement = document.createElement("li");
     66        categoryElement.category = category;
     67     
     68        categoryElement.addStyleClass(categoryElement.category);
     69           
     70        var label = category.toString();
     71        categoryElement.appendChild(document.createTextNode(label));
     72     
     73        categoryElement.addEventListener("click", this._updateFilter.bind(this), false);
     74     
     75        this.filterBarElement.appendChild(categoryElement);
     76        return categoryElement;
     77    }
     78   
     79    this.allElement = createFilterElement.call(this, "All");
     80    this.errorElement = createFilterElement.call(this, "Errors");
     81    this.warningElement = createFilterElement.call(this, "Warnings");
     82    this.logElement = createFilterElement.call(this, "Logs");
     83
     84    this.filter(this.allElement);
    6185}
    6286
    6387WebInspector.ConsoleView.prototype = {
     88   
     89    _updateFilter: function(e)
     90    {
     91        this.filter(e.target);
     92    },
     93   
     94    filter: function(target)
     95    {
     96        if (target.category == "All") {
     97            if (target.hasStyleClass("selected")) {
     98                // We can't unselect all, so we break early here
     99                return;
     100            }
     101           
     102            this.errorElement.removeStyleClass("selected");
     103            this.warningElement.removeStyleClass("selected");
     104            this.logElement.removeStyleClass("selected");
     105           
     106            document.getElementById("console-messages").removeStyleClass("filter-errors");
     107            document.getElementById("console-messages").removeStyleClass("filter-warnings");
     108            document.getElementById("console-messages").removeStyleClass("filter-logs");
     109        } else {
     110            // Something other than all is being selected, so we want to unselect all
     111            if (this.allElement.hasStyleClass("selected")) {
     112                this.allElement.removeStyleClass("selected");
     113                document.getElementById("console-messages").removeStyleClass("filter-all");
     114            }
     115        }
     116       
     117        if (target.hasStyleClass("selected")) {
     118            target.removeStyleClass("selected");
     119            var newClass = "filter-" + target.category.toLowerCase();
     120            var filterElement = document.getElementById("console-messages");
     121            filterElement.removeStyleClass(newClass);
     122        } else {
     123            target.addStyleClass("selected");
     124            var newClass = "filter-" + target.category.toLowerCase();
     125            var filterElement = document.getElementById("console-messages");
     126            filterElement.addStyleClass(newClass);
     127        }
     128    },
     129   
    64130    _toggleConsoleButtonClicked: function()
    65131    {
    … …  
    71137        mainElement.appendChild(this.element);
    72138        statusBarElement.appendChild(this.clearButton);
     139        statusBarElement.appendChild(this.filterBarElement);
    73140    },
    74141

  • trunk/WebCore/inspector/front-end/inspector.css

    r48102 r48314  
    22832283}
    22842284
    2285 #resources-filter li {
     2285#console-filter {
     2286    height: 24px;
     2287    padding: 2px 10px 0;
     2288    overflow: hidden;
     2289}
     2290
     2291#resources-filter li, #console-filter li {
    22862292    display: inline-block;
    22872293    margin: 1px 1px 0 0;
    … …  
    22982304}
    22992305
    2300 #resources-filter li.selected, #resources-filter li:hover, #resources-filter li:active {
     2306#resources-filter li.selected, #resources-filter li:hover, #resources-filter li:active,
     2307#console-filter li.selected, #console-filter li:hover, #console-filter li:active {
    23012308    color: white;
    23022309    text-shadow: rgb(80, 80, 80) 1px 1px 1px;
    … …  
    23062313}
    23072314
    2308 #resources-filter li:hover {
     2315#resources-filter li:hover,
     2316#console-filter li:hover {
    23092317    background: rgba(20, 20, 20, 0.4);
    23102318    border-color: transparent;
    … …  
    23122320}
    23132321
    2314 #resources-filter li:active {
     2322#resources-filter li:active,
     2323#console-filter li:active {
    23152324    background: rgba(20, 20, 20, 0.6);
    23162325}
    … …  
    25372546.resource-sidebar-tree-item.selected {
    25382547    display: list-item;
     2548}
     2549
     2550.console-warning-level, .console-error-level, .console-log-level {
     2551    display: none;
     2552}
     2553
     2554.filter-all .console-warning-level, .filter-warnings .console-warning-level,
     2555.filter-all .console-error-level, .filter-errors .console-error-level,
     2556.filter-all .console-log-level, .filter-logs .console-log-level {
     2557    display: block;
    25392558}
    25402559

  • trunk/WebCore/inspector/front-end/inspector.html

    r48167 r48314  
    105105    <div id="drawer">
    106106        <div id="console-view"><div id="console-messages"><div id="console-prompt" spellcheck="false"><br></div></div></div>
    107         <div id="drawer-status-bar" class="status-bar"><div id="other-drawer-status-bar-items"><button id="clear-console-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button></div></div>
     107        <div id="drawer-status-bar" class="status-bar"><div id="other-drawer-status-bar-items"><button id="clear-console-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><div id="console-filter" class="status-bar-item"></div></div></div>
    108108    </div>
    109109</body>
Note: See TracChangeset for help on using the changeset viewer.