refactor(docs-infra): remove IE11 code (#44570)

since IE11 is no longer a supported browser, remove angular.io code
implemented specifically for IE11 support

this change reverts the following PRs:
 - #26059 (slightly)
 - #28188 (fully)
 - #32871 (fully)
 - #41183 (partially)

PR Close #44570

aio/src/app/custom-elements/code/code-tabs.component.ts

@@ -59,16 +59,12 @@ export class CodeTabsComponent implements OnInit, AfterViewInit {
     const contentElem = this.content.nativeElement;
     const codeExamples = Array.from(contentElem.querySelectorAll('code-pane'));
 
+    // Remove DOM nodes that are no longer needed.
+    contentElem.textContent = '';
+
     for (const tabContent of codeExamples) {
       this.tabs.push(this.getTabInfo(tabContent));
     }
-
-    // Remove DOM nodes that are no longer needed.
-    //
-    // NOTE:
-    // In IE11, doing this also empties the `<code-pane>` nodes captured in `codeExamples` ¯\_(ツ)_/¯
-    // Only remove the unnecessary nodes after having captured the `<code-pane>` contents.
-    contentElem.textContent = '';
   }
 
   ngAfterViewInit() {

aio/src/app/layout/doc-viewer/doc-viewer.component.ts

@@ -103,10 +103,9 @@ export class DocViewerComponent implements OnDestroy {
       const toc = document.createElement('aio-toc');
       toc.className = 'embedded';
       titleEl.parentNode.insertBefore(toc, titleEl.nextSibling);
-    } else if (!needsToc && embeddedToc && embeddedToc.parentNode !== null) {
+    } else if (!needsToc && embeddedToc) {
       // Remove the embedded Toc if it's there and not needed.
-      // We cannot use ChildNode.remove() because of IE11
-      embeddedToc.parentNode.removeChild(embeddedToc);
+      embeddedToc.remove();
     }
 
     return () => {

aio/src/app/shared/custom-icon-registry.ts

@@ -13,7 +13,7 @@ import { unwrapHtmlForSink } from 'safevalues';
  * the following attributes:
  *
  * * `xmlns="http://www.w3.org/2000/svg"`
- * * `focusable="false"` (disable IE11 default behavior to make SVGs focusable)
+ * * `focusable="false"` (the default)
  * * `height="100%"` (the default)
  * * `width="100%"` (the default)
  * * `preserveAspectRatio="xMidYMid meet"` (the default)

aio/src/app/shared/toc.service.ts

@@ -67,10 +67,10 @@ export class TocService {
     div.innerHTML = unwrapHtmlForSink(fromInnerHTML(heading));
 
     // Remove any `.github-links` or `.header-link` elements (along with their content).
-    querySelectorAll(div, '.github-links, .header-link').forEach(removeNode);
+    div.querySelectorAll('.github-links, .header-link').forEach(link => link.remove());
 
     // Remove any remaining `a` elements (but keep their content).
-    querySelectorAll(div, 'a').forEach(anchorLink => {
+    div.querySelectorAll('a').forEach(anchorLink => {
       // We want to keep the content of this anchor, so move it into its parent.
       const parent = anchorLink.parentNode as Node;
       while (anchorLink.childNodes.length) {
@@ -78,7 +78,7 @@ export class TocService {
       }
 
       // Now, remove the anchor.
-      removeNode(anchorLink);
+      anchorLink.remove();
     });
 
     return {
@@ -90,11 +90,10 @@ export class TocService {
   }
 
   private findTocHeadings(docElement: Element): HTMLHeadingElement[] {
-    // const headings = querySelectorAll(docElement, 'h1,h2,h3');
-    const headings = querySelectorAll<HTMLHeadingElement>(docElement, 'h1,h2,h3');
+    const headings = docElement.querySelectorAll<HTMLHeadingElement>('h1,h2,h3');
     const skipNoTocHeadings = (heading: HTMLHeadingElement) => !/(?:no-toc|notoc)/i.test(heading.className);
 
-    return headings.filter(skipNoTocHeadings);
+    return Array.prototype.filter.call(headings, skipNoTocHeadings);
   }
 
   private resetScrollSpyInfo() {
@@ -128,27 +127,3 @@ export class TocService {
     }
   }
 }
-
-// Helpers
-function querySelectorAll<K extends keyof HTMLElementTagNameMap>(
-  parent: Element,
-  selector: K
-): HTMLElementTagNameMap[K][];
-function querySelectorAll<K extends keyof SVGElementTagNameMap>(
-  parent: Element,
-  selector: K
-): SVGElementTagNameMap[K][];
-function querySelectorAll<E extends Element = Element>(parent: Element, selector: string): E[];
-function querySelectorAll(parent: Element, selector: string) {
-  // Wrap the `NodeList` as a regular `Array` to have access to array methods.
-  // NOTE: IE11 does not even support some methods of `NodeList`, such as
-  //       [NodeList#forEach()](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach).
-  return Array.from(parent.querySelectorAll(selector));
-}
-
-function removeNode(node: Node): void {
-  if (node.parentNode !== null) {
-    // We cannot use `Node.remove()` because of IE11.
-    node.parentNode.removeChild(node);
-  }
-}

aio/src/styles/1-layouts/content-layout/_content-layout.scss

@@ -6,8 +6,6 @@
 }
 
 .sidenav-content {
-  display: block;  // This is required for browsers that do not recognize `<main>` as a block
-                   // element (such as IE11).
   min-height: 100vh;
   padding: 80px 3rem 2rem;
   max-width: 50em;

aio/src/styles/2-modules/code/_code.scss

@@ -101,8 +101,6 @@ aio-code {
       top: -7px;
       right: -19px;
       padding: 0;
-      overflow: visible; // This is required for the button to be displayed correctly in IE11.
-
       background-color: transparent;
       border: none;
       cursor: pointer;

aio/src/styles/2-modules/features/_features.scss

@@ -24,8 +24,6 @@
   .feature-row {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;  // This is required for browsers that do not support
-                                    // `space-evenly` (such as IE11).
     justify-content: space-evenly;
 
     @media (max-width: 1057px) {

aio/src/testing/dom-utils.ts

@@ -1,16 +0,0 @@
-/**
- * Create a `CustomEvent` (even on browsers where `CustomEvent` is not a constructor).
- */
-export function createCustomEvent(doc: Document, name: string, detail: any): CustomEvent {
-  const bubbles = false;
-  const cancelable = false;
-
-  // On IE11, `CustomEvent` is not a constructor.
-  if (typeof CustomEvent !== 'function') {
-    const event = doc.createEvent('CustomEvent');
-    event.initCustomEvent(name, bubbles, cancelable, detail);
-    return event;
-  }
-
-  return new CustomEvent(name, {bubbles, cancelable, detail});
-}