2017-10-03 16:12:26 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function test()
|
|
|
|
|
{
|
|
|
|
|
let suite = InspectorTest.createSyncSuite("View.Basics");
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.rootView",
|
|
|
|
|
test() {
|
|
|
|
|
let rootView = WI.View.rootView();
|
|
|
|
|
InspectorTest.expectThat(rootView.isAttached, "Root view should be attached by definition.");
|
|
|
|
|
InspectorTest.expectEqual(rootView.element, document.body, "Root view element should be document.body.");
|
|
|
|
|
InspectorTest.expectFalse(rootView.layoutPending, "Root view should not have a pending layout.");
|
|
|
|
|
InspectorTest.expectEqual(rootView.subviews.length, 0, "Root view should not have subviews.");
|
|
|
|
|
InspectorTest.expectEqual(WI.View.rootView(), WI.View.rootView(), "View.rootView() should always return the same view.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.constructor",
|
|
|
|
|
test() {
|
|
|
|
|
let view = new WI.View;
|
|
|
|
|
InspectorTest.expectFalse(view.isAttached, "View should not be attached.");
|
|
|
|
|
InspectorTest.expectEqual(view.element.tagName, "DIV", "View element should be a <div>.");
|
|
|
|
|
InspectorTest.expectEqual(view.element.childNodes.length, 0, "View element should not have child nodes.");
|
|
|
|
|
InspectorTest.expectFalse(view.layoutPending, "View should not have a pending layout.");
|
|
|
|
|
InspectorTest.expectEqual(view.subviews.length, 0, "View should not have subviews.");
|
|
|
|
|
InspectorTest.expectNull(view.parentView, "View should not have a parent.");
|
|
|
|
|
|
|
|
|
|
let existingElement = document.createElement("ol");
|
|
|
|
|
let customView = new WI.View(existingElement);
|
|
|
|
|
InspectorTest.expectEqual(customView.element, existingElement, "View should be created with passed in element.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.addSubview",
|
|
|
|
|
test() {
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let child = new WI.View;
|
|
|
|
|
parent.addSubview(child);
|
|
|
|
|
InspectorTest.expectEqual(child.parentView, parent, "Child should have the correct parent.");
|
|
|
|
|
InspectorTest.expectThat(child.isDescendantOf(parent), "Child should be a descendant of the parent.");
|
|
|
|
|
InspectorTest.expectThat(parent.subviews.includes(child), "Child should be included in the parent's subviews.");
|
|
|
|
|
|
|
|
|
|
let previousSubviews = parent.subviews.slice();
|
|
|
|
|
parent.addSubview(child);
|
|
|
|
|
InspectorTest.expectShallowEqual(previousSubviews, parent.subviews, "Adding a view multiple times should have no effect.");
|
|
|
|
|
|
|
|
|
|
let grandchild = new WI.View;
|
|
|
|
|
child.addSubview(grandchild);
|
|
|
|
|
InspectorTest.expectThat(grandchild.isDescendantOf(child.parentView), "Grandchild should be a descendant of it's grandparent.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.removeSubview",
|
|
|
|
|
test() {
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let child = new WI.View;
|
|
|
|
|
parent.addSubview(child);
|
|
|
|
|
parent.removeSubview(child);
|
|
|
|
|
InspectorTest.expectNull(child.parentView, "Removed view should not have a parent.");
|
|
|
|
|
InspectorTest.expectThat(!child.isDescendantOf(parent), "Removed view should not be a descendant of the parent.");
|
|
|
|
|
InspectorTest.expectThat(!parent.subviews.includes(child), "Removed view should not be included in the parent's subviews.");
|
|
|
|
|
|
|
|
|
|
let previousSubviews = parent.subviews.slice();
|
|
|
|
|
parent.removeSubview(new WI.View);
|
|
|
|
|
InspectorTest.expectShallowEqual(previousSubviews, parent.subviews, "Removing a nonexistent view should have no effect.")
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2019-03-01 00:48:01 +00:00
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.removeSubview.IndirectDescendant",
|
|
|
|
|
test() {
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let middleElement = parent.element.appendChild(document.createElement("div"));
|
|
|
|
|
|
|
|
|
|
let child = new WI.View;
|
|
|
|
|
middleElement.appendChild(child.element);
|
|
|
|
|
|
|
|
|
|
parent.addSubview(child);
|
|
|
|
|
parent.removeSubview(child);
|
|
|
|
|
|
|
|
|
|
InspectorTest.expectFalse(child.element.parentNode, "Removed view should not be in the DOM.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2017-10-03 16:12:26 +00:00
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.insertSubviewBefore",
|
|
|
|
|
test() {
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let child1 = new WI.View;
|
|
|
|
|
let child2 = new WI.View;
|
|
|
|
|
parent.insertSubviewBefore(child1);
|
|
|
|
|
InspectorTest.expectEqual(parent.subviews[0], child1, "Inserting a view before `null` should append the view.");
|
|
|
|
|
|
|
|
|
|
parent.insertSubviewBefore(child2, child1);
|
|
|
|
|
InspectorTest.expectEqual(parent.subviews[0], child2, "child2 should be inserted before dhild1.");
|
|
|
|
|
InspectorTest.expectEqual(parent.subviews[1], child1, "child1 should be after child2.");
|
|
|
|
|
|
|
|
|
|
let previousSubviews = parent.subviews.slice();
|
|
|
|
|
parent.insertSubviewBefore(child2, new WI.View);
|
|
|
|
|
InspectorTest.expectShallowEqual(parent.subviews, previousSubviews, "Inserting a view before a nonexistent view should have no effect.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.replaceSubview",
|
|
|
|
|
test() {
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let child1 = new WI.View;
|
|
|
|
|
let child2 = new WI.View;
|
|
|
|
|
parent.addSubview(child1);
|
|
|
|
|
parent.replaceSubview(child1, child2);
|
|
|
|
|
InspectorTest.expectNull(child1.parentView, "Replaced view should not have a parent.");
|
|
|
|
|
InspectorTest.expectEqual(child2.parentView, parent, "New view should have the correct parent.");
|
|
|
|
|
|
|
|
|
|
let previousSubviews = parent.subviews.slice();
|
|
|
|
|
parent.replaceSubview(child2, child2);
|
|
|
|
|
InspectorTest.expectShallowEqual(parent.subviews, previousSubviews, "Replacing a view with itself should have no effect.");
|
|
|
|
|
|
|
|
|
|
previousSubviews = parent.subviews;
|
|
|
|
|
parent.replaceSubview(new WI.View, child1);
|
|
|
|
|
InspectorTest.expectShallowEqual(parent.subviews, previousSubviews, "Replacing a nonexistent view should have no effect.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.isAttached",
|
|
|
|
|
test() {
|
|
|
|
|
let view = new WI.View;
|
|
|
|
|
WI.View.rootView().addSubview(view);
|
|
|
|
|
InspectorTest.expectThat(view.isAttached, "View added to the root should be attached.");
|
|
|
|
|
|
|
|
|
|
WI.View.rootView().removeSubview(view);
|
|
|
|
|
InspectorTest.expectFalse(view.isAttached, "View removed from the root should not be attached.");
|
|
|
|
|
|
|
|
|
|
let parent = new WI.View;
|
|
|
|
|
let child = new WI.View;
|
|
|
|
|
parent.addSubview(child);
|
|
|
|
|
InspectorTest.expectFalse(child.isAttached, "View added to a detached parent should not be attached.");
|
|
|
|
|
WI.View.rootView().addSubview(parent);
|
|
|
|
|
InspectorTest.expectThat(child.isAttached, "Attaching a view to the root causes descendent views to be attached.");
|
|
|
|
|
WI.View.rootView().removeSubview(parent);
|
|
|
|
|
InspectorTest.expectFalse(child.isAttached, "Detaching a view from the root causes descendent views to be detached.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
Web Inspector: Add Canvas tab and CanvasOverviewContentView
https://bugs.webkit.org/show_bug.cgi?id=177604
<rdar://problem/34714650>
Reviewed by Devin Rousso.
Source/WebInspectorUI:
This patch adds experimental feature support for the Canvas tab. Initially
the tab provides only an overview of the canvases in the page, and will
exist side-by-side with the existing experimental Canvas UI.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Main.js:
(WI.contentLoaded):
* UserInterface/Base/Setting.js:
* UserInterface/Images/Canvas.svg: Added.
* UserInterface/Images/CanvasOverview.svg: Added.
* UserInterface/Main.html:
Add new art and canvas UI classes.
* UserInterface/Models/Canvas.js:
(WI.Canvas.requestNode):
(WI.Canvas.prototype.requestContent):
(WI.Canvas.prototype.requestCSSCanvasClientNodes):
(WI.Canvas.prototype.requestSize.calculateSize.getAttributeValue):
(WI.Canvas.prototype.requestSize.calculateSize):
(WI.Canvas.prototype.requestSize.getPropertyValue):
(WI.Canvas.prototype.requestSize):
Use promises to retrieve canvas data asynchronously.
* UserInterface/Models/CollectionTypes.js: Added.
(WI.CanvasCollection):
New location for concrete collection types. Having a class to type check
makes using a collection as a represented object a bit simpler.
* UserInterface/Views/CanvasContentView.css:
(.content-view.canvas:not(.tab)):
(.content-view.canvas:not(.tab) > .preview):
(.content-view.canvas:not(.tab) > .preview > img):
(.content-view.canvas:not(.tab) > :matches(header, footer)):
(.content-view.canvas): Deleted.
(.content-view.canvas > .preview): Deleted.
(.content-view.canvas > .preview > img): Deleted.
During the transition to the new Canvas tab, CanvasContentView needs to
support being shown as a full-size content view, and as an item in a
CollectionContentView. Hide header and footer elements by default.
* UserInterface/Views/CanvasContentView.js:
(WI.CanvasContentView):
(WI.CanvasContentView.prototype.refresh):
(WI.CanvasContentView.prototype.initialLayout):
(WI.CanvasContentView.prototype.layout):
(WI.CanvasContentView.prototype.shown):
(WI.CanvasContentView.prototype.attached):
(WI.CanvasContentView.prototype.detached):
(WI.CanvasContentView.prototype._showError):
(WI.CanvasContentView.prototype._refreshPixelSize):
(WI.CanvasContentView.prototype._showGridButtonClicked):
(WI.CanvasContentView.prototype._updateImageGrid):
(WI.CanvasContentView.prototype._updateMemoryCost):
(WI.CanvasContentView.prototype._updatePixelSize):
(WI.CanvasContentView.prototype._updateRecordNavigationItem):
(WI.CanvasContentView.prototype.hidden): Deleted.
(WI.CanvasContentView.prototype.closed): Deleted.
(WI.CanvasContentView.prototype._showPreview): Deleted.
Added new UI for display in the Canvas overview. These elements are always
created, but only appear when the canvas is viewed as a "card".
Canvas previews are no longer shown as soon as they are available from
the backend. Instead, once the canvas content is ready a layout is scheduled.
This guarantees that refreshing all canvases at once causes no flicker,
and introduces no perceptible delay.
Finally, the "Cancel recording" tooltip has been renamed "Stop recording",
to match the behavior of the command.
* UserInterface/Views/CanvasDetailsSidebarPanel.js:
(WI.CanvasDetailsSidebarPanel.prototype._refreshSourceSection.this._canvas.requestNode.): Deleted.
Canvas.prototype.requestNode now returns a promise.
* UserInterface/Views/CanvasOverviewContentView.css: Added.
(.content-view.canvas-overview):
(.content-view.canvas-overview .content-view.canvas):
(.content-view.canvas-overview .content-view.canvas.selected:not(.is-recording)):
(.content-view.canvas-overview .content-view.canvas > :matches(header, footer)):
(.content-view.canvas-overview .content-view.canvas > header):
(.content-view.canvas-overview .content-view.canvas.is-recording > header):
(.content-view.canvas-overview .content-view.canvas > header > .titles,):
(.content-view.canvas-overview .content-view.canvas > header > .titles > .title):
(.content-view.canvas-overview .content-view.canvas > header > .titles > .subtitle,):
(.content-view.canvas-overview .content-view.canvas > header .subtitle::before):
(.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .title):
(.content-view.canvas-overview .content-view.canvas.is-recording > header > .titles > .subtitle):
(.content-view.canvas-overview .content-view.canvas.is-recording > header > .navigation-bar > .item):
(.content-view.canvas-overview .content-view.canvas > header > .navigation-bar):
(.content-view.canvas-overview .content-view.canvas:not(:hover, .is-recording) > header > .navigation-bar):
(.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop.disabled):
(.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop):
(.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):hover):
(.content-view.canvas-overview .content-view.canvas:not(.is-recording) > header > .navigation-bar > .item.record-start-stop:not(.disabled):active):
(.content-view.canvas-overview .content-view.canvas > .preview):
(.content-view.canvas-overview .content-view.canvas > .preview > img):
(.content-view.canvas-overview .content-view.canvas > .preview > .message-text-view):
(.content-view.canvas-overview .content-view.canvas > footer):
(.content-view.canvas-overview .content-view.canvas > footer .memory-cost):
Add header, navigation bar, and footer styles to CanvasContentView when
it is being shown as an item in a CollectionContentView.
* UserInterface/Views/CanvasOverviewContentView.js: Added.
(WI.CanvasOverviewContentView):
(WI.CanvasOverviewContentView.prototype.get navigationItems):
(WI.CanvasOverviewContentView.prototype.get selectionPathComponents):
(WI.CanvasOverviewContentView.prototype.hidden):
(WI.CanvasOverviewContentView.prototype.contentViewAdded):
(WI.CanvasOverviewContentView.prototype.contentViewRemoved):
(WI.CanvasOverviewContentView.prototype.attached):
(WI.CanvasOverviewContentView.prototype.detached):
(WI.CanvasOverviewContentView.prototype._refreshPreviews):
(WI.CanvasOverviewContentView.prototype._selectedPathComponentChanged):
(WI.CanvasOverviewContentView.prototype._showGridButtonClicked):
(WI.CanvasOverviewContentView.prototype._supplementalRepresentedObjectsDidChange.createCanvasPathComponent):
(WI.CanvasOverviewContentView.prototype._supplementalRepresentedObjectsDidChange):
(WI.CanvasOverviewContentView.prototype._updateNavigationItems):
(WI.CanvasOverviewContentView.prototype._updateShowImageGrid):
(WI.CanvasOverviewContentView.prototype._contentViewMouseEnter):
(WI.CanvasOverviewContentView.prototype._contentViewMouseLeave):
The overview extends CollectionContentView, adding buttons for global canvas actions
(refresh all and show/hide grid for all), and maintains a non-visible
outline of CanvasTreeElements to facilitate display of the hierarchical
path in the navigation bar.
* UserInterface/Views/CanvasTabContentView.css: Added.
(.content-view.tab.canvas .navigation-bar > .item > .hierarchical-path-component > .icon):
(.content-view.tab.canvas .navigation-bar > .item > .canvas-overview > .icon):
(.content-view.tab.canvas .navigation-bar > .item .canvas .icon):
* UserInterface/Views/CanvasTabContentView.js: Added.
(WI.CanvasTabContentView):
(WI.CanvasTabContentView.tabInfo):
(WI.CanvasTabContentView.isTabAllowed):
(WI.CanvasTabContentView.prototype.get type):
(WI.CanvasTabContentView.prototype.get supportsSplitContentBrowser):
(WI.CanvasTabContentView.prototype.canShowRepresentedObject):
(WI.CanvasTabContentView.prototype.shown):
(WI.CanvasTabContentView.prototype.treeElementForRepresentedObject):
(WI.CanvasTabContentView.prototype.restoreFromCookie):
(WI.CanvasTabContentView.prototype.saveStateToCookie):
(WI.CanvasTabContentView.prototype.attached):
(WI.CanvasTabContentView.prototype.detached):
(WI.CanvasTabContentView.prototype._canvasAdded):
(WI.CanvasTabContentView.prototype._canvasRemoved):
(WI.CanvasTabContentView.prototype._overviewPathComponentClicked):
(WI.CanvasTabContentView.prototype._mainResourceDidChange):
* UserInterface/Views/CollectionContentView.js:
(WI.CollectionContentView):
(WI.CollectionContentView.prototype.setSelectedItem):
(WI.CollectionContentView.prototype.addContentViewForItem):
(WI.CollectionContentView.prototype.removeContentViewForItem):
(WI.CollectionContentView.prototype.initialLayout):
(WI.CollectionContentView.prototype._showContentPlaceholder):
(WI.CollectionContentView.prototype._hideContentPlaceholder):
Placeholder content should be created lazily, and shown after a slight delay
to give represented objects a chance to load. Make sure to call the
shown or hidden method after adding or removing a content view.
* UserInterface/Views/SettingsTabContentView.js:
(WI.SettingsTabContentView.prototype._createExperimentalSettingsView):
* UserInterface/Views/Variables.css:
(:root):
(body.window-inactive *):
* UserInterface/Views/View.js:
(WI.View.fromElement):
LayoutTests:
Add test for new static function View.fromElement.
* inspector/view/basics-expected.txt:
* inspector/view/basics.html:
Canonical link: https://commits.webkit.org/194282@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@223011 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2017-10-06 23:31:42 +00:00
|
|
|
suite.addTestCase({
|
|
|
|
|
name: "View.fromElement",
|
|
|
|
|
test() {
|
|
|
|
|
let view = new WI.View;
|
|
|
|
|
InspectorTest.expectEqual(WI.View.fromElement(view.element), view, "Should be able to lookup an existing view from its element.");
|
|
|
|
|
InspectorTest.expectNull(WI.View.fromElement(document.createElement("div")), "Should return null for an element not associated with any view.");
|
|
|
|
|
InspectorTest.expectNull(WI.View.fromElement({}), "Should return null for non-element.");
|
|
|
|
|
InspectorTest.expectNull(WI.View.fromElement(null), "Should return null for null element.");
|
|
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2017-10-03 16:12:26 +00:00
|
|
|
suite.runTestCasesAndFinish();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="runTest()">
|
|
|
|
|
<p>Testing basic View operations: root view access, view creation, and subview management.</p>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|