From 5718cd317820986c6293525d4507127f640f6abf Mon Sep 17 00:00:00 2001 From: Katie Madonna Date: Thu, 12 Dec 2013 12:10:45 -0800 Subject: [PATCH 1/2] Add a screenshot timeline to the timelines panel. Screenshots are captured automatically every second during recording. --- .../en.lproj/localizedStrings.js | Bin 55072 -> 55528 bytes .../WebInspectorUI/UserInterface/DataGrid.js | 6 +- .../UserInterface/Images/TimelineBarGreen.png | Bin 0 -> 347 bytes .../Images/TimelineBarGreen@2x.png | Bin 0 -> 757 bytes .../Images/TimelineBarOrange@2x.png | Bin 1412 -> 755 bytes .../UserInterface/InstrumentIcons.css | 4 + .../UserInterface/InstrumentSidebarPanel.css | 6 +- .../UserInterface/InstrumentSidebarPanel.js | 18 +++- Source/WebInspectorUI/UserInterface/Main.html | 3 + .../UserInterface/RecordingsObserver.js | 46 ++++++++ .../ScreenshotTimelineDataGrid.js | 48 +++++++++ .../ScreenshotTimelineDataGridNode.js | 99 ++++++++++++++++++ .../UserInterface/ScreenshotTimelineRecord.js | 93 ++++++++++++++++ .../UserInterface/TimelineDecorations.css | 2 +- .../UserInterface/TimelineManager.js | 17 +++ .../UserInterface/TimelineOverview.css | 4 + .../UserInterface/TimelineRecord.js | 1 + .../UserInterface/TimelinesContentView.css | 22 +++- .../UserInterface/TimelinesContentView.js | 43 +++++++- 19 files changed, 400 insertions(+), 12 deletions(-) create mode 100644 Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen.png create mode 100644 Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen@2x.png create mode 100644 Source/WebInspectorUI/UserInterface/RecordingsObserver.js create mode 100644 Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js create mode 100644 Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js create mode 100644 Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js index 6770170ba098bdc6c873fd6bc2e28123de3cffbe..01ba42848ac4aa72c35960c74cc1b34162a39dfa 100644 GIT binary patch delta 176 zcmZ3mj`_t#<_+suxs@1V859_7fmmsBqqzR&RjhG2{LT!C3P{cO&>raka&9iyYs$H^^l}?FF pe%7cpS>P1M=9m-rczBU)W{8-)kV$*8#nmnp(MXW!<^xv~7y)k!HT(bo delta 42 zcmV+_0M-BKu>+v41F)_Iv+M<0Y_qg-lsJ=atOm2NtGXStu*u#GlgQSHvx?VV0n^zQ AIsgCw diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.js b/Source/WebInspectorUI/UserInterface/DataGrid.js index d09808ab08516..f2f08399e0e30 100644 --- a/Source/WebInspectorUI/UserInterface/DataGrid.js +++ b/Source/WebInspectorUI/UserInterface/DataGrid.js @@ -954,7 +954,7 @@ WebInspector.DataGrid.prototype = { this._sortColumnCell = cell; cell.classList.add("sort-" + sortOrder); - + this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged); }, @@ -1436,7 +1436,7 @@ WebInspector.DataGridNode.prototype = { { if (typeof(this._leftPadding) === "number") return this._leftPadding; - + this._leftPadding = this.depth * this.dataGrid.indentWidth; return this._leftPadding; }, @@ -1752,7 +1752,7 @@ WebInspector.DataGridNode.prototype = { var cell = event.target.enclosingNodeOrSelfWithNodeName("td"); if (!cell.classList.contains("disclosure")) return false; - + var left = cell.totalOffsetLeft + this.leftPadding; return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth; }, diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen.png new file mode 100644 index 0000000000000000000000000000000000000000..06a89e28ceb70b20969ae29dfc4c47c0dd3fb3a0 GIT binary patch literal 347 zcmV-h0i^zkP)`(T`I|&J5A$Z`-opbKFmzmPm1r@u_k!i7)2H24Y<_f4KoXF+edFMnmGdXG;Y+I+a z);2IGlatYnpY7XV|FG$yR5GG%HkSEH`dkM$gmH)J;tuu7CfXl7`fVjcjXd%3)ICXZ zg@z7hMT+)y-^jCxKMzb5bFKTv%>1kVFO>gU^;1taWhoQ|^7Scn6^ZsWjC9OL*q1;o zO3X|rq~?+QQheQ4p+hGy*&PpIp{D1iNJEI;VASKX?A`HTu4BcYtOgEM{{?~`3|$8P tE1jn^j!QD9-_;UY!isQ)L@utd`wf7|ezlp-pCbSO002ovPDHLkV1f$ooRI(k literal 0 HcmV?d00001 diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarGreen@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d5b36ec1cda42cff00df6198155aa7da5f6a637e GIT binary patch literal 757 zcmVW%1+LbL7Tjq>rhTFO0GzP;QOi4xGneKnHp!@XA7J0Qup`DIBxTW3=}&`mKR3AUxP{w^3@m z#jd-G%HnG{+gPesas{(zXl2&SAfN1GdaUMb??sgD57?^CGow9ljdOZIV)lOk!Z6wmT$0sf2FN4} z%px8Vpr8*Bjc6rCOc;jm!SbA7q3%2n21oeqXeCw{K?PnA>3O?HKt!|$v2j;%WLQ}E z9~8cg`0?R83f|v%Wpp*7?SlA5|FeZ-x}Y$n9iBwSf7<&EYB7RYiIA_JenuFF_oM=e zIj}CM#rDKzr3oFFOvBzifCAAa~?A35Iz8s7tu#rBZsVateQCI6DQ54d{) zL}Gj%wpYOmbL}Y}_ME`gwu3XNLFV`~=uJ|h26b+c0UE@Nn*_<8Q`J?J*Ph@}0uI#9 zCQ8|pDDZ9ueD)W%PdEhH?0&X9#TnFO`7PP6b4=%cxjctk{sulu@^a=R(&!tW#n`Tl8;)@b-XThXXuXzZ=B%00000NkvXXu0mjfnVV~a literal 0 HcmV?d00001 diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png index e7ec8f53804a98c72e3bf99d3bddd303bba7b508..524a750c0bf5cfbb75b5b5a37d6da5494f8c976b 100644 GIT binary patch delta 731 zcmV<10wn!}3-bk#B!9X|L_t(I5$%=FPZL2D$G=myKb8Weh?t=9phr@{*aS`V;@QND zhD7iE7rdAtiGPK6jG`A4<4qC`iJEAvRHGj3K@bE>X$y3_?QYlan{7*Jnu2#nNy*&CQ=Hx5m2~P_Yl$x9Ua%ITzf;Wr++^zJh(aQRYjr%w0KvY z92&%PGl(gfoS2*j>`lPgmEpb_13-8TUp~Flb5;%M(hja&z3=@}3-=I;J9vL=5Q+0s z3BVi&MlRA}bRW?E&&~n)w}7>VkLe7yc97XNkTiyBNJUK~Mi>mr0OCoY^cg5Dch6|} zoUf_8fcR8uNPoB%QU>=r!+m3@pCG3MtUPJ}0_}PD|7EMWB?d|BvH1Kh0GhFDfd@j6 z$<90l)CfZth={atO*GVMAI=FQP;(J1>vQMKUe?zhrEh4(R~R~Uz25ND*&KyJO+(xC z?X`y^5`Ec!(Ba2*@Ql3X<2&3D9oiO%H~OEg-KPa=QGax#UYT*NBOCE;fgG13&tcaT zc7wI8QLBA~LgRJ!jkg$PnD4t(0Kt3gR4a}zYGzw!zl>>|qh*bi92Qxi zCaMgyntuo6HcNTv54(^$)o${X$~NmB;|M@}93I)U<>lqx7=$wIbOiM{{k7DD_*@{#@_${ N002ovPDHLkV1jq%Tm}FD literal 1412 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9V!3HFE&E>ITU|^b=84^(v;p=0SoS& zVwFNsYH?~&S!#-&jXuOURBIrjsJ7eaW4IKe3@LD6rhwguBu*&MfKd$(wY*|zQUE3j z{ffi_V2Bx@h8R$_m2**QVo82cNPd2fog*maD0t>3rl$s_CZ<%{=%cHE#uIk;LPUW{ z#f}T86PE1kxFUH9jsg?uGEW!B5DUS#Q%`3L2Z|iqKhrPHG$PtdTubjx+l`J!t%wi& z0(V4M3g`ZJh|vr!d3$ebM|U2}OTUk;VH+f*=PNjF2wQ9D>ox1-5@X^0#m_Hh%FZfz z-)OzFzqs!E?(}E#GUW3Z=jttZ?XgSGiy`fX{n5Hff9rd)W7q9{a!BU)cJAp1G903J zaNf}4TPj>}AZ)_PJ5NLs))p;PJ*;cI$svpB{r!DG#dCe9+&njLU(@?rm$N;}a`(uc zR;u4Kf!&C`apPnjiTg}0)nU9V^ckLU-J7DlVtat6l!lbbv`v{$I2YM5OXxDae&28` zXwM?%<2Lip*{HOA{29isdid?bJ?j{Mw{vc~-kATrra|uN!>>xgzAee7QkD1L@$coWw(ff$eErIQgzvt)~uWr_`^c8M6AypgN6Oggz-Mo)t%99^`*AsR4U~9LfK>oaD!0RIC?b_z{CXAgt zi;q>$@Uv*y%9&Uwk}#(;%gN_-s+!DapD&l|TB(Z~u!g$!AwL z1hJ;-Xg!JWUAECPbk6#Fm2Icv>mM)fm>yo-^iy)DMQ?G4>DeSZ%}tMcvWu2*UA0ks zVz*j(`+-H@D#R>|yG7X7yt;9Gn|Si6jYra6e)9kDh;4?G&ZgSL$Bw^dtq_RsoEY(k YwSABByIVK;PlF0iPgg&ebxsLQ0QK7u4FCWD diff --git a/Source/WebInspectorUI/UserInterface/InstrumentIcons.css b/Source/WebInspectorUI/UserInterface/InstrumentIcons.css index 6ccde5b2ccb96..7e17595d6c5cb 100644 --- a/Source/WebInspectorUI/UserInterface/InstrumentIcons.css +++ b/Source/WebInspectorUI/UserInterface/InstrumentIcons.css @@ -31,6 +31,10 @@ content: -webkit-image-set(url(Images/Colors.png) 1x, url(Images/Colors@2x.png) 2x); } +.screenshot-icon .icon { + content: -webkit-image-set(url(Images/Log.png) 1x, url(Images/Log@2x.png) 2x); +} + .script-icon .icon { content: -webkit-image-set(url(Images/Script.png) 1x, url(Images/Script@2x.png) 2x); } diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css index a6b7b2373cf90..e110b3d2dd366 100644 --- a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css +++ b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css @@ -56,7 +56,7 @@ outline: none; color: transparent; overflow: hidden; - + -webkit-appearance: none; background-color: transparent; @@ -98,7 +98,7 @@ top: 22px; left: 0; right: 0; - height: 78px; + height: 104px; } .sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item:not(:first-child):not(.selected) { @@ -110,7 +110,7 @@ } .sidebar > .panel.instrument > .title-bar.profiles { - top: 100px; + top: 126px; border-top: 1px solid rgb(179, 179, 179); height: 23px; } diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js index b57c4f6a997fe..a32e89c70c571 100644 --- a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js +++ b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js @@ -75,10 +75,16 @@ WebInspector.InstrumentSidebarPanel = function() scriptTimelineTreeElement.twoLine = true; this._timelinesTreeOutline.appendChild(scriptTimelineTreeElement); + var screenshotTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ScreenshotIconStyleClass, WebInspector.UIString("Screenshots"), null, WebInspector.TimelineRecord.Type.Screenshot); + screenshotTimelineTreeElement.small = true; + screenshotTimelineTreeElement.twoLine = true; + this._timelinesTreeOutline.appendChild(screenshotTimelineTreeElement); + this._timelineTreeElementMap = {}; this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Network] = networkTimelineTreeElement; this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Layout] = layoutTimelineTreeElement; this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Script] = scriptTimelineTreeElement; + this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Screenshot] = screenshotTimelineTreeElement; var profilesTitleBarElement = document.createElement("div"); profilesTitleBarElement.textContent = WebInspector.UIString("Profiles"); @@ -132,6 +138,8 @@ WebInspector.InstrumentSidebarPanel = function() WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingEnded, this._profilingEnded, this); WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingInterrupted, this._profilingInterrupted, this); + this._recordScreenshots = true; + this.emptyContentPlaceholder = WebInspector.UIString("No Recorded Profiles"); // Maps from profile titles -> tree elements. @@ -154,6 +162,7 @@ WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass = "network-icon"; WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass = "colors-icon"; WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass = "script-icon"; WebInspector.InstrumentSidebarPanel.ProfileIconStyleClass = "profile-icon"; +WebInspector.InstrumentSidebarPanel.ScreenshotIconStyleClass = "screenshot-icon"; WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue = "start-javascript-profile"; WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue = "start-css-selector-profile"; WebInspector.InstrumentSidebarPanel.StartCanvasProfileValue = "start-canvas-profile"; @@ -411,10 +420,15 @@ WebInspector.InstrumentSidebarPanel.prototype = { // Add forced class to prevent the glyph from showing a confusing status after click. this._recordGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass); - if (WebInspector.timelineManager.recording) + if (WebInspector.timelineManager.recording) { WebInspector.timelineManager.stopRecording(); - else + if (this._recordScreenshots) + WebInspector.timelineManager.clearScreenshotInterval(); + } else { WebInspector.timelineManager.startRecording(); + if (this._recordScreenshots) + WebInspector.timelineManager.setScreenshotInterval(); + } }, _titleForProfile: function(profile) diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html index 5f6ee410e07f7..11bfcefe46a8e 100644 --- a/Source/WebInspectorUI/UserInterface/Main.html +++ b/Source/WebInspectorUI/UserInterface/Main.html @@ -351,6 +351,7 @@ + @@ -358,6 +359,8 @@ + + diff --git a/Source/WebInspectorUI/UserInterface/RecordingsObserver.js b/Source/WebInspectorUI/UserInterface/RecordingsObserver.js new file mode 100644 index 0000000000000..71928d995cbe9 --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/RecordingsObserver.js @@ -0,0 +1,46 @@ +/* + * Copyright (C) 2013, University of Washington. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT + * HOLDER 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.RecordingsObserver = function() +{ + WebInspector.Object.call(this); +}; + +WebInspector.RecordingsObserver.prototype = { + constructor: WebInspector.RecordingsObserver, + __proto__: WebInspector.Object.prototype, + + // Events defined by the "Recordings" domain (see WebCore/inspector/Inspector.json). + + recordingAdded: function(uid) + { + WebInspector.recordingsManager.addRecording(uid); + }, + + recordingRemoved: function(uid) + { + WebInspector.recordingsManager.removeRecording(uid); + } +}; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js new file mode 100644 index 0000000000000..924e51b6c3296 --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js @@ -0,0 +1,48 @@ +/* + * Copyright (C) 2013 University of Washington. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT + * HOLDER 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.ScreenshotTimelineDataGrid = function(columns) +{ + WebInspector.TimelineDataGrid.call(this, columns); + + this.element.classList.add(WebInspector.ScreenshotTimelineDataGrid.ScreenshotDataGridStyleClassName); + + this._showingHighlight = false; +} + +WebInspector.ScreenshotTimelineDataGrid.ScreenshotDataGridStyleClassName = "screenshot-data-grid"; + +WebInspector.ScreenshotTimelineDataGrid.prototype = { + constructor: WebInspector.ScreenshotTimelineDataGrid, + + // Protected + + callFramePopoverAnchorElement: function() + { + return this.selectedNode.elementWithColumnIdentifier("image"); + } +} + +WebInspector.ScreenshotTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js new file mode 100644 index 0000000000000..260773ec11bf7 --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js @@ -0,0 +1,99 @@ +/* + * Copyright (C) 2013 University of Washington. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT + * HOLDER 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.ScreenshotTimelineDataGridNode = function(screenshotTimelineRecord, baseStartTime) +{ + WebInspector.DataGridNode.call(this, {}); + + this._record = screenshotTimelineRecord; + this._baseStartTime = baseStartTime || 0; +}; + +WebInspector.Object.addConstructorFunctions(WebInspector.ScreenshotTimelineDataGridNode); + +WebInspector.ScreenshotTimelineDataGridNode.IconStyleClassName = "icon"; +WebInspector.ScreenshotTimelineDataGridNode.SubtitleStyleClassName = "subtitle"; +WebInspector.ScreenshotTimelineDataGridNode.EmptyImagePlaceholder = "Images/DocumentImage.png"; +WebInspector.ScreenshotTimelineDataGridNode.EmptyValuePlaceholderString = "\u2014"; +WebInspector.ScreenshotTimelineDataGridNode.ScreenshotStyleClassName = "screenshot"; +WebInspector.ScreenshotTimelineDataGridNode.EmptyScreenshotStyleClassName = "empty"; + +WebInspector.ScreenshotTimelineDataGridNode.prototype = { + constructor: WebInspector.ScreenshotTimelineDataGridNode, + + // Public + + get record() + { + return this._record; + }, + + get data() + { + return this._record; + }, + + createCellContent: function(columnIdentifier, cell) + { + var emptyValuePlaceholderString = WebInspector.ScreenshotTimelineDataGridNode.EmptyValuePlaceholderString; + var value = this.data[columnIdentifier]; + + switch (columnIdentifier) { + case "eventType": + return WebInspector.ScreenshotTimelineRecord.EventType.displayName(value); + + case "image": + var source = value; + var image = document.createElement("img"); + image.src = source; + image.classList.add(WebInspector.ScreenshotTimelineDataGridNode.ScreenshotStyleClassName); + + if (!source) { + image.src = WebInspector.ScreenshotTimelineDataGridNode.EmptyImagePlaceholder; + image.classList.add(WebInspector.ScreenshotTimelineDataGridNode.EmptyScreenshotStyleClassName); + } + + return image; + + case "x": + case "y": + return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%d").format(value); + + case "width": + case "height": + return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx").format(value); + + case "area": + return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx²").format(value); + + case "startTime": + return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime); + } + + return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier); + } +} + +WebInspector.ScreenshotTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js new file mode 100644 index 0000000000000..b413d60081363 --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js @@ -0,0 +1,93 @@ +/* + * Copyright (C) 2013 University of Washington. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT + * HOLDER 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.ScreenshotTimelineRecord = function(startTime, image, x, y, width, height) +{ + WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Screenshot, startTime, startTime); + + this._startTime = typeof startTime === "number" ? startTime : NaN; + this._x = typeof x === "number" ? x : NaN; + this._y = typeof y === "number" ? y : NaN; + this._width = typeof width === "number" ? width : NaN; + this._height = typeof height === "number" ? height : NaN; + this._image = image; +}; + +WebInspector.ScreenshotTimelineRecord.EventType = { + ImageCaptured: "screenshot-image-captured" +}; + +WebInspector.ScreenshotTimelineRecord.EventType.displayName = function(eventType) +{ + return WebInspector.UIString("Image Captured"); +}; + +WebInspector.ScreenshotTimelineRecord.prototype = { + constructor: WebInspector.ScreenshotTimelineRecord, + + // Public + + get eventType() + { + return WebInspector.ScreenshotTimelineRecord.EventType.ImageCaptured; + }, + + get startTime() + { + return this._startTime; + }, + + get x() + { + return this._x; + }, + + get y() + { + return this._y; + }, + + get width() + { + return this._width; + }, + + get height() + { + return this._height; + }, + + get area() + { + return this._width * this._height; + }, + + get image() + { + return this._image; + } +}; + +WebInspector.ScreenshotTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype; diff --git a/Source/WebInspectorUI/UserInterface/TimelineDecorations.css b/Source/WebInspectorUI/UserInterface/TimelineDecorations.css index 01c465c0528fc..55898d3c15e3d 100644 --- a/Source/WebInspectorUI/UserInterface/TimelineDecorations.css +++ b/Source/WebInspectorUI/UserInterface/TimelineDecorations.css @@ -31,7 +31,7 @@ .timeline-decorations > .header { border-top: 1px solid rgb(200, 200, 200); - height: 22px; + height: 23px; position: relative; } diff --git a/Source/WebInspectorUI/UserInterface/TimelineManager.js b/Source/WebInspectorUI/UserInterface/TimelineManager.js index c5fb8d6fb6aff..5ddaad701cd9e 100644 --- a/Source/WebInspectorUI/UserInterface/TimelineManager.js +++ b/Source/WebInspectorUI/UserInterface/TimelineManager.js @@ -50,6 +50,7 @@ WebInspector.TimelineManager.Event = { WebInspector.TimelineManager.MaximumAutoRecordDuration = 90000; // 90 seconds WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent = 10000; // 10 seconds WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly = 2000; // 2 seconds +WebInspector.TimelineManager.ScreenshotTimeIntervalDelay = 1000; // 1 second WebInspector.TimelineManager.prototype = { constructor: WebInspector.TimelineManager, @@ -299,6 +300,14 @@ WebInspector.TimelineManager.prototype = { this._loadEventTime = timestamp; }, + setScreenshotInterval: function() { + this._timeInvervalIdentifier = setInterval(this._recordScreenshot.bind(this), WebInspector.TimelineManager.ScreenshotTimeIntervalDelay); + }, + + clearScreenshotInterval: function() { + clearInterval(this._timeInvervalIdentifier); + }, + // Private _clear: function() @@ -434,6 +443,14 @@ WebInspector.TimelineManager.prototype = { return; this._addRecord(new WebInspector.ResourceTimelineRecord(event.data.resource)); + }, + + _recordScreenshot: function() + { + PageAgent.snapshotRect(0, 0, document.width, document.height, "Viewport", function(error, dataURL) { + if (!error) + this._addRecord(new WebInspector.ScreenshotTimelineRecord((new Date().getTime()) / 1000, dataURL, 0, 0, document.width, document.height)); + }.bind(this)); } }; diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/TimelineOverview.css index be237e3cdf960..fe30719858b45 100644 --- a/Source/WebInspectorUI/UserInterface/TimelineOverview.css +++ b/Source/WebInspectorUI/UserInterface/TimelineOverview.css @@ -66,6 +66,10 @@ border-image-source: -webkit-image-set(url(Images/TimelineBarOrange.png) 1x, url(Images/TimelineBarOrange@2x.png) 2x); } +.timeline-overview > .timeline.timeline-record-type-screenshot .bar { + border-image-source: -webkit-image-set(url(Images/TimelineBarGreen.png) 1x, url(Images/TimelineBarGreen@2x.png) 2x); +} + .timeline-overview .timeline-decorations > .event-markers { height: 78px; bottom: 22px; diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/TimelineRecord.js index 06388eee40fc4..f89b9bc9b6f0a 100644 --- a/Source/WebInspectorUI/UserInterface/TimelineRecord.js +++ b/Source/WebInspectorUI/UserInterface/TimelineRecord.js @@ -44,6 +44,7 @@ WebInspector.TimelineRecord.Event = { WebInspector.TimelineRecord.Type = { Network: "timeline-record-type-network", Layout: "timeline-record-type-layout", + Screenshot: "timeline-record-type-screenshot", Script: "timeline-record-type-script" }; diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.css b/Source/WebInspectorUI/UserInterface/TimelinesContentView.css index 93720719d134d..5d0e2a3cb6f54 100644 --- a/Source/WebInspectorUI/UserInterface/TimelinesContentView.css +++ b/Source/WebInspectorUI/UserInterface/TimelinesContentView.css @@ -28,12 +28,12 @@ top: 0; left: 0; right: 0; - height: 100px; + height: 125px; } .content-view.timelines > .data-grid { position: absolute; - top: 100px; + top: 126px; left: 0; right: 0; bottom: 0; @@ -245,3 +245,21 @@ border-bottom: 1px solid rgb(179, 179, 179); background-color: white; } + +.content-view.timelines > .data-grid img.screenshot { + height: 300px; +} + +.content-view.timelines > .data-grid.screenshot-data-grid tr.offscreen { + height: 300px; +} + +.content-view.timelines > .data-grid.screenshot-data-grid tr.offscreen td { + display: block; +} + +.content-view.timelines > .data-grid.screenshot-data-grid table.data { + background-size: auto 600px; + background-image: -webkit-linear-gradient(top, #ccc, #ccc 50%, rgb(90%, 90%, 90%) 50%, rgb(90%, 90%, 90%)); + +} diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.js b/Source/WebInspectorUI/UserInterface/TimelinesContentView.js index 6a9b31af2548c..4a3cfc57c4048 100644 --- a/Source/WebInspectorUI/UserInterface/TimelinesContentView.js +++ b/Source/WebInspectorUI/UserInterface/TimelinesContentView.js @@ -29,7 +29,7 @@ WebInspector.TimelinesContentView = function(representedObject) this.element.classList.add(WebInspector.TimelinesContentView.StyleClassName); - this._timelineOverview = new WebInspector.TimelineOverview(this, [WebInspector.TimelineRecord.Type.Network, WebInspector.TimelineRecord.Type.Layout, WebInspector.TimelineRecord.Type.Script]); + this._timelineOverview = new WebInspector.TimelineOverview(this, [WebInspector.TimelineRecord.Type.Network, WebInspector.TimelineRecord.Type.Layout, WebInspector.TimelineRecord.Type.Script, WebInspector.TimelineRecord.Type.Screenshot]); this.element.appendChild(this._timelineOverview.element); function createPathComponent(displayName, className, representedObject) @@ -42,11 +42,15 @@ WebInspector.TimelinesContentView = function(representedObject) var networkPathComponent = createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network); var layoutPathComponent = createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout); var scriptPathComponent = createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script); + var screenshotPathComponent = createPathComponent.call(this, WebInspector.UIString("Screenshots"), WebInspector.InstrumentSidebarPanel.ScreenshotIconStyleClass, WebInspector.TimelineRecord.Type.Screenshot); networkPathComponent.nextSibling = layoutPathComponent; layoutPathComponent.previousSibling = networkPathComponent; layoutPathComponent.nextSibling = scriptPathComponent; scriptPathComponent.previousSibling = layoutPathComponent; + scriptPathComponent.nextSibling = screenshotPathComponent; + screenshotPathComponent.previousSibling = scriptPathComponent; + this._currentRecordType = null; this._currentRecordTypeSetting = new WebInspector.Setting("timeline-view-current-record-type", WebInspector.TimelineRecord.Type.Network); @@ -147,6 +151,35 @@ WebInspector.TimelinesContentView = function(representedObject) scriptDataGridColumns.duration.width = "10%"; scriptDataGridColumns.duration.aligned = "right"; + var screenshotDataGridColumns = {eventType: {}, image: {}, x: {}, y: {}, width: {}, height: {}, area: {}, startTime: {}}; + + screenshotDataGridColumns.eventType.title = WebInspector.UIString("Type"); + screenshotDataGridColumns.eventType.width = "15%"; + screenshotDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("screenshot", WebInspector.ScreenshotTimelineRecord.EventType); + + screenshotDataGridColumns.image.title = WebInspector.UIString("Image"); + screenshotDataGridColumns.image.width = "25%"; + + screenshotDataGridColumns.x.title = WebInspector.UIString("X"); + screenshotDataGridColumns.x.width = "8%"; + + screenshotDataGridColumns.y.title = WebInspector.UIString("Y"); + screenshotDataGridColumns.y.width = "8%"; + + screenshotDataGridColumns.width.title = WebInspector.UIString("Width"); + screenshotDataGridColumns.width.width = "8%"; + + screenshotDataGridColumns.height.title = WebInspector.UIString("Height"); + screenshotDataGridColumns.width.width = "8%"; + + screenshotDataGridColumns.area.title = WebInspector.UIString("Area"); + screenshotDataGridColumns.area.width = "12%"; + + screenshotDataGridColumns.startTime.title = WebInspector.UIString("Time"); + screenshotDataGridColumns.startTime.width = "8%"; + screenshotDataGridColumns.startTime.aligned = "right"; + screenshotDataGridColumns.startTime.sort = "ascending"; + for (var column in networkDataGridColumns) networkDataGridColumns[column].sortable = true; @@ -156,9 +189,13 @@ WebInspector.TimelinesContentView = function(representedObject) for (var column in scriptDataGridColumns) scriptDataGridColumns[column].sortable = true; + for (var column in screenshotDataGridColumns) + screenshotDataGridColumns[column].sortable = true; + var networkDataGrid = new WebInspector.NetworkDataGrid(networkDataGridColumns); var layoutDataGrid = new WebInspector.LayoutTimelineDataGrid(layoutDataGridColumns); var scriptDataGrid = new WebInspector.ScriptTimelineDataGrid(scriptDataGridColumns); + var screenshotDataGrid = new WebInspector.ScreenshotTimelineDataGrid(screenshotDataGridColumns); networkDataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedNodeChanged, this); @@ -166,11 +203,13 @@ WebInspector.TimelinesContentView = function(representedObject) this._pathComponentMap[WebInspector.TimelineRecord.Type.Network] = networkPathComponent; this._pathComponentMap[WebInspector.TimelineRecord.Type.Layout] = layoutPathComponent; this._pathComponentMap[WebInspector.TimelineRecord.Type.Script] = scriptPathComponent; + this._pathComponentMap[WebInspector.TimelineRecord.Type.Screenshot] = screenshotPathComponent; this._dataGridMap = {}; this._dataGridMap[WebInspector.TimelineRecord.Type.Network] = networkDataGrid; this._dataGridMap[WebInspector.TimelineRecord.Type.Layout] = layoutDataGrid; this._dataGridMap[WebInspector.TimelineRecord.Type.Script] = scriptDataGrid; + this._dataGridMap[WebInspector.TimelineRecord.Type.Screenshot] = screenshotDataGrid; for (var type in this._dataGridMap) { var dataGrid = this._dataGridMap[type]; @@ -658,6 +697,8 @@ WebInspector.TimelinesContentView.prototype = { return new WebInspector.LayoutTimelineDataGridNode(record, baseStartTime); case WebInspector.TimelineRecord.Type.Script: return new WebInspector.ScriptTimelineDataGridNode(record, baseStartTime); + case WebInspector.TimelineRecord.Type.Screenshot: + return new WebInspector.ScreenshotTimelineDataGridNode(record, baseStartTime); } console.error("Unknown record type: " + record.type); From 9d4246f27c333a80cca4cd200a0d96de6c0f6a63 Mon Sep 17 00:00:00 2001 From: Katie Madonna Date: Thu, 2 Jan 2014 12:13:13 -0800 Subject: [PATCH 2/2] Address code review comments. --- .../WebInspectorUI/UserInterface/DataGrid.js | 8 +-- .../Images/TimelineBarOrange@2x.png | Bin 755 -> 1412 bytes .../UserInterface/InstrumentSidebarPanel.js | 6 +-- .../UserInterface/RecordingsObserver.js | 46 ------------------ .../ScreenshotTimelineDataGrid.js | 5 +- .../ScreenshotTimelineDataGridNode.js | 18 +++---- .../UserInterface/ScreenshotTimelineRecord.js | 11 +++-- 7 files changed, 23 insertions(+), 71 deletions(-) delete mode 100644 Source/WebInspectorUI/UserInterface/RecordingsObserver.js diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.js b/Source/WebInspectorUI/UserInterface/DataGrid.js index f2f08399e0e30..e423cc08546a3 100644 --- a/Source/WebInspectorUI/UserInterface/DataGrid.js +++ b/Source/WebInspectorUI/UserInterface/DataGrid.js @@ -954,7 +954,7 @@ WebInspector.DataGrid.prototype = { this._sortColumnCell = cell; cell.classList.add("sort-" + sortOrder); - + this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged); }, @@ -1303,7 +1303,7 @@ WebInspector.DataGridNode = function(data, hasChildren) this._data = data || {}; this.hasChildren = hasChildren || false; this.children = []; - this.dataGrid = this.dataGrid || null; + this.dataGrid = null; this.parent = null; this.previousSibling = null; this.nextSibling = null; @@ -1436,7 +1436,7 @@ WebInspector.DataGridNode.prototype = { { if (typeof(this._leftPadding) === "number") return this._leftPadding; - + this._leftPadding = this.depth * this.dataGrid.indentWidth; return this._leftPadding; }, @@ -1752,7 +1752,7 @@ WebInspector.DataGridNode.prototype = { var cell = event.target.enclosingNodeOrSelfWithNodeName("td"); if (!cell.classList.contains("disclosure")) return false; - + var left = cell.totalOffsetLeft + this.leftPadding; return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth; }, diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png index 524a750c0bf5cfbb75b5b5a37d6da5494f8c976b..e7ec8f53804a98c72e3bf99d3bddd303bba7b508 100644 GIT binary patch literal 1412 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9V!3HFE&E>ITU|^b=84^(v;p=0SoS& zVwFNsYH?~&S!#-&jXuOURBIrjsJ7eaW4IKe3@LD6rhwguBu*&MfKd$(wY*|zQUE3j z{ffi_V2Bx@h8R$_m2**QVo82cNPd2fog*maD0t>3rl$s_CZ<%{=%cHE#uIk;LPUW{ z#f}T86PE1kxFUH9jsg?uGEW!B5DUS#Q%`3L2Z|iqKhrPHG$PtdTubjx+l`J!t%wi& z0(V4M3g`ZJh|vr!d3$ebM|U2}OTUk;VH+f*=PNjF2wQ9D>ox1-5@X^0#m_Hh%FZfz z-)OzFzqs!E?(}E#GUW3Z=jttZ?XgSGiy`fX{n5Hff9rd)W7q9{a!BU)cJAp1G903J zaNf}4TPj>}AZ)_PJ5NLs))p;PJ*;cI$svpB{r!DG#dCe9+&njLU(@?rm$N;}a`(uc zR;u4Kf!&C`apPnjiTg}0)nU9V^ckLU-J7DlVtat6l!lbbv`v{$I2YM5OXxDae&28` zXwM?%<2Lip*{HOA{29isdid?bJ?j{Mw{vc~-kATrra|uN!>>xgzAee7QkD1L@$coWw(ff$eErIQgzvt)~uWr_`^c8M6AypgN6Oggz-Mo)t%99^`*AsR4U~9LfK>oaD!0RIC?b_z{CXAgt zi;q>$@Uv*y%9&Uwk}#(;%gN_-s+!DapD&l|TB(Z~u!g$!AwL z1hJ;-Xg!JWUAECPbk6#Fm2Icv>mM)fm>yo-^iy)DMQ?G4>DeSZ%}tMcvWu2*UA0ks zVz*j(`+-H@D#R>|yG7X7yt;9Gn|Si6jYra6e)9kDh;4?G&ZgSL$Bw^dtq_RsoEY(k YwSABByIVK;PlF0iPgg&ebxsLQ0QK7u4FCWD delta 731 zcmV<10wn!}3-bk#B!9X|L_t(I5$%=FPZL2D$G=myKb8Weh?t=9phr@{*aS`V;@QND zhD7iE7rdAtiGPK6jG`A4<4qC`iJEAvRHGj3K@bE>X$y3_?QYlan{7*Jnu2#nNy*&CQ=Hx5m2~P_Yl$x9Ua%ITzf;Wr++^zJh(aQRYjr%w0KvY z92&%PGl(gfoS2*j>`lPgmEpb_13-8TUp~Flb5;%M(hja&z3=@}3-=I;J9vL=5Q+0s z3BVi&MlRA}bRW?E&&~n)w}7>VkLe7yc97XNkTiyBNJUK~Mi>mr0OCoY^cg5Dch6|} zoUf_8fcR8uNPoB%QU>=r!+m3@pCG3MtUPJ}0_}PD|7EMWB?d|BvH1Kh0GhFDfd@j6 z$<90l)CfZth={atO*GVMAI=FQP;(J1>vQMKUe?zhrEh4(R~R~Uz25ND*&KyJO+(xC z?X`y^5`Ec!(Ba2*@Ql3X<2&3D9oiO%H~OEg-KPa=QGax#UYT*NBOCE;fgG13&tcaT zc7wI8QLBA~LgRJ!jkg$PnD4t(0Kt3gR4a}zYGzw!zl>>|qh*bi92Qxi zCaMgyntuo6HcNTv54(^$)o${X$~NmB;|M@}93I)U<>lqx7=$wIbOiM{{k7DD_*@{#@_${ N002ovPDHLkV1jq%Tm}FD diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js index a32e89c70c571..46c5f19f23a14 100644 --- a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js +++ b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js @@ -138,7 +138,7 @@ WebInspector.InstrumentSidebarPanel = function() WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingEnded, this._profilingEnded, this); WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingInterrupted, this._profilingInterrupted, this); - this._recordScreenshots = true; + this._isCapturingScreenshots = true; this.emptyContentPlaceholder = WebInspector.UIString("No Recorded Profiles"); @@ -422,11 +422,11 @@ WebInspector.InstrumentSidebarPanel.prototype = { if (WebInspector.timelineManager.recording) { WebInspector.timelineManager.stopRecording(); - if (this._recordScreenshots) + if (this._isCapturingScreenshots) WebInspector.timelineManager.clearScreenshotInterval(); } else { WebInspector.timelineManager.startRecording(); - if (this._recordScreenshots) + if (this._isCapturingScreenshots) WebInspector.timelineManager.setScreenshotInterval(); } }, diff --git a/Source/WebInspectorUI/UserInterface/RecordingsObserver.js b/Source/WebInspectorUI/UserInterface/RecordingsObserver.js deleted file mode 100644 index 71928d995cbe9..0000000000000 --- a/Source/WebInspectorUI/UserInterface/RecordingsObserver.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright (C) 2013, University of Washington. 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 THE COPYRIGHT HOLDERS AND 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 THE COPYRIGHT - * HOLDER 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.RecordingsObserver = function() -{ - WebInspector.Object.call(this); -}; - -WebInspector.RecordingsObserver.prototype = { - constructor: WebInspector.RecordingsObserver, - __proto__: WebInspector.Object.prototype, - - // Events defined by the "Recordings" domain (see WebCore/inspector/Inspector.json). - - recordingAdded: function(uid) - { - WebInspector.recordingsManager.addRecording(uid); - }, - - recordingRemoved: function(uid) - { - WebInspector.recordingsManager.removeRecording(uid); - } -}; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js index 924e51b6c3296..9b2226a19939e 100644 --- a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGrid.js @@ -28,14 +28,13 @@ WebInspector.TimelineDataGrid.call(this, columns); this.element.classList.add(WebInspector.ScreenshotTimelineDataGrid.ScreenshotDataGridStyleClassName); - - this._showingHighlight = false; } WebInspector.ScreenshotTimelineDataGrid.ScreenshotDataGridStyleClassName = "screenshot-data-grid"; WebInspector.ScreenshotTimelineDataGrid.prototype = { constructor: WebInspector.ScreenshotTimelineDataGrid, + __proto__: WebInspector.TimelineDataGrid.prototype, // Protected @@ -44,5 +43,3 @@ WebInspector.ScreenshotTimelineDataGrid.prototype = { return this.selectedNode.elementWithColumnIdentifier("image"); } } - -WebInspector.ScreenshotTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js index 260773ec11bf7..4af5f128492b5 100644 --- a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineDataGridNode.js @@ -36,12 +36,13 @@ WebInspector.Object.addConstructorFunctions(WebInspector.ScreenshotTimelineDataG WebInspector.ScreenshotTimelineDataGridNode.IconStyleClassName = "icon"; WebInspector.ScreenshotTimelineDataGridNode.SubtitleStyleClassName = "subtitle"; WebInspector.ScreenshotTimelineDataGridNode.EmptyImagePlaceholder = "Images/DocumentImage.png"; -WebInspector.ScreenshotTimelineDataGridNode.EmptyValuePlaceholderString = "\u2014"; +WebInspector.ScreenshotTimelineDataGridNode.EmptyStringPlaceholder = "\u2014"; WebInspector.ScreenshotTimelineDataGridNode.ScreenshotStyleClassName = "screenshot"; WebInspector.ScreenshotTimelineDataGridNode.EmptyScreenshotStyleClassName = "empty"; WebInspector.ScreenshotTimelineDataGridNode.prototype = { constructor: WebInspector.ScreenshotTimelineDataGridNode, + __proto__: WebInspector.DataGridNode.prototype, // Public @@ -57,7 +58,7 @@ WebInspector.ScreenshotTimelineDataGridNode.prototype = { createCellContent: function(columnIdentifier, cell) { - var emptyValuePlaceholderString = WebInspector.ScreenshotTimelineDataGridNode.EmptyValuePlaceholderString; + var emptyString = WebInspector.ScreenshotTimelineDataGridNode.EmptyStringPlaceholder; var value = this.data[columnIdentifier]; switch (columnIdentifier) { @@ -67,33 +68,32 @@ WebInspector.ScreenshotTimelineDataGridNode.prototype = { case "image": var source = value; var image = document.createElement("img"); - image.src = source; image.classList.add(WebInspector.ScreenshotTimelineDataGridNode.ScreenshotStyleClassName); if (!source) { image.src = WebInspector.ScreenshotTimelineDataGridNode.EmptyImagePlaceholder; image.classList.add(WebInspector.ScreenshotTimelineDataGridNode.EmptyScreenshotStyleClassName); + } else { + image.src = source; } return image; case "x": case "y": - return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%d").format(value); + return isNaN(value) ? emptyString : WebInspector.UIString("%d").format(value); case "width": case "height": - return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx").format(value); + return isNaN(value) ? emptyString : WebInspector.UIString("%fpx").format(value); case "area": - return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx²").format(value); + return isNaN(value) ? emptyString : WebInspector.UIString("%fpx²").format(value); case "startTime": - return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime); + return isNaN(value) ? emptyString : Number.secondsToString(value - this._baseStartTime); } return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier); } } - -WebInspector.ScreenshotTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype; diff --git a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js index b413d60081363..c254d9300d2ce 100644 --- a/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js +++ b/Source/WebInspectorUI/UserInterface/ScreenshotTimelineRecord.js @@ -1,3 +1,4 @@ + /* * Copyright (C) 2013 University of Washington. All rights reserved. * @@ -27,11 +28,11 @@ { WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Screenshot, startTime, startTime); - this._startTime = typeof startTime === "number" ? startTime : NaN; - this._x = typeof x === "number" ? x : NaN; - this._y = typeof y === "number" ? y : NaN; - this._width = typeof width === "number" ? width : NaN; - this._height = typeof height === "number" ? height : NaN; + this._startTime = startTime || NaN; + this._x = x || NaN; + this._y = y || NaN; + this._width = width || NaN; + this._height = height || NaN; this._image = image; };