DevTools: fix race when revealing formatted source code

third_party/WebKit/Source/devtools/front_end/sources/SourceFormatter.js

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Sources.SourceFormatData = class {
   /**
    * @param {!Workspace.UISourceCode} originalSourceCode
    * @param {!Workspace.UISourceCode} formattedSourceCode
    * @param {!Sources.FormatterSourceMapping} mapping
    */
@@ skipping 18 matching lines @@
 
 Sources.SourceFormatData._formatDataSymbol = Symbol('formatData');
 
 Sources.SourceFormatter = class {
   constructor() {
     this._projectId = 'formatter:';
     this._project = new Bindings.ContentProviderBasedProject(
         Workspace.workspace, this._projectId, Workspace.projectTypes.Formatter, 'formatter',
         true /* isServiceProject */);
 
-    /** @type {!Map<string, !Workspace.UISourceCode>} */
-    this._formattedPaths = new Map();
+    /** @type {!Map<!Workspace.UISourceCode, !{promise: !Promise<!Sources.SourceFormatData>, formatData: ?Sources.SourceFormatData}>} */
+    this._formattedSourceCodes = new Map();
     this._scriptMapping = new Sources.SourceFormatter.ScriptMapping();
     this._styleMapping = new Sources.SourceFormatter.StyleMapping();
     Workspace.workspace.addEventListener(
         Workspace.Workspace.Events.UISourceCodeRemoved, this._onUISourceCodeRemoved, this);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onUISourceCodeRemoved(event) {
     var uiSourceCode = /** @type {!Workspace.UISourceCode} */ (event.data);
-    var formattedUISourceCode = this._formattedPaths.get(uiSourceCode.project().id() + ':' + uiSourceCode.url());
-    if (formattedUISourceCode)
-      this.discardFormattedUISourceCode(formattedUISourceCode);
+    var cacheEntry = this._formattedSourceCodes.get(uiSourceCode);
+    if (cacheEntry && cacheEntry.formatData)
+      this._discardFormatData(cacheEntry.formatData);
+    this._formattedSourceCodes.remove(uiSourceCode);
   }
 
   /**
    * @param {!Workspace.UISourceCode} formattedUISourceCode
    * @return {?Workspace.UISourceCode}
    */
   discardFormattedUISourceCode(formattedUISourceCode) {
     var formatData = Sources.SourceFormatData._for(formattedUISourceCode);
     if (!formatData)
       return null;
-
-    delete formattedUISourceCode[Sources.SourceFormatData._formatDataSymbol];
-    this._scriptMapping._setSourceMappingEnabled(formatData, false);
-    this._styleMapping._setSourceMappingEnabled(formatData, false);
-    this._project.removeFile(formattedUISourceCode.url());
-    this._formattedPaths.remove(formatData.originalPath());
+    this._discardFormatData(formatData);
+    this._formattedSourceCodes.remove(formatData.originalSourceCode);
     return formatData.originalSourceCode;
   }
 
   /**
+   * @param {!Sources.SourceFormatData} formatData
+   */
+  _discardFormatData(formatData) {
+    delete formatData.formattedSourceCode[Sources.SourceFormatData._formatDataSymbol];
+    this._scriptMapping._setSourceMappingEnabled(formatData, false);
+    this._styleMapping._setSourceMappingEnabled(formatData, false);
+    this._project.removeFile(formatData.formattedSourceCode.url());
+  }
+
+  /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @return {boolean}
    */
   hasFormatted(uiSourceCode) {
-    return this._formattedPaths.has(uiSourceCode.project().id() + ':' + uiSourceCode.url());
+    return this._formattedSourceCodes.has(uiSourceCode);
   }
 
   /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @return {!Promise<!Sources.SourceFormatData>}
    */
   async format(uiSourceCode) {
-    var formattedUISourceCode = this._formattedPaths.get(uiSourceCode.project().id() + ':' + uiSourceCode.url());
-    if (formattedUISourceCode)
-      return Sources.SourceFormatData._for(formattedUISourceCode);
+    var cacheEntry = this._formattedSourceCodes.get(uiSourceCode);
+    if (cacheEntry)
+      return cacheEntry.promise;
 
-    var content = await uiSourceCode.requestContent();
     var fulfillFormatPromise;
     var resultPromise = new Promise(fulfill => {
       fulfillFormatPromise = fulfill;
     });
-    Sources.Formatter.format(
-        uiSourceCode.contentType(), uiSourceCode.mimeType(), content || '', innerCallback.bind(this));
+    this._formattedSourceCodes.set(uiSourceCode, {promise: resultPromise, formatData: null});
+    var content = await uiSourceCode.requestContent();
+    // ------------ ASYNC ------------
+    Sources.Formatter.format(uiSourceCode.contentType(), uiSourceCode.mimeType(), content || '', formatDone.bind(this));
     return resultPromise;
 
     /**
      * @this Sources.SourceFormatter
      * @param {string} formattedContent
      * @param {!Sources.FormatterSourceMapping} formatterMapping
      */
-    function innerCallback(formattedContent, formatterMapping) {
-      var formattedURL = uiSourceCode.url() + ':formatted';
+    function formatDone(formattedContent, formatterMapping) {
+      var cacheEntry = this._formattedSourceCodes.get(uiSourceCode);
+      if (!cacheEntry || cacheEntry.promise !== resultPromise)
+        return;
+      var formattedURL;
+      var count = 0;
+      var suffix = '';
+      do {
+        formattedURL = `${uiSourceCode.url()}:formatted${suffix}`;
+        suffix = `:${count++}`;
+      } while (this._project.uiSourceCodeForURL(formattedURL));
       var contentProvider =
           Common.StaticContentProvider.fromString(formattedURL, uiSourceCode.contentType(), formattedContent);
       var formattedUISourceCode =
           this._project.addContentProvider(formattedURL, contentProvider, uiSourceCode.mimeType());
       var formatData = new Sources.SourceFormatData(uiSourceCode, formattedUISourceCode, formatterMapping);
       formattedUISourceCode[Sources.SourceFormatData._formatDataSymbol] = formatData;
       this._scriptMapping._setSourceMappingEnabled(formatData, true);
       this._styleMapping._setSourceMappingEnabled(formatData, true);
-
-      var path = formatData.originalPath();
-      this._formattedPaths.set(path, formattedUISourceCode);
+      cacheEntry.formatData = formatData;
 
       for (var decoration of uiSourceCode.allDecorations()) {
         var range = decoration.range();
         var startLocation = formatterMapping.originalToFormatted(range.startLine, range.startColumn);
         var endLocation = formatterMapping.originalToFormatted(range.endLine, range.endColumn);
 
         formattedUISourceCode.addDecoration(
             new TextUtils.TextRange(startLocation[0], startLocation[1], endLocation[0], endLocation[1]),
             /** @type {string} */ (decoration.type()), decoration.data());
       }
@@ skipping 159 matching lines @@
       headers.forEach(header => header[Sources.SourceFormatData._formatDataSymbol] = formatData);
     } else {
       original[this._headersSymbol] = null;
       headers.forEach(header => delete header[Sources.SourceFormatData._formatDataSymbol]);
     }
     headers.forEach(header => Bindings.cssWorkspaceBinding.updateLocations(header));
   }
 };
 
 Sources.sourceFormatter = new Sources.SourceFormatter();