Changeset 246178 in webkit


Ignore:
Timestamp:
Jun 6, 2019 4:35:12 PM (5 years ago)
Author:
Devin Rousso
Message:

Web Inspector: Formatter: pretty-print CSS using a Worker
https://bugs.webkit.org/show_bug.cgi?id=197829
<rdar://problem/36891532>

Reviewed by Timothy Hatcher.

Source/WebInspectorUI:

  • UserInterface/Proxies/FormatterWorkerProxy.js:

(WI.FormatterWorkerProxy.prototype.formatCSS): Added.

  • UserInterface/Workers/Formatter/FormatterWorker.js:

(FormatterWorker.prototype.formatCSS): Added.

  • UserInterface/Workers/Formatter/CSSFormatter.js: Added.

(CSSFormatter):
(CSSFormatter.prototype.get success):
(CSSFormatter.prototype.get formattedText):
(CSSFormatter.prototype.get sourceMapData):
(CSSFormatter.prototype._format):

  • UserInterface/Workers/Formatter/FormatterContentBuilder.js:

(FormatterContentBuilder.prototype.get currentLine): Added.

  • UserInterface/Views/TextEditor.js:

(WI.TextEditor.prototype._canUseFormatterWorker):
(WI.TextEditor.prototype._startWorkerPrettyPrint):

  • .eslintrc:

LayoutTests:

  • inspector/formatting/formatting-css.html: Added.
  • inspector/formatting/formatting-css-expected.txt: Added.
  • inspector/formatting/resources/css-tests/basic-expected.css: Added.
  • inspector/formatting/resources/css-tests/basic.css: Added.
  • inspector/formatting/resources/css-tests/gradient-expected.css: Added.
  • inspector/formatting/resources/css-tests/gradient.css: Added.
  • inspector/formatting/resources/css-tests/keyframes-expected.css: Added.
  • inspector/formatting/resources/css-tests/keyframes.css: Added.
  • inspector/formatting/resources/css-tests/media-query-expected.css: Added.
  • inspector/formatting/resources/css-tests/media-query.css: Added.
  • inspector/formatting/resources/css-tests/selectors-expected.css: Added.
  • inspector/formatting/resources/css-tests/selectors.css: Added.
  • inspector/formatting/resources/css-tests/wrapping-expected.css: Added.
  • inspector/formatting/resources/css-tests/wrapping.css: Added.
  • inspector/formatting/resources/utilities.js:

(TestPage.registerInitializer.runFormattingTest):

Location:
trunk
Files:
16 added
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r246175 r246178  
     12019-06-06  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Formatter: pretty-print CSS using a Worker
     4        https://bugs.webkit.org/show_bug.cgi?id=197829
     5        <rdar://problem/36891532>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        * inspector/formatting/formatting-css.html: Added.
     10        * inspector/formatting/formatting-css-expected.txt: Added.
     11        * inspector/formatting/resources/css-tests/basic-expected.css: Added.
     12        * inspector/formatting/resources/css-tests/basic.css: Added.
     13        * inspector/formatting/resources/css-tests/gradient-expected.css: Added.
     14        * inspector/formatting/resources/css-tests/gradient.css: Added.
     15        * inspector/formatting/resources/css-tests/keyframes-expected.css: Added.
     16        * inspector/formatting/resources/css-tests/keyframes.css: Added.
     17        * inspector/formatting/resources/css-tests/media-query-expected.css: Added.
     18        * inspector/formatting/resources/css-tests/media-query.css: Added.
     19        * inspector/formatting/resources/css-tests/selectors-expected.css: Added.
     20        * inspector/formatting/resources/css-tests/selectors.css: Added.
     21        * inspector/formatting/resources/css-tests/wrapping-expected.css: Added.
     22        * inspector/formatting/resources/css-tests/wrapping.css: Added.
     23        * inspector/formatting/resources/utilities.js:
     24        (TestPage.registerInitializer.runFormattingTest):
     25
    1262019-06-06  Youenn Fablet  <youenn@apple.com>
    227
  • trunk/LayoutTests/inspector/formatting/resources/utilities.js

    r243953 r246178  
    1414            let {testText, expectedText} = results;
    1515            return new Promise(function(resolve, reject) {
     16                let workerProxy = WI.FormatterWorkerProxy.singleton();
    1617                const indentString = "    ";
    17                 let workerProxy = WI.FormatterWorkerProxy.singleton();
    18                 let isModule = /^module/.test(testName);
    19                 workerProxy.formatJavaScript(testText, isModule, indentString, ({formattedText, sourceMapData}) => {
     18
     19                function callback({formattedText, sourceMapData}) {
    2020                    let pass = formattedText === expectedText;
    2121                    InspectorTest.log(pass ? "PASS" : "FAIL");
     
    3737
    3838                    resolve(pass);
    39                 });
     39                }
     40
     41                switch (mode) {
     42                case "text/javascript": {
     43                    let isModule = /^module/.test(testName);
     44                    workerProxy.formatJavaScript(testText, isModule, indentString, callback);
     45                    break;
     46                }
     47
     48                case "text/css":
     49                    workerProxy.formatCSS(testText, indentString, callback);
     50                    break;
     51                }
    4052            });
    4153        });
  • trunk/Source/WebInspectorUI/.eslintrc

    r242743 r246178  
    9191
    9292        // Formatters
     93        "CSSFormatter": true,
    9394        "ESTreeWalker": true,
    9495        "EsprimaFormatter": true,
  • trunk/Source/WebInspectorUI/ChangeLog

    r246176 r246178  
     12019-06-06  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Formatter: pretty-print CSS using a Worker
     4        https://bugs.webkit.org/show_bug.cgi?id=197829
     5        <rdar://problem/36891532>
     6
     7        Reviewed by Timothy Hatcher.
     8
     9        * UserInterface/Proxies/FormatterWorkerProxy.js:
     10        (WI.FormatterWorkerProxy.prototype.formatCSS): Added.
     11        * UserInterface/Workers/Formatter/FormatterWorker.js:
     12        (FormatterWorker.prototype.formatCSS): Added.
     13        * UserInterface/Workers/Formatter/CSSFormatter.js: Added.
     14        (CSSFormatter):
     15        (CSSFormatter.prototype.get success):
     16        (CSSFormatter.prototype.get formattedText):
     17        (CSSFormatter.prototype.get sourceMapData):
     18        (CSSFormatter.prototype._format):
     19
     20        * UserInterface/Workers/Formatter/FormatterContentBuilder.js:
     21        (FormatterContentBuilder.prototype.get currentLine): Added.
     22
     23        * UserInterface/Views/TextEditor.js:
     24        (WI.TextEditor.prototype._canUseFormatterWorker):
     25        (WI.TextEditor.prototype._startWorkerPrettyPrint):
     26
     27        * .eslintrc:
     28
    1292019-06-06  Devin Rousso  <drousso@apple.com>
    230
  • trunk/Source/WebInspectorUI/UserInterface/Proxies/FormatterWorkerProxy.js

    r220119 r246178  
    5151    }
    5252
     53    formatCSS(sourceText, indentString, includeSourceMapData)
     54    {
     55        this.performAction("formatCSS", ...arguments);
     56    }
     57
    5358    // Public
    5459
  • trunk/Source/WebInspectorUI/UserInterface/Views/TextEditor.js

    r243826 r246178  
    897897    _canUseFormatterWorker()
    898898    {
    899         return this._codeMirror.getMode().name === "javascript";
     899        let mode = this._codeMirror.getMode().name;
     900        return mode === "javascript" || mode === "css";
    900901    }
    901902
     
    920921    _startWorkerPrettyPrint(beforePrettyPrintState, callback)
    921922    {
     923        let workerProxy = WI.FormatterWorkerProxy.singleton();
    922924        let sourceText = this._codeMirror.getValue();
    923925        let indentString = WI.indentString();
    924926        const includeSourceMapData = true;
    925927
    926         let sourceType = this._delegate ? this._delegate.textEditorScriptSourceType(this) : WI.Script.SourceType.Program;
    927         const isModule = sourceType === WI.Script.SourceType.Module;
    928 
    929         let workerProxy = WI.FormatterWorkerProxy.singleton();
    930         workerProxy.formatJavaScript(sourceText, isModule, indentString, includeSourceMapData, ({formattedText, sourceMapData}) => {
     928        let formatCallback = ({formattedText, sourceMapData}) => {
    931929            // Handle if formatting failed, which is possible for invalid programs.
    932930            if (formattedText === null) {
     
    935933            }
    936934            this._finishPrettyPrint(beforePrettyPrintState, formattedText, sourceMapData, callback);
    937         });
     935        };
     936
     937        let mode = this._codeMirror.getMode().name;
     938        if (mode === "javascript") {
     939            let sourceType = this._delegate ? this._delegate.textEditorScriptSourceType(this) : WI.Script.SourceType.Program;
     940            const isModule = sourceType === WI.Script.SourceType.Module;
     941            workerProxy.formatJavaScript(sourceText, isModule, indentString, includeSourceMapData, formatCallback);
     942        } else if (mode === "css")
     943            workerProxy.formatCSS(sourceText, indentString, includeSourceMapData, formatCallback);
    938944    }
    939945
  • trunk/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterContentBuilder.js

    r199168 r246178  
    7575    }
    7676
     77    get currentLine()
     78    {
     79        return this._formattedContent.slice(this._formattedContent.lastIndexOf("\n") + 1).join("");
     80    }
     81
    7782    setOriginalContent(originalContent)
    7883    {
  • trunk/Source/WebInspectorUI/UserInterface/Workers/Formatter/FormatterWorker.js

    r223308 r246178  
    3030    "ESTreeWalker.js",
    3131    "EsprimaFormatter.js",
     32    "CSSFormatter.js",
    3233]);
    3334
     
    8990    }
    9091
     92    formatCSS(sourceText, indentString, includeSourceMapData)
     93    {
     94        let result = {formattedText: null};
     95        let formatter = new CSSFormatter(sourceText, indentString);
     96        if (formatter.success) {
     97            result.formattedText = formatter.formattedText;
     98            if (includeSourceMapData)
     99                result.sourceMapData = formatter.sourceMapData;
     100        }
     101        return result;
     102    }
     103
    91104    // Private
    92105
Note: See TracChangeset for help on using the changeset viewer.