Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js

   1 /*
   2  * Copyright (C) 2013 Apple Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
  14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
  15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
  17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
  23  * THE POSSIBILITY OF SUCH DAMAGE.
  24  */
  25
  26 WebInspector.CodeMirrorTokenTrackingController = class CodeMirrorTokenTrackingController extends WebInspector.Object
  27 {
  28     constructor(codeMirror, delegate)
  29     {
  30         super();
  31
  32         console.assert(codeMirror);
  33
  34         this._codeMirror = codeMirror;
  35         this._delegate = delegate || null;
  36         this._mode = WebInspector.CodeMirrorTokenTrackingController.Mode.None;
  37
  38         this._mouseOverDelayDuration = 0;
  39         this._mouseOutReleaseDelayDuration = 0;
  40         this._classNameForHighlightedRange = null;
  41
  42         this._enabled = false;
  43         this._tracking = false;
  44         this._hoveredTokenInfo = null;
  45         this._hoveredMarker = null;
  46     }
  47
  48     // Public
  49
  50     get delegate()
  51     {
  52         return this._delegate;
  53     }
  54
  55     set delegate(x)
  56     {
  57         this._delegate = x;
  58     }
  59
  60     get enabled()
  61     {
  62         return this._enabled;
  63     }
  64
  65     set enabled(enabled)
  66     {
  67         if (this._enabled === enabled)
  68             return;
  69
  70         this._enabled = enabled;
  71
  72         var wrapper = this._codeMirror.getWrapperElement();
  73         if (enabled) {
  74             wrapper.addEventListener("mouseenter", this);
  75             wrapper.addEventListener("mouseleave", this);
  76             this._updateHoveredTokenInfo({left: WebInspector.mouseCoords.x, top: WebInspector.mouseCoords.y});
  77             this._startTracking();
  78         } else {
  79             wrapper.removeEventListener("mouseenter", this);
  80             wrapper.removeEventListener("mouseleave", this);
  81             this._stopTracking();
  82         }
  83     }
  84
  85     get mode()
  86     {
  87         return this._mode;
  88     }
  89
  90     set mode(mode)
  91     {
  92         var oldMode = this._mode;
  93
  94         this._mode = mode || WebInspector.CodeMirrorTokenTrackingController.Mode.None;
  95
  96         if (oldMode !== this._mode && this._tracking && this._hoveredTokenInfo)
  97             this._processNewHoveredToken();
  98     }
  99
 100     get mouseOverDelayDuration()
 101     {
 102         return this._mouseOverDelayDuration;
 103     }
 104
 105     set mouseOverDelayDuration(x)
 106     {
 107         console.assert(x >= 0);
 108         this._mouseOverDelayDuration = Math.max(x, 0);
 109     }
 110
 111     get mouseOutReleaseDelayDuration()
 112     {
 113         return this._mouseOutReleaseDelayDuration;
 114     }
 115
 116     set mouseOutReleaseDelayDuration(x)
 117     {
 118         console.assert(x >= 0);
 119         this._mouseOutReleaseDelayDuration = Math.max(x, 0);
 120     }
 121
 122     get classNameForHighlightedRange()
 123     {
 124         return this._classNameForHighlightedRange;
 125     }
 126
 127     set classNameForHighlightedRange(x)
 128     {
 129         this._classNameForHighlightedRange = x || null;
 130     }
 131
 132     get candidate()
 133     {
 134         return this._candidate;
 135     }
 136
 137     get hoveredMarker()
 138     {
 139         return this._hoveredMarker;
 140     }
 141
 142     set hoveredMarker(hoveredMarker)
 143     {
 144         this._hoveredMarker = hoveredMarker;
 145     }
 146
 147     highlightLastHoveredRange()
 148     {
 149         if (this._candidate)
 150             this.highlightRange(this._candidate.hoveredTokenRange);
 151     }
 152
 153     highlightRange(range)
 154     {
 155         // Nothing to do if we're trying to highlight the same range.
 156         if (this._codeMirrorMarkedText && this._codeMirrorMarkedText.className === this._classNameForHighlightedRange) {
 157             var highlightedRange = this._codeMirrorMarkedText.find();
 158             if (WebInspector.compareCodeMirrorPositions(highlightedRange.from, range.start) === 0 &&
 159                 WebInspector.compareCodeMirrorPositions(highlightedRange.to, range.end) === 0)
 160                 return;
 161         }
 162
 163         this.removeHighlightedRange();
 164
 165         var className = this._classNameForHighlightedRange || "";
 166         this._codeMirrorMarkedText = this._codeMirror.markText(range.start, range.end, {className});
 167
 168         window.addEventListener("mousemove", this, true);
 169     }
 170
 171     removeHighlightedRange()
 172     {
 173         if (!this._codeMirrorMarkedText)
 174             return;
 175
 176         this._codeMirrorMarkedText.clear();
 177         delete this._codeMirrorMarkedText;
 178
 179         window.removeEventListener("mousemove", this, true);
 180     }
 181
 182     // Private
 183
 184     _startTracking()
 185     {
 186         console.assert(!this._tracking);
 187         if (this._tracking)
 188             return;
 189
 190         this._tracking = true;
 191
 192         var wrapper = this._codeMirror.getWrapperElement();
 193         wrapper.addEventListener("mousemove", this, true);
 194         wrapper.addEventListener("mouseout", this, false);
 195         wrapper.addEventListener("mousedown", this, false);
 196         wrapper.addEventListener("mouseup", this, false);
 197         window.addEventListener("blur", this, true);
 198     }
 199
 200     _stopTracking()
 201     {
 202         console.assert(this._tracking);
 203         if (!this._tracking)
 204             return;
 205
 206         this._tracking = false;
 207         this._candidate = null;
 208
 209         var wrapper = this._codeMirror.getWrapperElement();
 210         wrapper.removeEventListener("mousemove", this, true);
 211         wrapper.removeEventListener("mouseout", this, false);
 212         wrapper.removeEventListener("mousedown", this, false);
 213         wrapper.removeEventListener("mouseup", this, false);
 214         window.removeEventListener("blur", this, true);
 215         window.removeEventListener("mousemove", this, true);
 216
 217         this._resetTrackingStates();
 218     }
 219
 220     handleEvent(event)
 221     {
 222         switch (event.type) {
 223         case "mouseenter":
 224             this._mouseEntered(event);
 225             break;
 226         case "mouseleave":
 227             this._mouseLeft(event);
 228             break;
 229         case "mousemove":
 230             if (event.currentTarget === window)
 231                 this._mouseMovedWithMarkedText(event);
 232             else
 233                 this._mouseMovedOverEditor(event);
 234             break;
 235         case "mouseout":
 236             // Only deal with a mouseout event that has the editor wrapper as the target.
 237             if (!event.currentTarget.contains(event.relatedTarget))
 238                 this._mouseMovedOutOfEditor(event);
 239             break;
 240         case "mousedown":
 241             this._mouseButtonWasPressedOverEditor(event);
 242             break;
 243         case "mouseup":
 244             this._mouseButtonWasReleasedOverEditor(event);
 245             break;
 246         case "blur":
 247             this._windowLostFocus(event);
 248             break;
 249         }
 250     }
 251
 252     _mouseEntered(event)
 253     {
 254         if (!this._tracking)
 255             this._startTracking();
 256     }
 257
 258     _mouseLeft(event)
 259     {
 260         this._stopTracking();
 261     }
 262
 263     _mouseMovedWithMarkedText(event)
 264     {
 265         var shouldRelease = !event.target.classList.contains(this._classNameForHighlightedRange);
 266         if (shouldRelease && this._delegate && typeof this._delegate.tokenTrackingControllerCanReleaseHighlightedRange === "function")
 267             shouldRelease = this._delegate.tokenTrackingControllerCanReleaseHighlightedRange(this, event.target);
 268
 269         if (shouldRelease) {
 270             if (!this._markedTextMouseoutTimer)
 271                 this._markedTextMouseoutTimer = setTimeout(this._markedTextIsNoLongerHovered.bind(this), this._mouseOutReleaseDelayDuration);
 272             return;
 273         }
 274
 275         clearTimeout(this._markedTextMouseoutTimer);
 276         delete this._markedTextMouseoutTimer;
 277     }
 278
 279     _markedTextIsNoLongerHovered()
 280     {
 281         if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeReleased === "function")
 282             this._delegate.tokenTrackingControllerHighlightedRangeReleased(this);
 283         delete this._markedTextMouseoutTimer;
 284     }
 285
 286     _mouseMovedOverEditor(event)
 287     {
 288         this._updateHoveredTokenInfo({left: event.pageX, top: event.pageY});
 289     }
 290
 291     _updateHoveredTokenInfo(mouseCoords)
 292     {
 293         // Get the position in the text and the token at that position.
 294         var position = this._codeMirror.coordsChar(mouseCoords);
 295         var token = this._codeMirror.getTokenAt(position);
 296
 297         if (!token || !token.type || !token.string) {
 298             if (this._hoveredMarker && this._delegate && typeof this._delegate.tokenTrackingControllerMouseOutOfHoveredMarker === "function") {
 299                 if (!this._codeMirror.findMarksAt(position).includes(this._hoveredMarker.codeMirrorTextMarker))
 300                     this._delegate.tokenTrackingControllerMouseOutOfHoveredMarker(this, this._hoveredMarker);
 301             }
 302
 303             this._resetTrackingStates();
 304             return;
 305         }
 306
 307         // Stop right here if we're hovering the same token as we were last time.
 308         if (this._hoveredTokenInfo &&
 309             this._hoveredTokenInfo.position.line === position.line &&
 310             this._hoveredTokenInfo.token.start === token.start &&
 311             this._hoveredTokenInfo.token.end === token.end)
 312             return;
 313
 314         // We have a new hovered token.
 315         var innerMode = CodeMirror.innerMode(this._codeMirror.getMode(), token.state);
 316         var codeMirrorModeName = innerMode.mode.alternateName || innerMode.mode.name;
 317         this._hoveredTokenInfo = {
 318             token,
 319             position,
 320             innerMode,
 321             modeName: codeMirrorModeName
 322         };
 323
 324         clearTimeout(this._tokenHoverTimer);
 325
 326         if (this._codeMirrorMarkedText || !this._mouseOverDelayDuration)
 327             this._processNewHoveredToken();
 328         else
 329             this._tokenHoverTimer = setTimeout(this._processNewHoveredToken.bind(this), this._mouseOverDelayDuration);
 330     }
 331
 332     _mouseMovedOutOfEditor(event)
 333     {
 334         clearTimeout(this._tokenHoverTimer);
 335         delete this._hoveredTokenInfo;
 336         delete this._selectionMayBeInProgress;
 337     }
 338
 339     _mouseButtonWasPressedOverEditor(event)
 340     {
 341         this._selectionMayBeInProgress = true;
 342     }
 343
 344     _mouseButtonWasReleasedOverEditor(event)
 345     {
 346         delete this._selectionMayBeInProgress;
 347         this._mouseMovedOverEditor(event);
 348
 349         if (this._codeMirrorMarkedText && this._hoveredTokenInfo) {
 350             var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
 351             var marks = this._codeMirror.findMarksAt(position);
 352             for (var i = 0; i < marks.length; ++i) {
 353                 if (marks[i] === this._codeMirrorMarkedText) {
 354                     if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeWasClicked === "function") {
 355                         // Trigger the clicked delegate asynchronously, letting the editor complete handling of the click.
 356                         setTimeout(function() { this._delegate.tokenTrackingControllerHighlightedRangeWasClicked(this); }.bind(this), 0);
 357                     }
 358                     break;
 359                 }
 360             }
 361         }
 362     }
 363
 364     _windowLostFocus(event)
 365     {
 366         this._resetTrackingStates();
 367     }
 368
 369     _processNewHoveredToken()
 370     {
 371         console.assert(this._hoveredTokenInfo);
 372
 373         if (this._selectionMayBeInProgress)
 374             return;
 375
 376         this._candidate = null;
 377
 378         switch (this._mode) {
 379         case WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens:
 380             this._candidate = this._processNonSymbolToken();
 381             break;
 382         case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression:
 383         case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptTypeInformation:
 384             this._candidate = this._processJavaScriptExpression();
 385             break;
 386         case WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens:
 387             this._candidate = this._processMarkedToken();
 388             break;
 389         }
 390
 391         if (!this._candidate)
 392             return;
 393
 394         clearTimeout(this._markedTextMouseoutTimer);
 395         delete this._markedTextMouseoutTimer;
 396
 397         if (this._delegate && typeof this._delegate.tokenTrackingControllerNewHighlightCandidate === "function")
 398             this._delegate.tokenTrackingControllerNewHighlightCandidate(this, this._candidate);
 399     }
 400
 401     _processNonSymbolToken()
 402     {
 403         // Ignore any symbol tokens.
 404         var type = this._hoveredTokenInfo.token.type;
 405         if (!type)
 406             return null;
 407
 408         var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
 409         var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
 410
 411         return {
 412             hoveredToken: this._hoveredTokenInfo.token,
 413             hoveredTokenRange: {start: startPosition, end: endPosition},
 414         };
 415     }
 416
 417     _processJavaScriptExpression()
 418     {
 419         // Only valid within JavaScript.
 420         if (this._hoveredTokenInfo.modeName !== "javascript")
 421             return null;
 422
 423         var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
 424         var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
 425
 426         function tokenIsInRange(token, range)
 427         {
 428             return token.line >= range.start.line && token.ch >= range.start.ch &&
 429                    token.line <= range.end.line && token.ch <= range.end.ch;
 430         }
 431
 432         // If the hovered token is within a selection, use the selection as our expression.
 433         if (this._codeMirror.somethingSelected()) {
 434             var selectionRange = {
 435                 start: this._codeMirror.getCursor("start"),
 436                 end: this._codeMirror.getCursor("end")
 437             };
 438
 439             if (tokenIsInRange(startPosition, selectionRange) || tokenIsInRange(endPosition, selectionRange)) {
 440                 return {
 441                     hoveredToken: this._hoveredTokenInfo.token,
 442                     hoveredTokenRange: selectionRange,
 443                     expression: this._codeMirror.getSelection(),
 444                     expressionRange: selectionRange,
 445                 };
 446             }
 447         }
 448
 449         // We only handle vars, definitions, properties, and the keyword 'this'.
 450         var type = this._hoveredTokenInfo.token.type;
 451         var isProperty = type.indexOf("property") !== -1;
 452         var isKeyword = type.indexOf("keyword") !== -1;
 453         if (!isProperty && !isKeyword && type.indexOf("variable") === -1 && type.indexOf("def") === -1)
 454             return null;
 455
 456         // Not object literal properties.
 457         var state = this._hoveredTokenInfo.innerMode.state;
 458         if (isProperty && state.lexical && state.lexical.type === "}")
 459             return null;
 460
 461         // Only the "this" keyword.
 462         if (isKeyword && this._hoveredTokenInfo.token.string !== "this")
 463             return null;
 464
 465         // Work out the full hovered expression.
 466         var expression = this._hoveredTokenInfo.token.string;
 467         var expressionStartPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
 468         while (true) {
 469             var token = this._codeMirror.getTokenAt(expressionStartPosition);
 470             if (!token)
 471                 break;
 472
 473             var isDot = !token.type && token.string === ".";
 474             var isExpression = token.type && token.type.includes("m-javascript");
 475             if (!isDot && !isExpression)
 476                 break;
 477
 478             // Disallow operators. We want the hovered expression to be just a single operand.
 479             // Also, some operators can modify values, such as pre-increment and assignment operators.
 480             if (isExpression && token.type.includes("operator"))
 481                 break;
 482
 483             expression = token.string + expression;
 484             expressionStartPosition.ch = token.start;
 485         }
 486
 487         // Return the candidate for this token and expression.
 488         return {
 489             hoveredToken: this._hoveredTokenInfo.token,
 490             hoveredTokenRange: {start: startPosition, end: endPosition},
 491             expression,
 492             expressionRange: {start: expressionStartPosition, end: endPosition},
 493         };
 494     }
 495
 496     _processMarkedToken()
 497     {
 498         return this._processNonSymbolToken();
 499     }
 500
 501     _resetTrackingStates()
 502     {
 503         clearTimeout(this._tokenHoverTimer);
 504         delete this._selectionMayBeInProgress;
 505         delete this._hoveredTokenInfo;
 506         this.removeHighlightedRange();
 507     }
 508 };
 509
 510 WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName = "jump-to-symbol-highlight";
 511
 512 WebInspector.CodeMirrorTokenTrackingController.Mode = {
 513     None: "none",
 514     NonSymbolTokens: "non-symbol-tokens",
 515     JavaScriptExpression: "javascript-expression",
 516     JavaScriptTypeInformation: "javascript-type-information",
 517     MarkedTokens: "marked-tokens"
 518 };