Start sending auxclick instead of click for non-primary buttons

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 1063 matching lines @@
         if (!measuring)
             this._titleElement = titleElement;
 
         if (this._closeable)
             tabElement.createChild("div", "tabbed-pane-close-button", "dt-close-button").gray = true;
 
         if (measuring) {
             tabElement.classList.add("measuring");
         } else {
             tabElement.addEventListener("click", this._tabClicked.bind(this), false);
+            tabElement.addEventListener("auxclick", this._tabClicked.bind(this), false);

[dgozman, 2016/08/03 20:54:28]

I took a closer look, and now I think that we can probably regress closing tabs
with middle click behavior for legacy frontends - it's not a very big deal. This
means we could avoid polyfill entirely.

On a side note though, how did you find all the places which have to be fixed?
I'm worried that it's easy to miss them.

[Navid Zolghadr, 2016/08/03 21:35:20]

Awesome. Then I will get rid of that polyfill.
Regarding whether I covered all the usecases or not previously I broke this
behavior and listed all the regressions it caused as blocking bugs for
http://crbug.com/255. Also I did some code search over button checks and
basically fixed them all here in this patch. I will continue monitoring if
anything comes up and will fix that. Note that this feature will remain behind
experimental flag for some time just to make sure everything is fine.

[dgozman, 2016/08/03 22:31:49]

Thanks for explanation.

             tabElement.addEventListener("mousedown", this._tabMouseDown.bind(this), false);
             tabElement.addEventListener("mouseup", this._tabMouseUp.bind(this), false);
 
             tabElement.addEventListener("contextmenu", this._tabContextMenu.bind(this), false);
             if (this._tabbedPane._allowTabReorder)
                 WebInspector.installDragHandle(tabElement, this._startTabDragging.bind(this), this._tabDragging.bind(this), this._endTabDragging.bind(this), "-webkit-grabbing", "pointer", 200);
         }
 
         return tabElement;
     },
 
     /**
      * @param {!Event} event
      */
     _tabClicked: function(event)
     {
         var middleButton = event.button === 1;

[dgozman, 2016/08/03 20:54:28]

Does the event.button work for auxclick? Will it continue to work for click?

[Navid Zolghadr, 2016/08/03 21:35:20]

Yes. It works for both. Basically they have the same interface (MouseEvent) with
different event name.

         var shouldClose = this._closeable && (middleButton || event.target.classList.contains("tabbed-pane-close-button"));
         if (!shouldClose) {
             this._tabbedPane.focus();
             return;
         }
         this._closeTabs([this.id]);
         event.consume(true);
     },
 
     /**
@@ skipping 311 matching lines @@
          * @this {WebInspector.ExtensibleTabbedPaneController}
          */
         function cacheView(object)
         {
             var view = /** @type {!WebInspector.Widget} */ (object);
             this._tabbedPane.changeTabView(id, view);
             return view;
         }
     }
 }