Changeset 142351 in webkit


Ignore:
Timestamp:
Feb 9, 2013 1:58:10 AM (11 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: show whitespace characters in DTE
https://bugs.webkit.org/show_bug.cgi?id=108947

Patch by Andrey Lushnikov <lushnikov@chromium.org> on 2013-02-09
Reviewed by Pavel Feldman.

Source/WebCore:

New test: inspector/editor/text-editor-show-whitespaces.html

Split consecutive whitespace characters into groups of 16, 8, 4, 2 and 1 and
add ::before pseudoclass for this groups which contains necessary
amount of "dots" (u+00b7). Add a setting "Show whitespace" for this
option in "Sources" section of "General" tab.

  • English.lproj/localizedStrings.js:
  • inspector/front-end/DefaultTextEditor.js:

(WebInspector.TextEditorMainPanel.prototype.wasShown):
(WebInspector.TextEditorMainPanel.prototype.willHide):
(WebInspector.TextEditorMainPanel.prototype._renderRanges):
(WebInspector.TextEditorMainPanel.prototype._renderWhitespaceCharsWithFixedSizeSpans):
(WebInspector.TextEditorMainPanel.prototype._paintLine):

  • inspector/front-end/Settings.js:
  • inspector/front-end/SettingsScreen.js:

(WebInspector.GenericSettingsTab):

  • inspector/front-end/inspectorSyntaxHighlight.css:

(.webkit-whitespace-1::before):
(.webkit-whitespace-2::before):
(.webkit-whitespace-4::before):
(.webkit-whitespace-8::before):
(.webkit-whitespace-16::before):
(.webkit-whitespace::before):

LayoutTests:

Add layout test to verify whitespace highlight functionality.

  • inspector/editor/text-editor-show-whitespace-expected.txt: Added.
  • inspector/editor/text-editor-show-whitespace.html: Added.
Location:
trunk
Files:
2 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r142349 r142351  
     12013-02-09  Andrey Lushnikov  <lushnikov@chromium.org>
     2
     3        Web Inspector: show whitespace characters in DTE
     4        https://bugs.webkit.org/show_bug.cgi?id=108947
     5
     6        Reviewed by Pavel Feldman.
     7
     8        Add layout test to verify whitespace highlight functionality.
     9
     10        * inspector/editor/text-editor-show-whitespace-expected.txt: Added.
     11        * inspector/editor/text-editor-show-whitespace.html: Added.
     12
    1132013-02-08  Eric Carlson  <eric.carlson@apple.com>
    214
  • trunk/Source/WebCore/ChangeLog

    r142349 r142351  
     12013-02-09  Andrey Lushnikov  <lushnikov@chromium.org>
     2
     3        Web Inspector: show whitespace characters in DTE
     4        https://bugs.webkit.org/show_bug.cgi?id=108947
     5
     6        Reviewed by Pavel Feldman.
     7
     8        New test: inspector/editor/text-editor-show-whitespaces.html
     9
     10        Split consecutive whitespace characters into groups of 16, 8, 4, 2 and 1 and
     11        add ::before pseudoclass for this groups which contains necessary
     12        amount of "dots" (u+00b7). Add a setting "Show whitespace" for this
     13        option in "Sources" section of "General" tab.
     14
     15        * English.lproj/localizedStrings.js:
     16        * inspector/front-end/DefaultTextEditor.js:
     17        (WebInspector.TextEditorMainPanel.prototype.wasShown):
     18        (WebInspector.TextEditorMainPanel.prototype.willHide):
     19        (WebInspector.TextEditorMainPanel.prototype._renderRanges):
     20        (WebInspector.TextEditorMainPanel.prototype._renderWhitespaceCharsWithFixedSizeSpans):
     21        (WebInspector.TextEditorMainPanel.prototype._paintLine):
     22        * inspector/front-end/Settings.js:
     23        * inspector/front-end/SettingsScreen.js:
     24        (WebInspector.GenericSettingsTab):
     25        * inspector/front-end/inspectorSyntaxHighlight.css:
     26        (.webkit-whitespace-1::before):
     27        (.webkit-whitespace-2::before):
     28        (.webkit-whitespace-4::before):
     29        (.webkit-whitespace-8::before):
     30        (.webkit-whitespace-16::before):
     31        (.webkit-whitespace::before):
     32
    1332013-02-08  Eric Carlson  <eric.carlson@apple.com>
    234
  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r142144 r142351  
    391391localizedStrings["Show times as percentages."] = "Show times as percentages.";
    392392localizedStrings["Show total and self times as percentages."] = "Show total and self times as percentages.";
     393localizedStrings["Show whitespace"] = "Show whitespace";
    393394localizedStrings["Size"] = "Size";
    394395localizedStrings["Snapshot %d"] = "Snapshot %d";
  • trunk/Source/WebCore/inspector/front-end/DefaultTextEditor.js

    r142167 r142351  
    13651365    this.element.addEventListener("cut", this._handleCut.bind(this), false);
    13661366
     1367    this._showWhitespace = WebInspector.settings.showWhitespaceInEditor.get();
     1368    this._handleShowWhitespaceInEditorChange = this._handleShowWhitespaceInEditorChange.bind(this);
     1369
    13671370    this._container.addEventListener("focus", this._handleFocused.bind(this), false);
    13681371
     
    13781381}
    13791382
     1383WebInspector.TextEditorMainPanel._ConsecutiveWhitespaceChars = {
     1384    1: " ",
     1385    2: "  ",
     1386    4: "    ",
     1387    8: "        ",
     1388    16: "                "
     1389};
     1390
    13801391WebInspector.TextEditorMainPanel.prototype = {
    13811392    _registerShortcuts: function()
     
    13981409        this._shortcuts[WebInspector.KeyboardShortcut.makeKey(keys.Tab.code)] = handleTabKey;
    13991410        this._shortcuts[WebInspector.KeyboardShortcut.makeKey(keys.Tab.code, modifiers.Shift)] = handleShiftTabKey;
     1411    },
     1412
     1413    _handleShowWhitespaceInEditorChange: function()
     1414    {
     1415        this._showWhitespace = WebInspector.settings.showWhitespaceInEditor.get();
     1416        var visibleFrom = this.scrollTop();
     1417        var visibleTo = visibleFrom + this.clientHeight();
     1418
     1419        if (!visibleTo)
     1420            return;
     1421
     1422        var result = this.findVisibleChunks(visibleFrom, visibleTo);
     1423        var startLine = this._textChunks[result.start].startLine;
     1424        var endLine = this._textChunks[result.end - 1].startLine + this._textChunks[result.end - 1].linesCount;
     1425        this._paintLines(startLine, endLine + 1);
    14001426    },
    14011427
     
    14751501    wasShown: function()
    14761502    {
     1503        WebInspector.settings.showWhitespaceInEditor.addChangeListener(this._handleShowWhitespaceInEditorChange);
     1504
    14771505        this._boundSelectionChangeListener = this._handleSelectionChange.bind(this);
    14781506        document.addEventListener("selectionchange", this._boundSelectionChangeListener, false);
     
    14841512    willHide: function()
    14851513    {
     1514        WebInspector.settings.showWhitespaceInEditor.removeChangeListener(this._handleShowWhitespaceInEditorChange);
     1515
    14861516        document.removeEventListener("selectionchange", this._boundSelectionChangeListener, false);
    14871517        delete this._boundSelectionChangeListener;
     
    19712001     * @param {string} line
    19722002     * @param {Array.<{startColumn: number, endColumn: number, token: ?string}>} ranges
    1973      */
    1974     _renderRanges: function(lineRow, line, ranges)
     2003     * @param {boolean=} splitWhitespaceSequences
     2004     */
     2005    _renderRanges: function(lineRow, line, ranges, splitWhitespaceSequences)
    19752006    {
    19762007        var decorationsElement = lineRow.decorationsElement;
     
    19942025            var rangeStart = ranges[i].startColumn;
    19952026            var rangeEnd = ranges[i].endColumn;
    1996             var cssClass = ranges[i].token ? "webkit-" + ranges[i].token : "";
    19972027
    19982028            if (plainTextStart < rangeStart) {
    19992029                this._insertTextNodeBefore(lineRow, decorationsElement, line.substring(plainTextStart, rangeStart));
    20002030            }
    2001             this._insertSpanBefore(lineRow, decorationsElement, line.substring(rangeStart, rangeEnd + 1), cssClass);
     2031
     2032            if (splitWhitespaceSequences && ranges[i].token === "whitespace")
     2033                this._renderWhitespaceCharsWithFixedSizeSpans(lineRow, decorationsElement, rangeEnd - rangeStart + 1);
     2034            else
     2035                this._insertSpanBefore(lineRow, decorationsElement, line.substring(rangeStart, rangeEnd + 1), ranges[i].token ? "webkit-" + ranges[i].token : "");
    20022036            plainTextStart = rangeEnd + 1;
    20032037        }
    20042038        if (plainTextStart < line.length) {
    20052039            this._insertTextNodeBefore(lineRow, decorationsElement, line.substring(plainTextStart, line.length));
     2040        }
     2041    },
     2042
     2043    /**
     2044     * @param {Element} lineRow
     2045     * @param {Element} decorationsElement
     2046     * @param {number} length
     2047     */
     2048    _renderWhitespaceCharsWithFixedSizeSpans: function(lineRow, decorationsElement, length)
     2049    {
     2050        for (var whitespaceLength = 16; whitespaceLength > 0; whitespaceLength >>= 1) {
     2051            var cssClass = "webkit-whitespace webkit-whitespace-" + whitespaceLength;
     2052            for (; length >= whitespaceLength; length -= whitespaceLength)
     2053                this._insertSpanBefore(lineRow, decorationsElement, WebInspector.TextEditorMainPanel._ConsecutiveWhitespaceChars[whitespaceLength], cssClass);
    20062054        }
    20072055    },
     
    20232071            var line = this._textModel.line(lineNumber);
    20242072            var ranges = syntaxHighlight.ranges;
    2025             this._renderRanges(lineRow, line, ranges);
     2073            this._renderRanges(lineRow, line, ranges, this._showWhitespace);
    20262074
    20272075            if (overlayHighlight)
  • trunk/Source/WebCore/inspector/front-end/Settings.js

    r142144 r142351  
    112112    this.showHeapSnapshotObjectsHiddenProperties = this.createSetting("showHeaSnapshotObjectsHiddenProperties", false);
    113113    this.showNativeSnapshotUninstrumentedSize = this.createSetting("showNativeSnapshotUninstrumentedSize", false);
     114    this.showWhitespaceInEditor = this.createSetting("showWhitespaceInEditor", false);
    114115    this.searchInContentScripts = this.createSetting("searchInContentScripts", false);
    115116    this.textEditorIndent = this.createSetting("textEditorIndent", "    ");
  • trunk/Source/WebCore/inspector/front-end/SettingsScreen.js

    r142144 r142351  
    308308    p = this._appendSection(WebInspector.UIString("Sources"));
    309309    p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Search in content scripts"), WebInspector.settings.searchInContentScripts));
     310    p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Show whitespace"), WebInspector.settings.showWhitespaceInEditor));
    310311    p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Enable source maps"), WebInspector.settings.sourceMapsEnabled));
    311312    if (WebInspector.experimentsSettings.isEnabled("sass"))
  • trunk/Source/WebCore/inspector/front-end/inspectorSyntaxHighlight.css

    r127864 r142351  
    7171}
    7272
     73.webkit-whitespace-1::before {
     74    content: "·";
     75}
     76
     77.webkit-whitespace-2::before {
     78    content: "··";
     79}
     80
     81.webkit-whitespace-4::before {
     82    content: "····";
     83}
     84
     85.webkit-whitespace-8::before {
     86    content: "········";
     87}
     88
     89.webkit-whitespace-16::before {
     90    content: "················";
     91}
     92
     93.webkit-whitespace::before {
     94    position: absolute;
     95    color: rgb(175, 175, 175);
     96}
     97
    7398.webkit-html-comment {
    7499    /* Keep this in sync with view-source.css (.webkit-html-comment) */
Note: See TracChangeset for help on using the changeset viewer.