src/vs/workbench/browser/parts/compositeBar.ts/CompositeBar/create
class CompositeBar:	create(parent: HTMLElement): HTMLElement {
		const actionBarDiv = parent.appendChild($('.composite-bar'));
		this.compositeSwitcherBar = this._register(new ActionBar(actionBarDiv, {
			actionViewItemProvider: action => {
				if (action instanceof CompositeOverflowActivityAction) {
					return this.compositeOverflowActionViewItem;
				}
				const item = this.model.findItem(action.id);
				return item && this.instantiationService.createInstance(
					CompositeActionViewItem,
					{ draggable: true, colors: this.options.colors, icon: this.options.icon, hoverOptions: this.options.activityHoverOptions },
					action as ActivityAction,
					item.pinnedAction,
					item.toggleBadgeAction,
					compositeId => this.options.getContextMenuActionsForComposite(compositeId),
					() => this.getContextMenuActions(),
					this.options.dndHandler,
					this
				);
			},
			orientation: this.options.orientation,
			ariaLabel: localize('activityBarAriaLabel', "Active View Switcher"),
			ariaRole: 'tablist',
			animated: false,
			preventLoopNavigation: this.options.preventLoopNavigation,
			triggerKeys: { keyDown: true }
		}));

		// Contextmenu for composites
		this._register(addDisposableListener(parent, EventType.CONTEXT_MENU, e => this.showContextMenu(e)));
		this._register(Gesture.addTarget(parent));
		this._register(addDisposableListener(parent, TouchEventType.Contextmenu, e => this.showContextMenu(e)));

		// Register a drop target on the whole bar to prevent forbidden feedback
		let insertDropBefore: Before2D | undefined = undefined;
		this._register(CompositeDragAndDropObserver.INSTANCE.registerTarget(parent, {
			onDragOver: (e: IDraggedCompositeData) => {

				// don't add feedback if this is over the composite bar actions or there are no actions
				const visibleItems = this.getVisibleComposites();
				if (!visibleItems.length || (e.eventData.target && isAncestor(e.eventData.target as HTMLElement, actionBarDiv))) {
					insertDropBefore = this.updateFromDragging(parent, false, false, true);
					return;
				}

				const insertAtFront = this.insertAtFront(actionBarDiv, e.eventData);
				const target = insertAtFront ? visibleItems[0] : visibleItems[visibleItems.length - 1];
				const validDropTarget = this.options.dndHandler.onDragOver(e.dragAndDropData, target.id, e.eventData);
				toggleDropEffect(e.eventData.dataTransfer, 'move', validDropTarget);
				insertDropBefore = this.updateFromDragging(parent, validDropTarget, insertAtFront, true);
			},
			onDragLeave: (e: IDraggedCompositeData) => {
				insertDropBefore = this.updateFromDragging(parent, false, false, false);
			},
			onDragEnd: (e: IDraggedCompositeData) => {
				insertDropBefore = this.updateFromDragging(parent, false, false, false);
			},
			onDrop: (e: IDraggedCompositeData) => {
				const visibleItems = this.getVisibleComposites();
				if (visibleItems.length) {
					const target = this.insertAtFront(actionBarDiv, e.eventData) ? visibleItems[0] : visibleItems[visibleItems.length - 1];
					this.options.dndHandler.drop(e.dragAndDropData, target.id, e.eventData, insertDropBefore);
				}
				insertDropBefore = this.updateFromDragging(parent, false, false, false);
			}
		}));

		return actionBarDiv;
	}