Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (221165 => 221166)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-08-24 22:43:08 UTC (rev 221166)
@@ -1,3 +1,19 @@
+2017-08-24 Ross Kirsling <ross.kirsl...@sony.com>
+
+ Web Inspector: Create experimental Layers tab
+ https://bugs.webkit.org/show_bug.cgi?id=175728
+
+ Reviewed by Devin Rousso.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Base/Main.js:
+ * UserInterface/Base/Setting.js:
+ * UserInterface/Images/Layers.svg: Added.
+ * UserInterface/Main.html:
+ * UserInterface/Views/Layers3DContentView.js: Added.
+ * UserInterface/Views/LayersTabContentView.js: Added.
+ * UserInterface/Views/SettingsTabContentView.js:
+
2017-08-24 Devin Rousso <web...@devinrousso.com>
Web Inspector: Table grid shouldn't show behind empty state
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (221165 => 221166)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -347,6 +347,7 @@
localizedStrings["Elements"] = "Elements";
localizedStrings["Enable Breakpoint"] = "Enable Breakpoint";
localizedStrings["Enable Breakpoints"] = "Enable Breakpoints";
+localizedStrings["Enable Layers Tab"] = "Enable Layers Tab";
localizedStrings["Enable Program"] = "Enable Program";
localizedStrings["Enable all breakpoints (%s)"] = "Enable all breakpoints (%s)";
localizedStrings["Enable breakpoints"] = "Enable breakpoints";
@@ -501,6 +502,7 @@
localizedStrings["Layer Count: %d"] = "Layer Count: %d";
localizedStrings["Layer Info"] = "Layer Info";
localizedStrings["Layers"] = "Layers";
+localizedStrings["Layers:"] = "Layers:";
localizedStrings["Layout"] = "Layout";
localizedStrings["Layout & Rendering"] = "Layout & Rendering";
localizedStrings["Layout Invalidated"] = "Layout Invalidated";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (221165 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -433,6 +433,7 @@
WI.ConsoleTabContentView,
WI.DebuggerTabContentView,
WI.ElementsTabContentView,
+ WI.LayersTabContentView,
WI.NetworkTabContentView,
WI.NewTabContentView,
WI.RecordingTabContentView,
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js (221165 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Setting.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -126,4 +126,5 @@
// Experimental
experimentalShowCanvasContextsInResources: new WI.Setting("experimental-show-canvas-contexts-in-resources", false),
experimentalSpreadsheetStyleEditor: new WI.Setting("experimental-spreadsheet-style-editor", false),
+ experimentalEnableLayersTab: new WI.Setting("experimental-enable-layers-tab", false),
};
Added: trunk/Source/WebInspectorUI/UserInterface/Images/Layers.svg (0 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Images/Layers.svg (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Images/Layers.svg 2017-08-24 22:43:08 UTC (rev 221166)
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2017 Sony Interactive Entertainment Inc. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect fill="none" stroke="currentColor" x="5.5" y="5.5" width="9" height="9"/>
+ <path fill="none" stroke="currentColor" d="M 5.5 12.5 L 3.5 12.5 L 3.5 3.5 L 12.5 3.5 L 12.5 5.5"/>
+ <path fill="none" stroke="currentColor" d="M 3.5 10.5 L 1.5 10.5 L 1.5 1.5 L 10.5 1.5 L 10.5 3.5"/>
+</svg>
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (221165 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2017-08-24 22:43:08 UTC (rev 221166)
@@ -251,6 +251,9 @@
<script src=""
+ <script src=""
+ <script src=""
+
<script src=""
<script src=""
<script src=""
@@ -488,6 +491,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
@@ -619,6 +623,7 @@
<script src=""
<script src=""
<script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Added: trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js (0 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Layers3DContentView.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -0,0 +1,206 @@
+/*
+ * Copyright (C) 2017 Sony Interactive Entertainment Inc.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.Layers3DContentView = class Layers3DContentView extends WI.ContentView
+{
+ constructor()
+ {
+ super();
+
+ this.element.classList.add("layers-3d");
+
+ WI.layerTreeManager.addEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+ this._layersChangedWhileHidden = false;
+ this._renderer = null;
+ this._camera = null;
+ this._controls = null;
+ this._boundsGroup = null;
+ this._compositedBoundsGroup = null;
+ this._scene = null;
+ this._animationFrameRequestId = null;
+ }
+
+ // Public
+
+ shown()
+ {
+ super.shown();
+
+ if (this._layersChangedWhileHidden) {
+ this._layersChangedWhileHidden = false;
+
+ this.updateLayout();
+ }
+
+ if (this.didInitialLayout)
+ this._animate();
+ }
+
+ hidden()
+ {
+ this._stopAnimation();
+
+ super.hidden();
+ }
+
+ closed()
+ {
+ WI.layerTreeManager.removeEventListener(WI.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+ super.closed();
+ }
+
+ // Protected
+
+ initialLayout()
+ {
+ super.initialLayout();
+
+ this._renderer = new THREE.WebGLRenderer({antialias: true});
+ this._renderer.setClearColor("white");
+ this._renderer.setSize(this.element.offsetWidth, this.element.offsetHeight);
+
+ this._camera = new THREE.PerspectiveCamera(45, this.element.offsetWidth / this.element.offsetHeight, 1, 100000);
+ this._camera.position.set(0, 0, 4000);
+ this._camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+ this._controls = new THREE.OrbitControls(this._camera, this._renderer.domElement);
+ this._controls.enableDamping = true;
+ this._controls.enableZoom = false;
+ this._controls.enablePan = false;
+ this._controls.minAzimuthAngle = -Math.PI / 2;
+ this._controls.maxAzimuthAngle = Math.PI / 2;
+
+ this._boundsGroup = new THREE.Group();
+ this._compositedBoundsGroup = new THREE.Group();
+
+ this._scene = new THREE.Scene();
+ this._scene.position.set(-this.element.offsetWidth / 2, this.element.offsetHeight / 2, 0);
+ this._scene.add(this._boundsGroup);
+ this._scene.add(this._compositedBoundsGroup);
+
+ this.element.appendChild(this._renderer.domElement);
+
+ this._animate();
+ }
+
+ layout()
+ {
+ if (this.layoutReason === WI.View.LayoutReason.Resize)
+ return;
+
+ WI.domTreeManager.requestDocument((node) => {
+ WI.layerTreeManager.layersForNode(node, (layerForNode, childLayers) => {
+ this._clearLayers();
+ for (let i = 0; i < childLayers.length; i++)
+ this._addLayer(childLayers[i], i);
+ });
+ });
+ }
+
+ sizeDidChange()
+ {
+ super.sizeDidChange();
+
+ this._stopAnimation();
+ this._camera.aspect = this.element.offsetWidth / this.element.offsetHeight;
+ this._camera.updateProjectionMatrix();
+ this._renderer.setSize(this.element.offsetWidth, this.element.offsetHeight);
+ this._animate();
+ }
+
+ // Private
+
+ _layerTreeDidChange(event)
+ {
+ if (!this.visible) {
+ this._layersChangedWhileHidden = true;
+ return;
+ }
+
+ this.needsLayout();
+ }
+
+ _animate()
+ {
+ this._controls.update();
+ this._renderer.render(this._scene, this._camera);
+ this._animationFrameRequestId = requestAnimationFrame(() => { this._animate(); });
+ }
+
+ _stopAnimation()
+ {
+ cancelAnimationFrame(this._animationFrameRequestId);
+ this._animationFrameRequestId = null;
+ }
+
+ _clearLayers()
+ {
+ this._boundsGroup.children.length = 0;
+ this._compositedBoundsGroup.children.length = 0;
+ }
+
+ _addLayer(layer, index)
+ {
+ let compositedBounds = {
+ x: layer.bounds.x,
+ y: layer.bounds.y,
+ width: layer.compositedBounds.width,
+ height: layer.compositedBounds.height,
+ };
+
+ this._boundsGroup.add(this._createLayerMesh(layer.bounds, index));
+ this._compositedBoundsGroup.add(this._createLayerMesh(compositedBounds, index, true));
+ }
+
+ _createLayerMesh(rect, index, isOutline = false)
+ {
+ const zInterval = 25;
+
+ let geometry = new THREE.Geometry();
+ geometry.vertices.push(new THREE.Vector3(rect.x, -rect.y, index * zInterval));
+ geometry.vertices.push(new THREE.Vector3(rect.x + rect.width, -rect.y, index * zInterval));
+ geometry.vertices.push(new THREE.Vector3(rect.x + rect.width, -rect.y - rect.height, index * zInterval));
+ geometry.vertices.push(new THREE.Vector3(rect.x, -rect.y - rect.height, index * zInterval));
+
+ if (isOutline) {
+ let material = new THREE.LineBasicMaterial({color: "hsl(79, 45%, 50%)"});
+ return new THREE.LineLoop(geometry, material);
+ }
+
+ geometry.faces.push(new THREE.Face3(0, 1, 3));
+ geometry.faces.push(new THREE.Face3(1, 2, 3));
+
+ let material = new THREE.MeshBasicMaterial({
+ color: "hsl(76, 49%, 75%)",
+ transparent: true,
+ opacity: 0.4,
+ side: THREE.DoubleSide,
+ });
+
+ return new THREE.Mesh(geometry, material);
+ }
+};
Added: trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js (0 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayersTabContentView.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2017 Sony Interactive Entertainment Inc.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WI.LayersTabContentView = class LayersTabContentView extends WI.ContentBrowserTabContentView
+{
+ constructor()
+ {
+ let {image, title} = WI.LayersTabContentView.tabInfo();
+ let tabBarItem = new WI.GeneralTabBarItem(image, title);
+
+ const navigationSidebarPanelConstructor = null;
+ const detailsSidebarPanelConstructors = null;
+ const disableBackForward = true;
+ super("layers", "layers", tabBarItem, navigationSidebarPanelConstructor, detailsSidebarPanelConstructors, disableBackForward);
+
+ this._layers3DContentView = new WI.Layers3DContentView;
+ }
+
+ // Static
+
+ static tabInfo()
+ {
+ return {
+ image: "Images/Layers.svg",
+ title: WI.UIString("Layers"),
+ };
+ }
+
+ static isTabAllowed()
+ {
+ return window.LayerTreeAgent && WI.settings.experimentalEnableLayersTab.value;
+ }
+
+ // Public
+
+ get type() { return WI.LayersTabContentView.Type; }
+ get supportsSplitContentBrowser() { return false; }
+
+ shown()
+ {
+ super.shown();
+
+ this.contentBrowser.showContentView(this._layers3DContentView);
+ }
+};
+
+WI.LayersTabContentView.Type = "layers";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js (221165 => 221166)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2017-08-24 22:37:15 UTC (rev 221165)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js 2017-08-24 22:43:08 UTC (rev 221166)
@@ -241,6 +241,12 @@
experimentalSettingsView.addSeparator();
+ if (window.LayerTreeAgent) {
+ experimentalSettingsView.addSetting(WI.UIString("Layers:"), WI.settings.experimentalEnableLayersTab, WI.UIString("Enable Layers Tab"));
+
+ experimentalSettingsView.addSeparator();
+ }
+
let reloadInspectorButton = document.createElement("button");
reloadInspectorButton.textContent = WI.UIString("Reload Web Inspector");
reloadInspectorButton.addEventListener("click", () => { window.location.reload(); });
@@ -260,6 +266,9 @@
listenForChange(WI.settings.experimentalSpreadsheetStyleEditor);
+ if (window.LayerTreeAgent)
+ listenForChange(WI.settings.experimentalEnableLayersTab);
+
this.addSettingsView(experimentalSettingsView);
}
