Changeset 157649 in webkit


Ignore:
Timestamp:
Oct 18, 2013 2:41:51 PM (11 years ago)
Author:
Alexandru Chiculita
Message:

Web Inspector: CSS Regions: Add the list of flows in the FrameTreeElement
​https://bugs.webkit.org/show_bug.cgi?id=122924

Reviewed by Timothy Hatcher.

Added code to collect the flows from the backend into the DOMTree object
on the frontend. Added ContentFlow to represent the flows on the frontend
side and created ContentFlowTreeElement to display the flows in the FrameTreeElement.

  • Localizations/en.lproj/localizedStrings.js:
  • Scripts/copy-user-interface-resources.sh:
  • UserInterface/CSSObserver.js:

(WebInspector.CSSObserver.prototype.namedFlowCreated):
(WebInspector.CSSObserver.prototype.namedFlowRemoved):
(WebInspector.CSSObserver.prototype.regionLayoutUpdated):
(WebInspector.CSSObserver.prototype.regionOversetChanged):

  • UserInterface/ContentFlow.js: Added.

(WebInspector.ContentFlow):
(WebInspector.ContentFlow.prototype.get id):
(WebInspector.ContentFlow.prototype.get documentNodeIdentifier):
(WebInspector.ContentFlow.prototype.get name):
(WebInspector.ContentFlow.prototype.get overset):
(WebInspector.ContentFlow.prototype.set overset):

  • UserInterface/ContentFlowIcon.css: Added.

(.content-flow-icon .icon):

  • UserInterface/ContentFlowTreeElement.js: Added.

(WebInspector.ContentFlowTreeElement):

  • UserInterface/DOMTree.js:

(WebInspector.DOMTree):
(WebInspector.DOMTree.prototype.get flowMap):
(WebInspector.DOMTree.prototype.get flowsCount):
(WebInspector.DOMTree.prototype._framePageExecutionContextChanged):
(WebInspector.DOMTree.prototype.requestContentFlowList):
(WebInspector.DOMTree.prototype._isContentFlowInCurrentDocument):
(WebInspector.DOMTree.prototype._contentFlowListWasUpdated):
(WebInspector.DOMTree.prototype._contentFlowWasAdded):
(WebInspector.DOMTree.prototype._contentFlowWasRemoved):

  • UserInterface/DOMTreeManager.js:

(WebInspector.DOMTreeManager):
(WebInspector.DOMTreeManager._flowPayloadHashKey):
(WebInspector.DOMTreeManager.prototype._buildHighlightConfig):
(WebInspector.DOMTreeManager.prototype._createContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype._updateContentFlowFromPayload):
(WebInspector.DOMTreeManager.prototype.getNamedFlowCollection):
(WebInspector.DOMTreeManager.prototype.namedFlowCreated):
(WebInspector.DOMTreeManager.prototype.namedFlowRemoved):
(WebInspector.DOMTreeManager.prototype._sendNamedFlowUpdateEvents):
(WebInspector.DOMTreeManager.prototype.regionLayoutUpdated):
(WebInspector.DOMTreeManager.prototype.regionOversetChanged):

  • UserInterface/FrameTreeElement.js:

(WebInspector.FrameTreeElement):
(WebInspector.FrameTreeElement.prototype.onpopulate):
(WebInspector.FrameTreeElement.prototype.onexpand):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasAdded):
(WebInspector.FrameTreeElement.prototype._childContentFlowWasRemoved):
(WebInspector.FrameTreeElement.prototype._rootDOMNodeInvalidated):
(WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._addTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._compareResourceTreeElements):
(WebInspector.FrameTreeElement.prototype._insertResourceTreeElement):
(WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject):
(WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders):

  • UserInterface/Images/ContentFlow.svg: Added.
  • UserInterface/Main.html:
  • UserInterface/ResourceSidebarPanel.js:

(WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):

Location:
trunk/Source/WebInspectorUI
Files:
4 added
9 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r157601 r157649  
     12013-10-18  Alexandru Chiculita  <achicu@adobe.com>
     2
     3        Web Inspector: CSS Regions: Add the list of flows in the FrameTreeElement
     4        https://bugs.webkit.org/show_bug.cgi?id=122924
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        Added code to collect the flows from the backend into the DOMTree object
     9        on the frontend. Added ContentFlow to represent the flows on the frontend
     10        side and created ContentFlowTreeElement to display the flows in the FrameTreeElement.
     11
     12        * Localizations/en.lproj/localizedStrings.js:
     13        * Scripts/copy-user-interface-resources.sh:
     14        * UserInterface/CSSObserver.js:
     15        (WebInspector.CSSObserver.prototype.namedFlowCreated):
     16        (WebInspector.CSSObserver.prototype.namedFlowRemoved):
     17        (WebInspector.CSSObserver.prototype.regionLayoutUpdated):
     18        (WebInspector.CSSObserver.prototype.regionOversetChanged):
     19        * UserInterface/ContentFlow.js: Added.
     20        (WebInspector.ContentFlow):
     21        (WebInspector.ContentFlow.prototype.get id):
     22        (WebInspector.ContentFlow.prototype.get documentNodeIdentifier):
     23        (WebInspector.ContentFlow.prototype.get name):
     24        (WebInspector.ContentFlow.prototype.get overset):
     25        (WebInspector.ContentFlow.prototype.set overset):
     26        * UserInterface/ContentFlowIcon.css: Added.
     27        (.content-flow-icon .icon):
     28        * UserInterface/ContentFlowTreeElement.js: Added.
     29        (WebInspector.ContentFlowTreeElement):
     30        * UserInterface/DOMTree.js:
     31        (WebInspector.DOMTree):
     32        (WebInspector.DOMTree.prototype.get flowMap):
     33        (WebInspector.DOMTree.prototype.get flowsCount):
     34        (WebInspector.DOMTree.prototype._framePageExecutionContextChanged):
     35        (WebInspector.DOMTree.prototype.requestContentFlowList):
     36        (WebInspector.DOMTree.prototype._isContentFlowInCurrentDocument):
     37        (WebInspector.DOMTree.prototype._contentFlowListWasUpdated):
     38        (WebInspector.DOMTree.prototype._contentFlowWasAdded):
     39        (WebInspector.DOMTree.prototype._contentFlowWasRemoved):
     40        * UserInterface/DOMTreeManager.js:
     41        (WebInspector.DOMTreeManager):
     42        (WebInspector.DOMTreeManager._flowPayloadHashKey):
     43        (WebInspector.DOMTreeManager.prototype._buildHighlightConfig):
     44        (WebInspector.DOMTreeManager.prototype._createContentFlowFromPayload):
     45        (WebInspector.DOMTreeManager.prototype._updateContentFlowFromPayload):
     46        (WebInspector.DOMTreeManager.prototype.getNamedFlowCollection):
     47        (WebInspector.DOMTreeManager.prototype.namedFlowCreated):
     48        (WebInspector.DOMTreeManager.prototype.namedFlowRemoved):
     49        (WebInspector.DOMTreeManager.prototype._sendNamedFlowUpdateEvents):
     50        (WebInspector.DOMTreeManager.prototype.regionLayoutUpdated):
     51        (WebInspector.DOMTreeManager.prototype.regionOversetChanged):
     52        * UserInterface/FrameTreeElement.js:
     53        (WebInspector.FrameTreeElement):
     54        (WebInspector.FrameTreeElement.prototype.onpopulate):
     55        (WebInspector.FrameTreeElement.prototype.onexpand):
     56        (WebInspector.FrameTreeElement.prototype._childContentFlowWasAdded):
     57        (WebInspector.FrameTreeElement.prototype._childContentFlowWasRemoved):
     58        (WebInspector.FrameTreeElement.prototype._rootDOMNodeInvalidated):
     59        (WebInspector.FrameTreeElement.prototype._addChildForRepresentedObject):
     60        (WebInspector.FrameTreeElement.prototype._removeChildForRepresentedObject):
     61        (WebInspector.FrameTreeElement.prototype._addTreeElementForRepresentedObject):
     62        (WebInspector.FrameTreeElement.prototype._compareResourceTreeElements):
     63        (WebInspector.FrameTreeElement.prototype._insertResourceTreeElement):
     64        (WebInspector.FrameTreeElement.prototype._parentTreeElementForRepresentedObject):
     65        (WebInspector.FrameTreeElement.prototype._shouldGroupIntoFolders):
     66        * UserInterface/Images/ContentFlow.svg: Added.
     67        * UserInterface/Main.html:
     68        * UserInterface/ResourceSidebarPanel.js:
     69        (WebInspector.ResourceSidebarPanel.prototype._treeElementSelected):
     70
    1712013-10-17  Antoine Quint  <graouts@apple.com>
    272

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r157601 r157649  
    180180localizedStrings["Filter Resource List"] = "Filter Resource List";
    181181localizedStrings["Filter Search Results"] = "Filter Search Results";
     182localizedStrings["Flows"] = "Flows";
    182183localizedStrings["Font"] = "Font";
    183184localizedStrings["Fonts"] = "Fonts";

  • trunk/Source/WebInspectorUI/Scripts/copy-user-interface-resources.sh

    r155658 r157649  
    1414 * Copyright (C) 2013 Samsung Electronics. All rights reserved.
    1515 * Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
     16 * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
    1617 *
    1718 * Redistribution and use in source and binary forms, with or without

  • trunk/Source/WebInspectorUI/UserInterface/CSSObserver.js

    r151453 r157649  
    5656    namedFlowCreated: function(namedFlow)
    5757    {
    58         // FIXME: Not implemented.
     58        WebInspector.domTreeManager.namedFlowCreated(namedFlow);
    5959    },
    6060
    6161    namedFlowRemoved: function(documentNodeId, flowName)
    6262    {
    63         // FIXME: Not implemented.
     63        WebInspector.domTreeManager.namedFlowRemoved(documentNodeId, flowName);
    6464    },
    6565
    6666    regionLayoutUpdated: function(namedFlow)
    6767    {
    68         // FIXME: Not implemented.
     68        WebInspector.domTreeManager.regionLayoutUpdated(namedFlow);
     69    },
     70
     71    regionOversetChanged: function(namedFlow)
     72    {
     73        WebInspector.domTreeManager.regionOversetChanged(namedFlow);
    6974    }
    7075};

  • trunk/Source/WebInspectorUI/UserInterface/DOMTree.js

    r151453 r157649  
    3232    this._rootDOMNode = null;
    3333    this._requestIdentifier = 0;
     34    this._flowMap = {};
    3435
    3536    this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
    … …  
    4243        this._frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceDidChange, this);
    4344    }
     45
     46    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, this._contentFlowListWasUpdated, this);
     47    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, this._contentFlowWasAdded, this);
     48    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, this._contentFlowWasRemoved, this);
    4449};
    4550
    … …  
    4752
    4853WebInspector.DOMTree.Event = {
    49     RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated"
     54    RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated",
     55    ContentFlowWasAdded: "dom-tree-content-flow-was-added",
     56    ContentFlowWasRemoved: "dom-tree-content-flow-was-removed"
    5057};
    5158
    … …  
    5865    {
    5966        return this._frame;
     67    },
     68
     69    get flowMap()
     70    {
     71        return this._flowMap;
     72    },
     73
     74    get flowsCount()
     75    {
     76        return Object.keys(this._flowMap).length;
    6077    },
    6178
    … …  
    231248            this._requestRootDOMNode();
    232249        }
     250    },
     251
     252    requestContentFlowList: function()
     253    {
     254        this.requestRootDOMNode(function(rootNode) {
     255            // Let the backend know we are interested about the named flow events for this document.
     256            WebInspector.domTreeManager.getNamedFlowCollection(rootNode.id);
     257        });
     258    },
     259
     260    _isContentFlowInCurrentDocument: function(flow)
     261    {
     262        return this._rootDOMNode && this._rootDOMNode.id === flow.documentNodeIdentifier;
     263    },
     264
     265    _contentFlowListWasUpdated: function(event)
     266    {
     267        if (!this._rootDOMNode || this._rootDOMNode.id !== event.data.documentNodeIdentifier)
     268            return;
     269
     270        // Assume that all the flows have been removed.
     271        var deletedFlows = {};
     272        for (var flowId in this._flowMap)
     273            deletedFlows[flowId] = this._flowMap[flowId];
     274
     275        var newFlows = [];
     276
     277        var flows = event.data.flows;
     278        for (var i = 0; i < flows.length; ++i) {
     279            var flow = flows[i];
     280            // All the flows received from WebKit are part of the same document.
     281            console.assert(this._isContentFlowInCurrentDocument(flow));
     282
     283            var flowId = flow.id;
     284            if (this._flowMap.hasOwnProperty(flowId)) {
     285                // Remove the flow name from the deleted list.
     286                console.assert(deletedFlows.hasOwnProperty(flowKey));
     287                delete deletedFlows[flowId];
     288            } else {
     289                this._flowMap[flowId] = flow;
     290                newFlows.push(flow);
     291            }
     292        }
     293
     294        for (var flowId in deletedFlows) {
     295            delete this._flowMap[flowId];
     296        }
     297
     298        // Send update events to listeners.
     299
     300        for (var flowId in deletedFlows)
     301            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow: deletedFlows[flowId]});
     302
     303        for (var i = 0; i < newFlows.length; ++i)
     304            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow: newFlows[i]});
     305    },
     306
     307    _contentFlowWasAdded: function(event)
     308    {
     309        var flow = event.data.flow;
     310        if (!this._isContentFlowInCurrentDocument(flow))
     311            return;
     312
     313        var flowId = flow.id;
     314        console.assert(!this._flowMap.hasOwnProperty(flowId));
     315        this._flowMap[flowId] = flow;
     316
     317        this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow: flow});
     318    },
     319
     320    _contentFlowWasRemoved: function(event)
     321    {
     322        var flow = event.data.flow;
     323        if (!this._isContentFlowInCurrentDocument(flow))
     324            return;
     325
     326        var flowId = flow.id;
     327        console.assert(this._flowMap.hasOwnProperty(flowId));
     328        delete this._flowMap[flowId];
     329
     330        this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow: flow});
    233331    }
    234332};

  • trunk/Source/WebInspectorUI/UserInterface/DOMTreeManager.js

    r155241 r157649  
    4040    this._document = null;
    4141    this._attributeLoadNodeIds = {};
     42    this._flows = {};
    4243}
    4344
    … …  
    5354    ChildNodeCountUpdated: "dom-tree-manager-child-node-count-updated",
    5455    DOMNodeWasInspected: "dom-tree-manager-dom-node-was-inspected",
    55     InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed"
     56    InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed",
     57    ContentFlowListWasUpdated: "dom-tree-manager-content-flow-list-was-updated",
     58    ContentFlowWasAdded: "dom-tree-manager-content-flow-was-added",
     59    ContentFlowWasRemoved: "dom-tree-manager-content-flow-was-removed",
     60    RegionLayoutUpdated: "dom-tree-manager-region-layout-updated",
     61    RegionOversetChanged: "dom-tree-manager-region-overset-changed"
     62};
     63
     64WebInspector.DOMTreeManager._flowPayloadHashKey = function(flowPayload)
     65{
     66    // Use the flow node id, to avoid collisions when we change main document id.
     67    return flowPayload.documentNodeId + ":" + flowPayload.name;
    5668};
    5769
    … …  
    520532
    521533        return highlightConfig;
     534    },
     535
     536    _createContentFlowFromPayload: function(flowPayload)
     537    {
     538        // FIXME: Collect the content and regions from the payload.
     539        return new WebInspector.ContentFlow(flowPayload.documentNodeId, flowPayload.name, flowPayload.overset);
     540    },
     541
     542    _updateContentFlowFromPayload: function(contentFlow, flowPayload)
     543    {
     544        // FIXME: Collect the content and regions from the payload.
     545        contentFlow.overset = flowPayload.overset;
     546    },
     547
     548    getNamedFlowCollection: function(documentNodeIdentifier)
     549    {
     550        function onNamedFlowCollectionAvailable(error, flows)
     551        {
     552            if (error) {
     553                console.error("Error while getting the named flows for document " + documentNodeIdentifier + ": " + error);
     554                return;
     555            }
     556            var contentFlows = [];
     557            for (var i = 0; i < flows.length; ++i) {
     558                var flowPayload = flows[i];
     559                var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
     560                var contentFlow = this._flows[flowKey];
     561                if (contentFlow)
     562                    this._updateContentFlowFromPayload(contentFlow, flowPayload);
     563                else {
     564                    contentFlow = this._createContentFlowFromPayload(flowPayload);
     565                    this._flows[flowKey] = contentFlow;
     566                }
     567                contentFlows.push(contentFlow);
     568            }
     569            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, {documentNodeIdentifier: documentNodeIdentifier, flows: contentFlows});
     570        }
     571        CSSAgent.getNamedFlowCollection(documentNodeIdentifier, onNamedFlowCollectionAvailable.bind(this));
     572    },
     573
     574    namedFlowCreated: function(flowPayload)
     575    {
     576        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
     577        console.assert(!this._flows.hasOwnProperty(flowKey));
     578        var contentFlow = this._createContentFlowFromPayload(flowPayload);
     579        this._flows[flowKey] = contentFlow;
     580        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, {flow: contentFlow});
     581    },
     582
     583    namedFlowRemoved: function(documentNodeIdentifier, flowName)
     584    {
     585        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: documentNodeIdentifier, name: flowName});
     586        var contentFlow = this._flows[flowKey];
     587        console.assert(contentFlow);
     588        delete this._flows[flowKey];
     589        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, {flow: contentFlow});
     590    },
     591
     592    _sendNamedFlowUpdateEvents: function(flowPayload)
     593    {
     594        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
     595        console.assert(this._flows.hasOwnProperty(flowKey));
     596        this._updateContentFlowFromPayload(this._flows[flowKey], flowPayload);
     597    },
     598
     599    regionLayoutUpdated: function(flowPayload)
     600    {
     601        this._sendNamedFlowUpdateEvents(flowPayload);
     602    },
     603
     604    regionOversetChanged: function(flowPayload)
     605    {
     606        this._sendNamedFlowUpdateEvents(flowPayload);
    522607    }
    523608}

  • trunk/Source/WebInspectorUI/UserInterface/FrameTreeElement.js

    r154828 r157649  
    4141    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
    4242
     43    frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
     44    frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
     45    frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
     46
    4347    if (this._frame.isMainFrame()) {
    4448        this._downloadingPage = false;
    … …  
    177181            this._addTreeElementForRepresentedObject(sourceMap.resources[j]);
    178182        }
     183
     184        var flowMap = this._frame.domTree.flowMap;
     185        for (var flowKey in flowMap)
     186            this._addTreeElementForRepresentedObject(flowMap[flowKey]);
    179187    },
    180188
    … …  
    182190    {
    183191        this._expandedSetting.value = true;
     192        this._frame.domTree.requestContentFlowList();
    184193    },
    185194
    … …  
    265274    },
    266275
     276    _childContentFlowWasAdded: function(event)
     277    {
     278        this._addRepresentedObjectToNewChildQueue(event.data.flow);
     279    },
     280
     281    _childContentFlowWasRemoved: function(event)
     282    {
     283        this._removeChildForRepresentedObject(event.data.flow);
     284    },
     285
     286    _rootDOMNodeInvalidated: function() {
     287        if (this.expanded)
     288            this._frame.domTree.requestContentFlowList();
     289    },
     290
    267291    _addRepresentedObjectToNewChildQueue: function(representedObject)
    268292    {
    … …  
    299323    _addChildForRepresentedObject: function(representedObject)
    300324    {
    301         console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
    302         if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
     325        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow);
     326        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
    303327            return;
    304328
    … …  
    323347    _removeChildForRepresentedObject: function(representedObject)
    324348    {
    325         console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
    326         if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
     349        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow);
     350        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.ContentFlow))
    327351            return;
    328352
    … …  
    356380            else if (representedObject instanceof WebInspector.Frame)
    357381                childTreeElement = new WebInspector.FrameTreeElement(representedObject);
     382            else if (representedObject instanceof WebInspector.ContentFlow)
     383                childTreeElement = new WebInspector.ContentFlowTreeElement(representedObject);
    358384        }
    359385
    … …  
    393419    },
    394420
     421    _compareResourceTreeElements: function(a, b)
     422    {
     423        if (a === b)
     424            return 0;
     425
     426        var aIsResource = a instanceof WebInspector.ResourceTreeElement;
     427        var bIsResource = b instanceof WebInspector.ResourceTreeElement;
     428
     429        if (aIsResource && bIsResource)
     430            return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
     431
     432        if (!aIsResource && !bIsResource) {
     433            // When both components are not resources then just compare the titles.
     434            return a.mainTitle.localeCompare(b.mainTitle);
     435        }
     436       
     437        // Non-resources should appear before the resources.
     438        // FIXME: There should be a better way to group the elements by their type.
     439        return aIsResource ? 1 : -1;
     440    },
     441
    395442    _insertResourceTreeElement: function(parentTreeElement, childTreeElement)
    396443    {
    397444        console.assert(!childTreeElement.parent);
    398         parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareResourceTreeElements));
     445        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this._compareResourceTreeElements));
    399446    },
    400447
    … …  
    446493        }
    447494
     495        if (representedObject instanceof WebInspector.ContentFlow) {
     496            if (!this._flowsFolderTreeElement)
     497                this._flowsFolderTreeElement = createFolderTreeElement.call(this, "flows", WebInspector.UIString("Flows"));
     498            return this._flowsFolderTreeElement;
     499        }
     500
    448501        if (representedObject instanceof WebInspector.Resource) {
    449502            var folderName = this._folderNameForResourceType(representedObject.type);
    … …  
    484537        var numberOfMediumCategories = 0;
    485538        var foundLargeCategory = false;
     539
     540        // FIXME: Use this._frame.domTree.flowsCount to count the number of flows in a frame.
     541        // https://bugs.webkit.org/show_bug.cgi?id=122926
    486542
    487543        if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.LargeChildCountThreshold)

  • trunk/Source/WebInspectorUI/UserInterface/Main.html

    r157601 r157649  
    4545    <link rel="stylesheet" href="NavigationSidebarPanel.css">
    4646    <link rel="stylesheet" href="ResourceIcons.css">
     47    <link rel="stylesheet" href="ContentFlowIcon.css">
    4748    <link rel="stylesheet" href="FolderIcon.css">
    4849    <link rel="stylesheet" href="ContentViewContainer.css">
    … …  
    232233    <script src="TreeElementStatusButton.js"></script>
    233234    <script src="IssueMessage.js"></script>
     235    <script src="ContentFlowTreeElement.js"></script>
    234236    <script src="FrameTreeElement.js"></script>
    235237    <script src="CSSCompletions.js"></script>
    … …  
    265267    <script src="DOMNode.js"></script>
    266268    <script src="DOMUtilities.js"></script>
     269    <script src="ContentFlow.js"></script>
    267270    <script src="DOMTree.js"></script>
    268271    <script src="DOMTreeOutline.js"></script>

  • trunk/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js

    r157269 r157649  
    611611    _treeElementSelected: function(treeElement, selectedByUser)
    612612    {
     613        if (treeElement instanceof WebInspector.ContentFlowTreeElement) {
     614            // FIXME: Implement DOM tree inspector for content flow tree elements.
     615            // https://bugs.webkit.org/show_bug.cgi?id=122927
     616            console.log("Content Flow view not implemented");
     617            return;
     618        }
     619
    613620        if (treeElement instanceof WebInspector.FolderTreeElement)
    614621            return;
Note: See TracChangeset for help on using the changeset viewer.