<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[181903] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/181903">181903</a></dd>
<dt>Author</dt> <dd>burg@cs.washington.edu</dd>
<dt>Date</dt> <dd>2015-03-24 13:41:47 -0700 (Tue, 24 Mar 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: unify resizer implementations used by DataGrid and Sidebar
https://bugs.webkit.org/show_bug.cgi?id=142407
Reviewed by Timothy Hatcher.
Both of these implementations do the same thing slightly differently. Unify the code
and use the "glass pane" technique to preserve cursor while dragging over links or text.
This patch implements vertical and horizontal rule orientations. Further refactorings
to use this class may need to add "Indeterminate" orientation to support moving the inspector
window by its fake toolbar element.
* UserInterface/Main.html:
* UserInterface/Views/DataGrid.css:
(.data-grid .resizer):
(.data-grid-resizer): Deleted.
* UserInterface/Views/DataGrid.js: Store Resizer instances rather than resizer elements.
Use symbols to secretly store neighbor column ids on the resizer objects. Stop using
WebInspector.elementDragStart, as I would like to deprecate it in favor of Resizer instances.
(WebInspector.DataGrid):
(WebInspector.DataGrid.prototype._positionResizerElements):
(WebInspector.DataGrid.prototype.resizerDragStarted):
(WebInspector.DataGrid.prototype.resizerDragging):
(WebInspector.DataGrid.prototype.resizerDragEnded):
(WebInspector.DataGrid.prototype._startResizerDragging): Deleted.
(WebInspector.DataGrid.prototype._resizerDragging): Deleted.
(WebInspector.DataGrid.prototype._endResizerDragging): Deleted.
* UserInterface/Views/Resizer.css:
(.resizer):
(.resizer.vertical-rule):
(.resizer.horizontal-rule):
(.glass-pane-for-drag):
* UserInterface/Views/Resizer.js: Added.
(WebInspector.Resizer):
(WebInspector.Resizer.prototype.get element):
(WebInspector.Resizer.prototype.get orientation):
(WebInspector.Resizer.prototype.get initialPosition):
(WebInspector.Resizer.prototype._currentPosition):
(WebInspector.Resizer.prototype._resizerMouseDown):
(WebInspector.Resizer.prototype._resizerMouseMoved):
(WebInspector.Resizer.prototype._resizerMouseUp):
* UserInterface/Views/Sidebar.css:
(.sidebar > .resizer): Deleted.
* UserInterface/Views/Sidebar.js:
(WebInspector.Sidebar):
(WebInspector.Sidebar.prototype.resizerDragStarted):
(WebInspector.Sidebar.prototype.resizerDragging):
(WebInspector.Sidebar.prototype.resizerDragEnded):
(WebInspector.Sidebar.prototype._navigationItemSelected):
(WebInspector.Sidebar.prototype._resizerMouseDown): Deleted.
(WebInspector.Sidebar.prototype._resizerMouseMoved): Deleted.
(WebInspector.Sidebar.prototype._resizerMouseUp): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs">trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarcss">trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs">trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResizercss">trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResizerjs">trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -1,3 +1,59 @@
</span><ins>+2015-03-06 Brian J. Burg <burg@cs.washington.edu>
+
+ Web Inspector: unify resizer implementations used by DataGrid and Sidebar
+ https://bugs.webkit.org/show_bug.cgi?id=142407
+
+ Reviewed by Timothy Hatcher.
+
+ Both of these implementations do the same thing slightly differently. Unify the code
+ and use the "glass pane" technique to preserve cursor while dragging over links or text.
+
+ This patch implements vertical and horizontal rule orientations. Further refactorings
+ to use this class may need to add "Indeterminate" orientation to support moving the inspector
+ window by its fake toolbar element.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/DataGrid.css:
+ (.data-grid .resizer):
+ (.data-grid-resizer): Deleted.
+ * UserInterface/Views/DataGrid.js: Store Resizer instances rather than resizer elements.
+ Use symbols to secretly store neighbor column ids on the resizer objects. Stop using
+ WebInspector.elementDragStart, as I would like to deprecate it in favor of Resizer instances.
+
+ (WebInspector.DataGrid):
+ (WebInspector.DataGrid.prototype._positionResizerElements):
+ (WebInspector.DataGrid.prototype.resizerDragStarted):
+ (WebInspector.DataGrid.prototype.resizerDragging):
+ (WebInspector.DataGrid.prototype.resizerDragEnded):
+ (WebInspector.DataGrid.prototype._startResizerDragging): Deleted.
+ (WebInspector.DataGrid.prototype._resizerDragging): Deleted.
+ (WebInspector.DataGrid.prototype._endResizerDragging): Deleted.
+ * UserInterface/Views/Resizer.css:
+ (.resizer):
+ (.resizer.vertical-rule):
+ (.resizer.horizontal-rule):
+ (.glass-pane-for-drag):
+ * UserInterface/Views/Resizer.js: Added.
+ (WebInspector.Resizer):
+ (WebInspector.Resizer.prototype.get element):
+ (WebInspector.Resizer.prototype.get orientation):
+ (WebInspector.Resizer.prototype.get initialPosition):
+ (WebInspector.Resizer.prototype._currentPosition):
+ (WebInspector.Resizer.prototype._resizerMouseDown):
+ (WebInspector.Resizer.prototype._resizerMouseMoved):
+ (WebInspector.Resizer.prototype._resizerMouseUp):
+ * UserInterface/Views/Sidebar.css:
+ (.sidebar > .resizer): Deleted.
+ * UserInterface/Views/Sidebar.js:
+ (WebInspector.Sidebar):
+ (WebInspector.Sidebar.prototype.resizerDragStarted):
+ (WebInspector.Sidebar.prototype.resizerDragging):
+ (WebInspector.Sidebar.prototype.resizerDragEnded):
+ (WebInspector.Sidebar.prototype._navigationItemSelected):
+ (WebInspector.Sidebar.prototype._resizerMouseDown): Deleted.
+ (WebInspector.Sidebar.prototype._resizerMouseMoved): Deleted.
+ (WebInspector.Sidebar.prototype._resizerMouseUp): Deleted.
+
</ins><span class="cx"> 2015-03-17 Jono Wells <jonowells@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Debugger sidebar should have a filter button for breakpoints
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -110,6 +110,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/QuickConsole.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ReplayDashboardView.css">
</span><ins>+ <link rel="stylesheet" href="Views/Resizer.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/ResourceIcons.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ResourceTreeElement.css">
</span><span class="lines">@@ -445,6 +446,7 @@
</span><span class="cx"> <script src="Views/QuickConsoleNavigationBar.js"></script>
</span><span class="cx"> <script src="Views/RadioButtonNavigationItem.js"></script>
</span><span class="cx"> <script src="Views/ReplayDashboardView.js"></script>
</span><ins>+ <script src="Views/Resizer.js"></script>
</ins><span class="cx"> <script src="Views/ResourceClusterContentView.js"></script>
</span><span class="cx"> <script src="Views/ResourceDetailsSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/ResourceSidebarPanel.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.css 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -302,11 +302,6 @@
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.data-grid-resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 5px;
</del><ins>+.data-grid .resizer {
</ins><span class="cx"> z-index: 500;
</span><del>- cursor: col-resize;
</del><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDataGridjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -41,7 +41,7 @@
</span><span class="cx"> this.selected = false;
</span><span class="cx"> this.dataGrid = this;
</span><span class="cx"> this.indentWidth = 15;
</span><del>- this.resizerElements = [];
</del><ins>+ this.resizers = [];
</ins><span class="cx"> this._columnWidthsInitialized = false;
</span><span class="cx">
</span><span class="cx"> this.element = document.createElement("div");
</span><span class="lines">@@ -112,6 +112,9 @@
</span><span class="cx"> Descending: "data-grid-sort-order-descending"
</span><span class="cx"> };
</span><span class="cx">
</span><ins>+WebInspector.DataGrid.PreviousColumnOrdinalSymbol = Symbol("previous-column-ordinal");
+WebInspector.DataGrid.NextColumnOrdinalSymbol = Symbol("next-column-ordinal");
+
</ins><span class="cx"> WebInspector.DataGrid.SortColumnAscendingStyleClassName = "sort-ascending";
</span><span class="cx"> WebInspector.DataGrid.SortColumnDescendingStyleClassName = "sort-descending";
</span><span class="cx"> WebInspector.DataGrid.SortableColumnStyleClassName = "sortable";
</span><span class="lines">@@ -662,43 +665,40 @@
</span><span class="cx"> _positionResizerElements: function()
</span><span class="cx"> {
</span><span class="cx"> var left = 0;
</span><del>- var previousResizerElement = null;
</del><ins>+ var previousResizer = null;
</ins><span class="cx">
</span><span class="cx"> // Make n - 1 resizers for n columns.
</span><span class="cx"> for (var i = 0; i < this.orderedColumns.length - 1; ++i) {
</span><del>- var resizerElement = this.resizerElements[i];
-
- if (!resizerElement) {
- // This is the first call to updateWidth, so the resizers need
- // to be created.
- resizerElement = document.createElement("div");
- resizerElement.classList.add("data-grid-resizer");
</del><ins>+ // Create a new resizer if one does not exist for this column.
+ if (i === this.resizers.length) {
+ resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
+ this.resizers[i] = resizer;
</ins><span class="cx"> // This resizer is associated with the column to its right.
</span><del>- resizerElement.addEventListener("mousedown", this._startResizerDragging.bind(this), false);
- this.element.appendChild(resizerElement);
- this.resizerElements[i] = resizerElement;
</del><ins>+ this.element.appendChild(resizer.element);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ var resizer = this.resizers[i];
+
</ins><span class="cx"> // Get the width of the cell in the first (and only) row of the
</span><span class="cx"> // header table in order to determine the width of the column, since
</span><span class="cx"> // it is not possible to query a column for its width.
</span><span class="cx"> left += this._headerTableBodyElement.rows[0].cells[i].offsetWidth;
</span><span class="cx">
</span><span class="cx"> if (this._isColumnVisible(this.orderedColumns[i])) {
</span><del>- resizerElement.style.removeProperty("display");
- resizerElement.style.left = left + "px";
- resizerElement.leftNeighboringColumnID = i;
- if (previousResizerElement)
- previousResizerElement.rightNeighboringColumnID = i;
- previousResizerElement = resizerElement;
</del><ins>+ resizer.element.style.removeProperty("display");
+ resizer.element.style.left = left + "px";
+ resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = i;
+ if (previousResizer)
+ previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = i;
+ previousResizer = resizer;
</ins><span class="cx"> } else {
</span><del>- resizerElement.style.setProperty("display", "none");
- resizerElement.leftNeighboringColumnID = 0;
- resizerElement.rightNeighboringColumnID = 0;
</del><ins>+ resizer.element.style.setProperty("display", "none");
+ resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = 0;
+ resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = 0;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><del>- if (previousResizerElement)
- previousResizerElement.rightNeighboringColumnID = this.orderedColumns.length - 1;
</del><ins>+ if (previousResizer)
+ previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = this.orderedColumns.length - 1;
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> addPlaceholderNode: function()
</span><span class="lines">@@ -1242,35 +1242,27 @@
</span><span class="cx"> this._resizeMethod = method;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _startResizerDragging: function(event)
</del><ins>+ resizerDragStarted: function(resizer)
</ins><span class="cx"> {
</span><del>- if (event.button !== 0 || event.ctrlKey)
- return;
</del><ins>+ if (!resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol])
+ return true; // Abort the drag;
</ins><span class="cx">
</span><del>- this._currentResizer = event.target;
- if (!this._currentResizer.rightNeighboringColumnID)
- return;
-
- WebInspector.elementDragStart(this._currentResizer, this._resizerDragging.bind(this),
- this._endResizerDragging.bind(this), event, "col-resize");
</del><ins>+ this._currentResizer = resizer;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- _resizerDragging: function(event)
</del><ins>+ resizerDragging: function(resizer, positionDelta)
</ins><span class="cx"> {
</span><del>- if (event.button !== 0)
</del><ins>+ console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
+ if (resizer != this._currentResizer)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- var resizer = this._currentResizer;
- if (!resizer)
- return;
-
</del><span class="cx"> // Constrain the dragpoint to be within the containing div of the
</span><span class="cx"> // datagrid.
</span><del>- var dragPoint = event.clientX - this.element.totalOffsetLeft;
</del><ins>+ var dragPoint = (resizer.initialPosition - positionDelta) - this.element.totalOffsetLeft;
</ins><span class="cx"> // Constrain the dragpoint to be within the space made up by the
</span><span class="cx"> // column directly to the left and the column directly to the right.
</span><del>- var leftCellIndex = resizer.leftNeighboringColumnID;
- var rightCellIndex = resizer.rightNeighboringColumnID;
</del><ins>+ var leftCellIndex = resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol];
+ var rightCellIndex = resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol];
</ins><span class="cx"> var firstRowCells = this._headerTableBodyElement.rows[0].cells;
</span><span class="cx"> var leftEdgeOfPreviousColumn = 0;
</span><span class="cx"> for (var i = 0; i < leftCellIndex; i++)
</span><span class="lines">@@ -1278,7 +1270,7 @@
</span><span class="cx">
</span><span class="cx"> // Differences for other resize methods
</span><span class="cx"> if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
</span><del>- rightCellIndex = this.resizerElements.length;
</del><ins>+ rightCellIndex = this.resizers.length;
</ins><span class="cx"> } else if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.First) {
</span><span class="cx"> leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
</span><span class="cx"> leftCellIndex = 0;
</span><span class="lines">@@ -1292,7 +1284,7 @@
</span><span class="cx">
</span><span class="cx"> dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
</span><span class="cx">
</span><del>- resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
</del><ins>+ resizer.element.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
</ins><span class="cx">
</span><span class="cx"> var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTableElement.offsetWidth) * 100) + "%";
</span><span class="cx"> this._headerTableColumnGroupElement.children[leftCellIndex].style.width = percentLeftColumn;
</span><span class="lines">@@ -1307,12 +1299,12 @@
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</span><span class="cx"> },
</span><span class="cx">
</span><del>- _endResizerDragging: function(event)
</del><ins>+ resizerDragEnded: function(resizer)
</ins><span class="cx"> {
</span><del>- if (event.button !== 0)
</del><ins>+ console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
+ if (resizer != this._currentResizer)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- WebInspector.elementDragEnd(event);
</del><span class="cx"> this._currentResizer = null;
</span><span class="cx"> this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResizercssfromrev181902trunkSourceWebInspectorUIUserInterfaceViewsSidebarcss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css (from rev 181902, trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css) (0 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.css 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+/*
+ * Copyright (C) 2015 University of Washington.
+ *
+ * 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.
+ */
+
+.resizer {
+ position: absolute;
+ z-index: 1000;
+}
+
+.resizer.vertical-rule {
+ top: 0;
+ bottom: 0;
+ width: 5px;
+
+ cursor: col-resize;
+}
+
+.resizer.horizontal-rule {
+ left: 0;
+ right: 0;
+ height: 5px;
+
+ cursor: row-resize;
+}
+
+.glass-pane-for-drag {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ opacity: 0;
+ z-index: 1;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsResizerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.js (0 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Resizer.js 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -0,0 +1,164 @@
</span><ins>+/*
+ * Copyright (C) 2015 University of Washington.
+ *
+ * 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.
+ */
+
+WebInspector.Resizer = function(ruleOrientation, delegate) {
+ // FIXME: Convert this to a WebInspector.Object subclass, and call super().
+ // WebInspector.Object.call(this);
+
+ console.assert(delegate);
+
+ this._delegate = delegate;
+ this._orientation = ruleOrientation;
+ this._element = document.createElement("div");
+ this._element.classList.add(WebInspector.Resizer.StyleClassName);
+
+ if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
+ this._element.classList.add(WebInspector.Resizer.HorizontalRuleStyleClassName);
+ else if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+ this._element.classList.add(WebInspector.Resizer.VerticalRuleStyleClassName);
+
+ this._element.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
+ this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
+ this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
+};
+
+WebInspector.Resizer.RuleOrientation = {
+ Horizontal: Symbol("resizer-rule-orientation-horizontal"),
+ Vertical: Symbol("resizer-rule-orientation-vertical"),
+};
+
+WebInspector.Resizer.StyleClassName = "resizer";
+WebInspector.Resizer.HorizontalRuleStyleClassName = "horizontal-rule";
+WebInspector.Resizer.VerticalRuleStyleClassName = "vertical-rule";
+WebInspector.Resizer.GlassPaneStyleClassName = "glass-pane-for-drag";
+
+WebInspector.Resizer.prototype = {
+ constructor: WebInspector.Resizer,
+ __proto__: WebInspector.Object.prototype,
+
+ // Public
+
+ get element()
+ {
+ return this._element;
+ },
+
+ get orientation()
+ {
+ return this._orientation;
+ },
+
+ get initialPosition()
+ {
+ return this._resizerMouseDownPosition || NaN;
+ },
+
+ // Private
+
+ _currentPosition: function()
+ {
+ if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+ return event.pageX;
+ if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
+ return event.pageY;
+
+ console.assert(false, "Should not be reached!");
+ },
+
+ _resizerMouseDown: function(event)
+ {
+ if (event.button !== 0 || event.ctrlKey)
+ return;
+
+ this._resizerMouseDownPosition = this._currentPosition();
+
+ var delegateRequestedAbort = false;
+ if (typeof this._delegate.resizerDragStarted === "function")
+ delegateRequestedAbort = this._delegate.resizerDragStarted(this, event.target);
+
+ if (delegateRequestedAbort) {
+ delete this._resizerMouseDownPosition;
+ return;
+ }
+
+ if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+ document.body.style.cursor = "col-resize";
+ else {
+ console.assert(this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal);
+ document.body.style.cursor = "row-resize";
+ }
+
+ // Register these listeners on the document so we can track the mouse if it leaves the resizer.
+ document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+ document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ // Install a global "glass pane" which prevents cursor from changing during the drag interaction.
+ // The cursor could change when hovering over links, text, or other elements with cursor cues.
+ // FIXME: when Pointer Events support is available this could be implemented by drawing the cursor ourselves.
+ if (WebInspector._elementDraggingGlassPane)
+ WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+
+ var glassPaneElement = document.createElement("div");
+ glassPaneElement.className = WebInspector.Resizer.GlassPaneStyleClassName;
+ document.body.appendChild(glassPaneElement);
+ WebInspector._elementDraggingGlassPane = glassPaneElement;
+ },
+
+ _resizerMouseMoved: function(event)
+ {
+ event.preventDefault();
+ event.stopPropagation();
+
+ if (typeof this._delegate.resizerDragging === "function")
+ this._delegate.resizerDragging(this, this._resizerMouseDownPosition - this._currentPosition());
+ },
+
+ _resizerMouseUp: function(event)
+ {
+ if (event.button !== 0 || event.ctrlKey)
+ return;
+
+ document.body.style.removeProperty("cursor");
+
+ if (WebInspector._elementDraggingGlassPane) {
+ WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
+ delete WebInspector._elementDraggingGlassPane;
+ }
+
+ document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+ document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+ event.preventDefault();
+ event.stopPropagation();
+
+ if (typeof this._delegate.resizerDragEnded === "function")
+ this._delegate.resizerDragEnded(this);
+
+ delete this._resizerMouseDownPosition;
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.css 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -60,17 +60,6 @@
</span><span class="cx"> display: block;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.sidebar > .resizer {
- position: absolute;
- top: 0;
- bottom: 0;
- width: 5px;
-
- z-index: 100;
-
- cursor: col-resize;
-}
-
</del><span class="cx"> .sidebar.right > .resizer {
</span><span class="cx"> left: -3px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSidebarjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js (181902 => 181903)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-03-24 20:11:38 UTC (rev 181902)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Sidebar.js 2015-03-24 20:41:47 UTC (rev 181903)
</span><span class="lines">@@ -39,10 +39,8 @@
</span><span class="cx"> if (label)
</span><span class="cx"> this._element.setAttribute("aria-label", label);
</span><span class="cx">
</span><del>- this._resizeElement = document.createElement("div");
- this._resizeElement.classList.add(WebInspector.Sidebar.ResizeElementStyleClassName);
- this._resizeElement.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
- this._element.insertBefore(this._resizeElement, this._element.firstChild);
</del><ins>+ this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
+ this._element.insertBefore(this._resizer.element, this._element.firstChild);
</ins><span class="cx">
</span><span class="cx"> this._sidebarPanels = [];
</span><span class="cx">
</span><span class="lines">@@ -57,7 +55,6 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.Sidebar.StyleClassName = "sidebar";
</span><span class="cx"> WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
</span><del>-WebInspector.Sidebar.ResizeElementStyleClassName = "resizer";
</del><span class="cx"> WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
</span><span class="cx">
</span><span class="cx"> WebInspector.Sidebar.Sides = {};
</span><span class="lines">@@ -252,64 +249,33 @@
</span><span class="cx"> return sidebarPanel;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- // Private
</del><ins>+ // Protected
</ins><span class="cx">
</span><del>- _navigationItemSelected: function(event)
</del><ins>+ resizerDragStarted: function(resizer)
</ins><span class="cx"> {
</span><del>- this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
- },
-
- _resizerMouseDown: function(event)
- {
- if (event.button !== 0 || event.ctrlKey)
- return;
-
- document.body.style.cursor = "col-resize";
-
- this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
- this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
-
</del><span class="cx"> this._widthBeforeResize = this.width;
</span><del>- this._resizerMouseDownX = event.pageX;
-
- // Register these listeners on the document so we can track the mouse if it leaves the resizer.
- document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
- document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
-
- event.preventDefault();
- event.stopPropagation();
</del><span class="cx"> },
</span><span class="cx">
</span><del>- _resizerMouseMoved: function(event)
</del><ins>+ resizerDragging: function(resizer, positionDelta)
</ins><span class="cx"> {
</span><del>- var deltaX = this._resizerMouseDownX - event.pageX;
-
</del><span class="cx"> if (this._side === WebInspector.Sidebar.Sides.Left)
</span><del>- deltaX *= -1;
</del><ins>+ positionDelta *= -1;
</ins><span class="cx">
</span><del>- var newWidth = deltaX + this._widthBeforeResize;
</del><ins>+ var newWidth = positionDelta + this._widthBeforeResize;
</ins><span class="cx"> this.width = newWidth;
</span><span class="cx"> this.collapsed = (newWidth < (this.minimumWidth / 2));
</span><del>-
- event.preventDefault();
- event.stopPropagation();
</del><span class="cx"> },
</span><span class="cx">
</span><del>- _resizerMouseUp: function(event)
</del><ins>+ resizerDragEnded: function(resizer)
</ins><span class="cx"> {
</span><del>- if (event.button !== 0 || event.ctrlKey)
- return;
</del><ins>+ delete this._widthBeforeResize;
+ },
</ins><span class="cx">
</span><del>- document.body.style.removeProperty("cursor");
</del><ins>+ // Private
</ins><span class="cx">
</span><del>- document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
- document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
-
- delete this._resizerMouseMovedEventListener;
- delete this._resizerMouseUpEventListener;
-
- event.preventDefault();
- event.stopPropagation();
</del><ins>+ _navigationItemSelected: function(event)
+ {
+ this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>