Commit fd501dfc authored by timothy@apple.com's avatar timothy@apple.com

Adds the UI portions of the Scripts panel to the Web Inspector.

The Scripts panel has not been added to the toolbar yet.

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

Reviewed by Adam Roben.

* English.lproj/InspectorLocalizedStrings.js: Changed "Show inherited properties"
to "Show inherited". Adds new strings for the Scripts' panel tooltips.
* page/inspector/BreakpointsSidebarPane.js: Added.
* page/inspector/CallStackSidebarPane.js: Added.
* page/inspector/Images/back.png: Added.
* page/inspector/Images/debuggerContinue.png: Added.
* page/inspector/Images/debuggerPause.png: Added.
* page/inspector/Images/debuggerStepInto.png: Added.
* page/inspector/Images/debuggerStepOut.png: Added.
* page/inspector/Images/debuggerStepOver.png: Added.
* page/inspector/Images/forward.png: Added.
* page/inspector/Images/statusbarResizerHorizontal.png: Added.
* page/inspector/PropertiesSection.js:
(WebInspector.PropertiesSection): Flip the order the subtile is appended
so it can float right in the CSS.
* page/inspector/ScriptsPanel.js: Added.
* page/inspector/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection): Changed "Show inherited properties"
to "Show inherited".
* page/inspector/inspector.css: Added new CSS rules for the Scripts panel.
Also changes the look of the section to match the mockup, this affects
Styles and Properties in Elements.
* page/inspector/inspector.html: Import new files.
* page/inspector/inspector.js:
(Preferences.minScriptsSidebarWidth): Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@32343 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 65face5e
2008-04-21 Timothy Hatcher <timothy@apple.com>
Adds the UI portions of the Scripts panel to the Web Inspector.
The Scripts panel has not been added to the toolbar yet.
https://bugs.webkit.org/show_bug.cgi?id=18601
Reviewed by Adam Roben.
* English.lproj/InspectorLocalizedStrings.js: Changed "Show inherited properties"
to "Show inherited". Adds new strings for the Scripts' panel tooltips.
* page/inspector/BreakpointsSidebarPane.js: Added.
* page/inspector/CallStackSidebarPane.js: Added.
* page/inspector/Images/back.png: Added.
* page/inspector/Images/debuggerContinue.png: Added.
* page/inspector/Images/debuggerPause.png: Added.
* page/inspector/Images/debuggerStepInto.png: Added.
* page/inspector/Images/debuggerStepOut.png: Added.
* page/inspector/Images/debuggerStepOver.png: Added.
* page/inspector/Images/forward.png: Added.
* page/inspector/Images/statusbarResizerHorizontal.png: Added.
* page/inspector/PropertiesSection.js:
(WebInspector.PropertiesSection): Flip the order the subtile is appended
so it can float right in the CSS.
* page/inspector/ScriptsPanel.js: Added.
* page/inspector/StylesSidebarPane.js:
(WebInspector.StylePropertiesSection): Changed "Show inherited properties"
to "Show inherited".
* page/inspector/inspector.css: Added new CSS rules for the Scripts panel.
Also changes the look of the section to match the mockup, this affects
Styles and Properties in Elements.
* page/inspector/inspector.html: Import new files.
* page/inspector/inspector.js:
(Preferences.minScriptsSidebarWidth): Added.
2008-04-21 Kevin McCullough <kmccullough@apple.com>
Reviewed by Adam.
/*
* Copyright (C) 2008 Apple Inc. All Rights Reserved.
*
* 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. ``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
* 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.
*/
WebInspector.BreakpointsSidebarPane = function()
{
WebInspector.SidebarPane.call(this, WebInspector.UIString("Breakpoints"));
}
WebInspector.BreakpointsSidebarPane.prototype = {
}
WebInspector.BreakpointsSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
/*
* Copyright (C) 2008 Apple Inc. All Rights Reserved.
*
* 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. ``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
* 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.
*/
WebInspector.CallStackSidebarPane = function()
{
WebInspector.SidebarPane.call(this, WebInspector.UIString("Call Stack"));
}
WebInspector.CallStackSidebarPane.prototype = {
}
WebInspector.CallStackSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
......@@ -40,8 +40,9 @@ WebInspector.PropertiesSection = function(title, subtitle)
this.subtitleElement = document.createElement("div");
this.subtitleElement.className = "subtitle";
this.headerElement.appendChild(this.titleElement);
this.headerElement.appendChild(this.subtitleElement);
this.headerElement.appendChild(this.titleElement);
this.headerElement.addEventListener("click", this.toggleExpanded.bind(this), false);
this.propertiesElement = document.createElement("ol");
......
/*
* Copyright (C) 2008 Apple Inc. All Rights Reserved.
*
* 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. ``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
* 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.
*/
WebInspector.ScriptsPanel = function()
{
WebInspector.Panel.call(this);
this.element.addStyleClass("scripts");
this.topStatusBar = document.createElement("div");
this.topStatusBar.className = "status-bar";
this.topStatusBar.id = "scripts-status-bar";
this.element.appendChild(this.topStatusBar);
this.backButton = document.createElement("button");
this.backButton.className = "status-bar-item";
this.backButton.id = "scripts-back";
this.backButton.title = WebInspector.UIString("Show the previous script resource.");
this.backButton.disabled = true;
this.backButton.appendChild(document.createElement("img"));
this.topStatusBar.appendChild(this.backButton);
this.forwardButton = document.createElement("button");
this.forwardButton.className = "status-bar-item";
this.forwardButton.id = "scripts-forward";
this.forwardButton.title = WebInspector.UIString("Show the next script resource.");
this.forwardButton.disabled = true;
this.forwardButton.appendChild(document.createElement("img"));
this.topStatusBar.appendChild(this.forwardButton);
this.filesSelectElement = document.createElement("select");
this.filesSelectElement.className = "status-bar-item";
this.filesSelectElement.id = "scripts-files";
this.topStatusBar.appendChild(this.filesSelectElement);
this.functionsSelectElement = document.createElement("select");
this.functionsSelectElement.className = "status-bar-item";
this.functionsSelectElement.id = "scripts-functions";
this.topStatusBar.appendChild(this.functionsSelectElement);
this.sidebarButtonsElement = document.createElement("div");
this.sidebarButtonsElement.id = "scripts-sidebar-buttons";
this.topStatusBar.appendChild(this.sidebarButtonsElement);
this.pauseButton = document.createElement("button");
this.pauseButton.className = "status-bar-item";
this.pauseButton.id = "scripts-pause";
this.pauseButton.title = WebInspector.UIString("Pause script execution.");
this.pauseButton.appendChild(document.createElement("img"));
this.sidebarButtonsElement.appendChild(this.pauseButton);
this.stepOverButton = document.createElement("button");
this.stepOverButton.className = "status-bar-item";
this.stepOverButton.id = "scripts-step-over";
this.stepOverButton.title = WebInspector.UIString("Step over next function call.");
this.stepOverButton.disabled = true;
this.stepOverButton.appendChild(document.createElement("img"));
this.sidebarButtonsElement.appendChild(this.stepOverButton);
this.stepIntoButton = document.createElement("button");
this.stepIntoButton.className = "status-bar-item";
this.stepIntoButton.id = "scripts-step-into";
this.stepIntoButton.title = WebInspector.UIString("Step into next function call.");
this.stepIntoButton.disabled = true;
this.stepIntoButton.appendChild(document.createElement("img"));
this.sidebarButtonsElement.appendChild(this.stepIntoButton);
this.stepOutButton = document.createElement("button");
this.stepOutButton.className = "status-bar-item";
this.stepOutButton.id = "scripts-step-out";
this.stepOutButton.title = WebInspector.UIString("Step out of current function.");
this.stepOutButton.disabled = true;
this.stepOutButton.appendChild(document.createElement("img"));
this.sidebarButtonsElement.appendChild(this.stepOutButton);
this.debuggerStatusElement = document.createElement("div");
this.debuggerStatusElement.id = "scripts-debugger-status";
this.sidebarButtonsElement.appendChild(this.debuggerStatusElement);
this.scriptResourceViews = document.createElement("div");
this.scriptResourceViews.id = "script-resource-views";
this.sidebarElement = document.createElement("div");
this.sidebarElement.id = "scripts-sidebar";
this.sidebarResizeElement = document.createElement("div");
this.sidebarResizeElement.className = "sidebar-resizer-vertical";
this.sidebarResizeElement.addEventListener("mousedown", this._startSidebarResizeDrag.bind(this), false);
this.sidebarResizeWidgetElement = document.createElement("div");
this.sidebarResizeWidgetElement.id = "scripts-sidebar-resizer-widget";
this.sidebarResizeWidgetElement.addEventListener("mousedown", this._startSidebarResizeDrag.bind(this), false);
this.topStatusBar.appendChild(this.sidebarResizeWidgetElement);
this.sidebarPanes = {};
this.sidebarPanes.callstack = new WebInspector.CallStackSidebarPane();
this.sidebarPanes.breakpoints = new WebInspector.BreakpointsSidebarPane();
for (var pane in this.sidebarPanes)
this.sidebarElement.appendChild(this.sidebarPanes[pane].element);
this.element.appendChild(this.scriptResourceViews);
this.element.appendChild(this.sidebarElement);
this.element.appendChild(this.sidebarResizeElement);
}
WebInspector.ScriptsPanel.prototype = {
toolbarItemClass: "scripts",
get toolbarItemLabel()
{
return WebInspector.UIString("Scripts");
},
get statusBarItems()
{
return [];
},
show: function()
{
WebInspector.Panel.prototype.show.call(this);
this.sidebarResizeElement.style.right = (this.sidebarElement.offsetWidth - 3) + "px";
},
_startSidebarResizeDrag: function(event)
{
WebInspector.elementDragStart(this.sidebarElement, this._sidebarResizeDrag.bind(this), this._endSidebarResizeDrag.bind(this), event, "col-resize");
if (event.target === this.sidebarResizeWidgetElement)
this._dragOffset = (event.target.offsetWidth - (event.pageX - event.target.totalOffsetLeft));
else
this._dragOffset = 0;
},
_endSidebarResizeDrag: function(event)
{
WebInspector.elementDragEnd(event);
delete this._dragOffset;
},
_sidebarResizeDrag: function(event)
{
var x = event.pageX + this._dragOffset;
var newWidth = Number.constrain(window.innerWidth - x, Preferences.minScriptsSidebarWidth, window.innerWidth * 0.66);
this.sidebarElement.style.width = newWidth + "px";
this.sidebarButtonsElement.style.width = newWidth + "px";
this.scriptResourceViews.style.right = newWidth + "px";
this.sidebarResizeWidgetElement.style.right = newWidth + "px";
this.sidebarResizeElement.style.right = (newWidth - 3) + "px";
event.preventDefault();
},
}
WebInspector.ScriptsPanel.prototype.__proto__ = WebInspector.Panel.prototype;
......@@ -250,7 +250,7 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl
showInheritedLabel.addEventListener("click", showInheritedToggleFunction, false);
showInheritedLabel.appendChild(showInheritedInput);
showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited properties")));
showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited")));
this.subtitleElement.appendChild(showInheritedLabel);
} else {
if (!subtitle) {
......
......@@ -251,6 +251,7 @@ body.console-visible #main-panels {
height: 24px;
padding: 0;
margin-left: -1px;
margin-right: 0;
vertical-align: top;
border: 0 transparent none;
background-color: transparent;
......@@ -272,6 +273,10 @@ button.status-bar-item:active {
background-position: 32px 0;
}
button.status-bar-item:disabled {
background-position: 0 0 !important;
}
select.status-bar-item {
min-width: 48px;
border-width: 0 17px 0 2px;
......@@ -808,37 +813,35 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
}
.section {
display: block;
-webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
-webkit-border-radius: 8px;
background-color: white;
font-size: 11px;
margin-bottom: 8px;
position: relative;
margin-top: 1px;
}
.section .header {
padding: 2px 8px 4px;
border: 2px solid rgba(255, 255, 255, 0.5);
background-color: rgb(214, 221, 229);
background-image: url(Images/gradient.png);
background-repeat: repeat-x;
background-position: bottom;
-webkit-background-size: auto 100%;
-webkit-border-radius: 8px;
text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
padding: 3px 8px 4px 16px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 172, 205)), to(rgb(132, 146, 190)));
min-height: 18px;
white-space: nowrap;
}
.section.expanded .header {
border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
.section .header::before {
position: absolute;
top: 4px;
left: 6px;
width: 8px;
height: 8px;
content: url(Images/treeRightTriangleWhite.png);
}
.section.expanded .header::before {
content: url(Images/treeDownTriangleWhite.png);
}
.section .header .title {
color: white;
font-weight: bold;
word-wrap: break-word;
white-space: normal;
}
.section .header label {
......@@ -850,18 +853,22 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
}
.section .header input[type=checkbox] {
height: 1em;
width: 1em;
height: 10px;
width: 10px;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
vertical-align: top;
vertical-align: 2px;
}
.section .header .subtitle {
margin-top: 2px;
float: right;
font-size: 10px;
word-wrap: break-word;
margin-left: 5px;
max-width: 55%;
color: rgba(255, 255, 255, 0.7);
text-overflow: ellipsis;
overflow: hidden;
}
.section .header .subtitle a {
......@@ -873,6 +880,7 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
margin: 0;
padding: 2px 6px 5px;
list-style: none;
background-color: white;
}
.section.expanded .properties {
......@@ -986,10 +994,11 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
.swatch {
display: inline-block;
vertical-align: middle;
vertical-align: baseline;
margin-left: 4px;
width: 0.75em;
height: 0.75em;
margin-bottom: -1px;
width: 1em;
height: 1em;
border: 1px solid rgb(180, 180, 180);
}
......@@ -1001,8 +1010,7 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
background-image: url(Images/paneHeader.png);
background-repeat: repeat-x;
background-position: bottom;
-webkit-background-size: auto 100%;
height: 14px;
height: 16px;
padding: 0 6px;
border-top: 1px solid rgb(129, 129, 129);
border-bottom: 1px solid rgb(129, 129, 129);
......@@ -1032,9 +1040,9 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
.pane > .body {
position: relative;
padding: 8px;
display: none;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
.pane.expanded > .body, .pane.expanded > .growbar {
......@@ -1051,6 +1059,7 @@ body:not(.inactive) .focused .outline-disclosure li.selected * {
}
.metrics {
padding: 8px;
font-size: 10px;
text-align: center;
white-space: nowrap;
......@@ -1323,6 +1332,102 @@ body.inactive .sidebar {
background-image: url(Images/errorIcon.png);
}
#scripts-status-bar {
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 24px;
}
#scripts-status-bar .status-bar-item img {
margin-top: 2px;
}
#scripts-status-bar .status-bar-item:disabled img {
opacity: 0.5;
}
#scripts-back img {
content: url(Images/back.png);
}
#scripts-forward img {
content: url(Images/forward.png);
}
#scripts-pause img {
content: url(Images/debuggerPause.png);
}
#scripts-step-over img {
content: url(Images/debuggerStepOver.png);
}
#scripts-step-into img {
content: url(Images/debuggerStepInto.png);
}
#scripts-step-out img {
content: url(Images/debuggerStepOut.png);
}
#scripts-debugger-status {
position: absolute;
line-height: 24px;
top: 0;
right: 8px;
}
#scripts-debugger-status:empty {
display: none;
}
#scripts-sidebar-resizer-widget {
position: absolute;
top: 0;
bottom: 0;
right: 225px;
width: 16px;
cursor: col-resize;
background-image: url(Images/statusbarResizerHorizontal.png);
background-repeat: no-repeat;
background-position: center;
}
#scripts-sidebar-buttons {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 225px;
overflow: hidden;
border-left: 1px solid rgb(64%, 64%, 64%);
}
#script-resource-views {
display: block;
overflow: auto;
padding: 0;
position: absolute;
top: 23px;
left: 0;
right: 225px;
bottom: 0;
}
#scripts-sidebar {
position: absolute;
top: 23px;
right: 0;
bottom: 0;
width: 225px;
background-color: rgb(232, 232, 232);
border-left: 1px solid rgb(64%, 64%, 64%);
cursor: default;
overflow: auto;
}
#resources-larger-resources-status-bar-item {
background-image: url(Images/largerResourcesButtons.png);
}
......
......@@ -42,12 +42,15 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
<script type="text/javascript" src="SidebarPane.js"></script>
<script type="text/javascript" src="SidebarTreeElement.js"></script>
<script type="text/javascript" src="PropertiesSection.js"></script>
<script type="text/javascript" src="BreakpointsSidebarPane.js"></script>
<script type="text/javascript" src="CallStackSidebarPane.js"></script>
<script type="text/javascript" src="MetricsSidebarPane.js"></script>
<script type="text/javascript" src="PropertiesSidebarPane.js"></script>
<script type="text/javascript" src="StylesSidebarPane.js"></script>
<script type="text/javascript" src="Panel.js"></script>
<script type="text/javascript" src="ElementsPanel.js"></script>
<script type="text/javascript" src="ResourcesPanel.js"></script>
<script type="text/javascript" src="ScriptsPanel.js"></script>
<script type="text/javascript" src="DatabasesPanel.js"></script>
<script type="text/javascript" src="ResourceView.js"></script>
<script type="text/javascript" src="SourceView.js"></script>
......
......@@ -35,6 +35,7 @@ var Preferences = {
minConsoleHeight: 75,
minSidebarWidth: 100,
minElementsSidebarWidth: 200,
minScriptsSidebarWidth: 200,
showInheritedComputedStyleProperties: false,
showMissingLocalizedStrings: false
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment