Changeset 147117 in webkit
- Timestamp:
- Mar 28, 2013 8:15:07 AM (11 years ago)
- Location:
- trunk
- Files:
-
- 8 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r147116 r147117 1 2013-03-28 Alexander Pavlov <apavlov@chromium.org> 2 3 Web Inspector: [Elements] Syntax-highlight the "Edit as HTML" editor 4 https://bugs.webkit.org/show_bug.cgi?id=113306 5 6 Reviewed by Vsevolod Vlasov. 7 8 * inspector/elements/edit-dom-actions.html: 9 1 10 2013-03-28 Christophe Dumez <ch.dumez@sisa.samsung.com> 2 11 -
trunk/LayoutTests/inspector/elements/edit-dom-actions.html
r131455 r147117 126 126 function step2() 127 127 { 128 InspectorTest.addResult(treeElement._ htmlEditElement.textContent);129 treeElement._ htmlEditElement.textContent = "<div foo=\"bar-comment\">Element</div>";128 InspectorTest.addResult(treeElement._editing.codeMirror.getValue()); 129 treeElement._editing.codeMirror.setValue("<div foo=\"bar-comment\">Element</div>"); 130 130 var event = InspectorTest.createKeyEvent("Enter"); 131 131 event.isMetaOrCtrlForTest = true; … … 148 148 function step2() 149 149 { 150 InspectorTest.addResult(treeElement._ htmlEditElement.textContent);151 treeElement._ htmlEditElement.textContent = "<span foo=\"bar\"><span id=\"inner-span\">Span contents</span></span>";150 InspectorTest.addResult(treeElement._editing.codeMirror.getValue()); 151 treeElement._editing.codeMirror.setValue("<span foo=\"bar\"><span id=\"inner-span\">Span contents</span></span>"); 152 152 var event = InspectorTest.createKeyEvent("Enter"); 153 153 event.isMetaOrCtrlForTest = true; … … 170 170 function step2() 171 171 { 172 InspectorTest.addResult(treeElement._htmlEditElement.textContent); 173 treeElement._htmlEditElement.textContent = treeElement._htmlEditElement.textContent.replace(/&/g, '#'); 172 var codeMirror = treeElement._editing.codeMirror; 173 InspectorTest.addResult(codeMirror.getValue()); 174 codeMirror.setValue(codeMirror.getValue().replace(/&/g, '#')); 174 175 var event = InspectorTest.createKeyEvent("Enter"); 175 176 event.isMetaOrCtrlForTest = true; -
trunk/Source/WebCore/ChangeLog
r147113 r147117 1 2013-03-28 Alexander Pavlov <apavlov@chromium.org> 2 3 Web Inspector: [Elements] Syntax-highlight the "Edit as HTML" editor 4 https://bugs.webkit.org/show_bug.cgi?id=113306 5 6 Reviewed by Vsevolod Vlasov. 7 8 Use CodeMirror as the raw HTML editor for the "Edit as HTML" menu item 9 (and all multiline editors for WebInspector.startEditing()). 10 Drive-by fix for handling the editing when the editor has been invoked on the closing tag. 11 12 * inspector/front-end/ElementsTreeOutline.js: 13 (WebInspector.ElementsTreeElement.prototype.commit): 14 (WebInspector.ElementsTreeElement.prototype._startEditingAsHTML): 15 * inspector/front-end/UIUtils.js: 16 (WebInspector.EditingConfig.prototype.setMultiline): 17 (WebInspector.startEditing): 18 (WebInspector.CodeMirrorCSSLoadView): A bogus view to load-unload CodeMirror-related CSS on demand. 19 * inspector/front-end/elementsPanel.css: 20 (#elements-content .CodeMirror): 21 (#elements-content .CodeMirror pre): 22 (#elements-content .CodeMirror-lines): 23 * inspector/front-end/elementsPanel.css: CodeMirror styles for the "Edit as HTML" editor. 24 * inspector/front-end/externs.js: Declare CodeMirror type with some members, as it is third-party code. 25 * inspector/front-end/inspector.html: Fix script order (UIUtils.js requires View.js). 26 1 27 2013-03-28 Hajime Morrita <morrita@google.com> 2 28 -
trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js
r146220 r147117 1481 1481 if (error) 1482 1482 return; 1483 if (this._ htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))1483 if (this._editing) 1484 1484 return; 1485 1485 … … 1492 1492 initialValue = this._convertWhitespaceToEntities(initialValue); 1493 1493 1494 this.select(true); 1495 1494 1496 this._htmlEditElement = document.createElement("div"); 1495 1497 this._htmlEditElement.className = "source-code elements-tree-editor"; 1496 this._htmlEditElement.textContent = initialValue;1497 1498 1498 1499 // Hide header items. … … 1511 1512 this.updateSelection(); 1512 1513 1513 function commit() 1514 { 1515 commitCallback(initialValue, this._htmlEditElement.textContent); 1514 /** 1515 * @param {Element} element 1516 * @param {string} newValue 1517 */ 1518 function commit(element, newValue) 1519 { 1520 commitCallback(initialValue, newValue); 1516 1521 dispose.call(this); 1517 1522 } … … 1539 1544 1540 1545 var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this)); 1541 config.setMultiline (true);1546 config.setMultilineOptions(initialValue, { name: "xml", htmlMode: true }, "web-inspector-html", true, true); 1542 1547 this._editing = WebInspector.startEditing(this._htmlEditElement, config); 1543 1548 }, -
trunk/Source/WebCore/inspector/front-end/UIUtils.js
r146326 r147117 220 220 }, 221 221 222 setMultiline: function(multiline) 223 { 224 this.multiline = multiline; 222 /** 223 * @param {string} initialValue 224 * @param {Object} mode 225 * @param {string} theme 226 * @param {boolean=} lineWrapping 227 * @param {boolean=} smartIndent 228 */ 229 setMultilineOptions: function(initialValue, mode, theme, lineWrapping, smartIndent) 230 { 231 this.multiline = true; 232 this.initialValue = initialValue; 233 this.mode = mode; 234 this.theme = theme; 235 this.lineWrapping = lineWrapping; 236 this.smartIndent = smartIndent; 225 237 }, 226 238 … … 429 441 var pasteCallback = config.pasteHandler; 430 442 var context = config.context; 431 var oldText = getContent(element); 443 var isMultiline = config.multiline || false; 444 var oldText = isMultiline ? config.initialValue : getContent(element); 432 445 var moveDirection = ""; 433 434 element.addStyleClass("editing"); 435 436 var oldTabIndex = element.getAttribute("tabIndex"); 437 if (typeof oldTabIndex !== "number" || oldTabIndex < 0) 438 element.tabIndex = 0; 439 440 function blurEventListener() { 441 editingCommitted.call(element); 446 var oldTabIndex; 447 var codeMirror; 448 var cssLoadView; 449 450 if (isMultiline) { 451 loadScript("CodeMirrorTextEditor.js"); 452 cssLoadView = new WebInspector.CodeMirrorCSSLoadView(); 453 cssLoadView.show(element); 454 WebInspector.setCurrentFocusElement(element); 455 codeMirror = window.CodeMirror(element, { 456 mode: config.mode, 457 lineWrapping: config.lineWrapping, 458 smartIndent: config.smartIndent, 459 autofocus: true, 460 theme: config.theme, 461 value: oldText 462 }); 463 } else { 464 element.addStyleClass("editing"); 465 466 oldTabIndex = element.getAttribute("tabIndex"); 467 if (typeof oldTabIndex !== "number" || oldTabIndex < 0) 468 element.tabIndex = 0; 469 WebInspector.setCurrentFocusElement(element); 470 } 471 472 /** 473 * @param {Event=} e 474 */ 475 function blurEventListener(e) { 476 if (!isMultiline || !e || !e.relatedTarget || !e.relatedTarget.isSelfOrDescendant(element)) 477 editingCommitted.call(element); 442 478 } 443 479 444 480 function getContent(element) { 481 if (isMultiline) 482 return codeMirror.getValue(); 483 445 484 if (element.tagName === "INPUT" && element.type === "text") 446 485 return element.value; 447 else 448 486 487 return element.textContent; 449 488 } 450 489 … … 453 492 { 454 493 WebInspector.markBeingEdited(element, false); 494 495 element.removeEventListener("blur", blurEventListener, isMultiline); 496 element.removeEventListener("keydown", keyDownEventListener, true); 497 if (pasteCallback) 498 element.removeEventListener("paste", pasteEventListener, true); 499 500 WebInspector.restoreFocusFromElement(element); 501 502 if (isMultiline) { 503 cssLoadView.detach(); 504 return; 505 } 455 506 456 507 this.removeStyleClass("editing"); … … 462 513 this.scrollTop = 0; 463 514 this.scrollLeft = 0; 464 465 element.removeEventListener("blur", blurEventListener, false);466 element.removeEventListener("keydown", keyDownEventListener, true);467 if (pasteCallback)468 element.removeEventListener("paste", pasteEventListener, true);469 470 WebInspector.restoreFocusFromElement(element);471 515 } 472 516 … … 474 518 function editingCancelled() 475 519 { 476 if (this.tagName === "INPUT" && this.type === "text") 477 this.value = oldText; 478 else 479 this.textContent = oldText; 520 if (isMultiline) 521 codeMirror.setValue(oldText); 522 else { 523 if (this.tagName === "INPUT" && this.type === "text") 524 this.value = oldText; 525 else 526 this.textContent = oldText; 527 } 480 528 481 529 cleanUpAfterEditing.call(this); … … 497 545 event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey : 498 546 event.ctrlKey && !event.shiftKey && !event.metaKey && !event.altKey; 499 if (isEnterKey(event) && (event.isMetaOrCtrlForTest || ! config.multiline || isMetaOrCtrl))547 if (isEnterKey(event) && (event.isMetaOrCtrlForTest || !isMultiline || isMetaOrCtrl)) 500 548 return "commit"; 501 549 else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B") 502 550 return "cancel"; 503 else if ( event.keyIdentifier === "U+0009") // Tab key551 else if (!isMultiline && event.keyIdentifier === "U+0009") // Tab key 504 552 return "move-" + (event.shiftKey ? "backward" : "forward"); 505 553 } … … 533 581 } 534 582 535 element.addEventListener("blur", blurEventListener, false);583 element.addEventListener("blur", blurEventListener, isMultiline); 536 584 element.addEventListener("keydown", keyDownEventListener, true); 537 585 if (pasteCallback) 538 586 element.addEventListener("paste", pasteEventListener, true); 539 587 540 WebInspector.setCurrentFocusElement(element);541 588 return { 542 589 cancel: editingCancelled.bind(element), 543 commit: editingCommitted.bind(element) 590 commit: editingCommitted.bind(element), 591 codeMirror: codeMirror // For testing. 544 592 }; 545 593 } … … 998 1046 } 999 1047 1048 /** 1049 * This bogus view is needed to load/unload CodeMirror-related CSS on demand. 1050 * 1051 * @constructor 1052 * @extends {WebInspector.View} 1053 */ 1054 WebInspector.CodeMirrorCSSLoadView = function() 1055 { 1056 WebInspector.View.call(this); 1057 this.element.addStyleClass("hidden"); 1058 this.registerRequiredCSS("cm/codemirror.css"); 1059 this.registerRequiredCSS("cm/cmdevtools.css"); 1060 } 1061 1062 WebInspector.CodeMirrorCSSLoadView.prototype = { 1063 __proto__: WebInspector.View.prototype 1064 } 1065 1000 1066 ;(function() { 1001 1067 -
trunk/Source/WebCore/inspector/front-end/elementsPanel.css
r145943 r147117 56 56 } 57 57 58 #elements-content .CodeMirror { 59 /* Consistent with the .editing class in inspector.css */ 60 -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px; 61 outline: 1px solid rgb(66%, 66%, 66%) !important; 62 background-color: white; 63 } 64 65 #elements-content .CodeMirror pre { 66 padding: 0; 67 } 68 69 #elements-content .CodeMirror-lines { 70 padding: 0; 71 } 72 58 73 .elements-tree-editor { 59 74 -webkit-user-select: text; -
trunk/Source/WebCore/inspector/front-end/externs.js
r147004 r147117 332 332 WebInspector.AceTextEditor = function(url, delegate) { } 333 333 334 /** @constructor */ 335 var CodeMirror = function() { } 336 CodeMirror.prototype.replaceSelection = function(str1, str2, str3) { } 337 /** @return {Element} */ 338 CodeMirror.prototype.getInputField = function() { } 339 CodeMirror.prototype.getCursor = function() { } 340 CodeMirror.prototype.setCursor = function(arg) { } 341 CodeMirror.prototype.getLine = function() { } 342 CodeMirror.prototype.getValue = function() { } 343 CodeMirror.prototype.setValue = function(arg) { } 344 CodeMirror.prototype.clearGutter = function(arg) { } 345 CodeMirror.prototype.setGutterMarker = function(arg1, arg2, arg3) { } 346 CodeMirror.prototype.clearHistory = function() { } 347 CodeMirror.prototype.markText = function(arg1, arg2, arg3) { } 348 334 349 WebInspector.suggestReload = function() { } 335 350 WebInspector.reload = function() { } -
trunk/Source/WebCore/inspector/front-end/inspector.html
r147105 r147117 42 42 <script type="text/javascript" src="inspector.js"></script> 43 43 <script type="text/javascript" src="UIString.js"></script> 44 <script type="text/javascript" src="UIUtils.js"></script>45 44 <script type="text/javascript" src="InspectorBackend.js"></script> 46 45 <script type="text/javascript" src="InspectorBackendCommands.js"></script> … … 50 49 <script type="text/javascript" src="Settings.js"></script> 51 50 <script type="text/javascript" src="View.js"></script> 51 <script type="text/javascript" src="UIUtils.js"></script> 52 52 <script type="text/javascript" src="HelpScreen.js"></script> 53 53 <script type="text/javascript" src="InspectorFrontendHostStub.js"></script>
Note: See TracChangeset
for help on using the changeset viewer.