Update MDN docs

Author: Thibaut

assets/stylesheets/pages/_mdn.scss

@@ -30,6 +30,7 @@
   .notice,
   .warning,
   .overheadIndicator,
+  .blockIndicator,
   .syntaxbox,           // CSS, JavaScript
   .twopartsyntaxbox,    // CSS
   .inheritsbox,         // JavaScript
@@ -104,4 +105,28 @@
   .cleared { clear: both; } // CSS/box-shadow
 
   code > strong { font-weight: normal; }
+
+  // Compatibility tablees
+
+  .bc-github-link {
+    float: right;
+    font-size: .75rem;
+  }
+
+  .bc-supports-yes, .bc-supports-yes + dd, .bc-supports-yes + dd + dd { background: var(--noteGreenBackground); }
+  .bc-supports-partial, .bc-supports-partial + dd, .bc-supports-partial + dd + dd { background: var(--noteOrangeBackground); }
+  .bc-supports-no, .bc-supports-no + dd, .bc-supports-no + dd + dd { background: var(--noteRedBackground); }
+
+  .bc-table {
+    min-width: 100%;
+
+    dl {
+      margin: .25rem 0 0;
+      padding: .25rem 0 0;
+      font-size: .75rem;
+      border-top: 1px solid var(--boxBorder);
+    }
+
+    dd { margin: 0; }
+  }
 }

lib/docs/filters/css/entries.rb

@@ -6,13 +6,16 @@ class EntriesFilter < Docs::EntriesFilter
         'CSS_Background_and_Borders' => 'Backgrounds & Borders',
         'CSS_Columns' => 'Multi-column Layout',
         'CSS_Flexible_Box_Layout' => 'Flexible Box Layout',
+        'CSS_Fonts' => 'Fonts',
         'CSS_Grid_Layout' => 'Grid Layout',
         'CSS_Images' => 'Images',
         'CSS_Lists_and_Counters' => 'Lists',
         'CSS_Transforms' => 'Transforms',
         'Media_Queries' => 'Media Queries',
+        'filter-function' => 'Filter Effects',
         'transform-function' => 'Transforms',
         '@media' => 'Media Queries',
+        'overscroll' => 'Overscroll',
         'text-size-adjust' => 'Miscellaneous',
         'resolved_value' => 'Miscellaneous',
         'touch-action' => 'Miscellaneous',
@@ -42,7 +45,7 @@ def get_name
       end
 
       def get_type
-        if slug.include?('-webkit') || slug.include?('-moz')
+        if slug.include?('-webkit') || slug.include?('-moz') || slug.include?('-ms')
           'Extensions'
         elsif type = TYPE_BY_PATH[slug.split('/').first]
           type
@@ -66,26 +69,30 @@ def get_type
           'Pseudo-Elements'
         elsif name.start_with?(':')
           'Selectors'
+        elsif name.start_with?('display-')
+          'Display'
         else
           'Miscellaneous'
         end
       end
 
       STATUSES = {
-        'spec-Living' => 0,
-        'spec-REC'    => 1,
-        'spec-CR'     => 2,
-        'spec-PR'     => 3,
-        'spec-LC'     => 4,
-        'spec-WD'     => 5,
-        'spec-ED'     => 6
+        'spec-Living'   => 0,
+        'spec-REC'      => 1,
+        'spec-CR'       => 2,
+        'spec-PR'       => 3,
+        'spec-LC'       => 4,
+        'spec-WD'       => 5,
+        'spec-ED'       => 6,
+        'spec-Obsolete' => 7
       }
 
       PRIORITY_STATUSES = %w(spec-REC spec-CR)
       PRIORITY_SPECS = ['CSS Basic Box Model', 'CSS Lists and Counters', 'CSS Paged Media']
 
       def get_spec
         return unless table = at_css('#Specifications + table') || css('.standard-table').last
+
         specs = table.css('tbody tr').to_a
         # [link, span]
         specs.map!     { |node| [node.at_css('> td:nth-child(1) > a'), node.at_css('> td:nth-child(2) > span')] }
@@ -110,8 +117,8 @@ def get_spec
         'shape' => [
           %w(rect() Syntax) ],
         'timing-function' => [
-          %w(cubic-bezier() The_cubic-bezier()_class_of_timing-functions),
-          %w(steps() The_steps()_class_of_timing-functions),
+          %w(cubic-bezier()),
+          %w(steps()),
           %w(linear linear),
           %w(ease ease),
           %w(ease-in ease-in),

lib/docs/filters/dom/clean_html.rb

@@ -30,7 +30,7 @@ def other
         end
 
         # Remove <div> wrapping .overheadIndicator
-        css('div > .overheadIndicator:first-child:last-child').each do |node|
+        css('div > .overheadIndicator:first-child:last-child', 'div > .blockIndicator:first-child:last-child').each do |node|
           node.parent.replace(node)
         end
 

lib/docs/filters/dom/entries.rb

@@ -6,6 +6,7 @@ class EntriesFilter < Docs::EntriesFilter
         'EXT_'                => 'WebGL',
         'OES_'                => 'WebGL',
         'WEBGL_'              => 'WebGL',
+        'Sensor API'          => 'Sensors',
         'Ambient Light'       => 'Ambient Light',
         'Audio'               => 'Audio',
         'Battery Status'      => 'Battery Status',
@@ -22,10 +23,12 @@ class EntriesFilter < Docs::EntriesFilter
         'Encrypted Media Extensions' => 'Encrypted Media',
         'Fetch'               => 'Fetch',
         'File API'            => 'File',
+        'Fullscreen'          => 'Fullscreen',
         'Geolocation'         => 'Geolocation',
         'Geometry'            => 'Geometry',
         'High Resolution Time' => 'Performance',
         'Intersection'        => 'Intersection Observer',
+        'Keyboard'            => 'Keyboard',
         'Media Capabilities'  => 'Media',
         'Media Capture'       => 'Media',
         'Media Session'       => 'Media',
@@ -35,6 +38,7 @@ class EntriesFilter < Docs::EntriesFilter
         'MIDI'                => 'Audio',
         'Navigation Timing'   => 'Performance',
         'Network Information' => 'Network Information',
+        'Orientation Sensor'  => 'Sensors',
         'Payment'             => 'Payments',
         'Performance Timeline' => 'Performance',
         'Pointer Events'      => 'Pointer Events',
@@ -53,11 +57,13 @@ class EntriesFilter < Docs::EntriesFilter
         'Web App Manifest'    => 'Web App Manifest',
         'Budget'              => 'Budget',
         'Web Authentication'  => 'Authentication',
+        'Web Locks'           => 'Locks',
         'Web Workers'         => 'Web Workers',
         'WebGL'               => 'WebGL',
         'WebRTC'              => 'WebRTC',
         'WebUSB'              => 'WebUSB',
-        'WebVR'               => 'WebVR' }
+        'WebVR'               => 'WebVR',
+        'WebVTT'              => 'WebVTT' }
 
       TYPE_BY_NAME_STARTS_WITH = {
         'AbortController'     => 'Fetch',
@@ -89,10 +95,12 @@ class EntriesFilter < Docs::EntriesFilter
         'Fetch'               => 'Fetch',
         'File'                => 'File',
         'GlobalEventHandlers' => 'GlobalEventHandlers',
+        'HMDVR'               => 'WebVR',
         'history'             => 'History',
         'HTML Drag'           => 'Drag & Drop',
         'HTML'                => 'Elements',
         'IDB'                 => 'IndexedDB',
+        'Keyboard'            => 'Keyboard',
         'location'            => 'Location',
         'navigator'           => 'Navigator',
         'MediaKeySession'     => 'Encrypted Media',
@@ -122,6 +130,7 @@ class EntriesFilter < Docs::EntriesFilter
         'StyleSheet'          => 'CSS',
         'Stylesheet'          => 'CSS',
         'SVG'                 => 'SVG',
+        'TextTrack'           => 'WebVTT',
         'TimeRanges'          => 'Media',
         'timing'              => 'Performance',
         'Timing'              => 'Performance',
@@ -160,6 +169,7 @@ class EntriesFilter < Docs::EntriesFilter
         'timing'        => 'Performance',
         'Timing'        => 'Performance',
         'udio'          => 'Audio',
+        'VRDevice'      => 'WebVR',
         'WebGL'         => 'WebGL',
         'WEBGL'         => 'WebGL',
         'WebRTC'        => 'WebRTC',
@@ -239,7 +249,7 @@ def get_type
 
       def include_default_entry?
         return true if type == 'Console'
-        return true unless node = doc.at_css('.overheadIndicator')
+        return true unless node = doc.at_css('.overheadIndicator, .blockIndicator')
         node = node.parent while node.parent != doc
         return true if node.previous_element.try(:name).in?(%w(h2 h3))
         content = node.content

lib/docs/filters/html/entries.rb

@@ -28,7 +28,7 @@ def get_type
 
       def include_default_entry?
         return false if %w(Element/Heading_Elements).include?(slug)
-        (node = doc.at_css '.overheadIndicator').nil? || node.content.exclude?('not on a standards track')
+        (node = doc.at_css '.overheadIndicator, .blockIndicator').nil? || node.content.exclude?('not on a standards track')
       end
 
       def additional_entries

lib/docs/filters/javascript/clean_html.rb

@@ -11,12 +11,12 @@ def root
 
       def other
         # Remove "style" attribute
-        css('.inheritsbox', '.overheadIndicator').each do |node|
+        css('.inheritsbox', '.overheadIndicator', '.blockIndicator').each do |node|
           node.remove_attribute 'style'
         end
 
         # Remove <div> wrapping .overheadIndicator
-        css('div > .overheadIndicator:first-child:last-child').each do |node|
+        css('div > .overheadIndicator:first-child:last-child', 'div > .blockIndicator:first-child:last-child').each do |node|
           node.parent.replace(node)
         end
       end

lib/docs/filters/javascript/entries.rb

@@ -88,7 +88,7 @@ def additional_entries
       end
 
       def include_default_entry?
-        node = doc.at_css '.overheadIndicator, .warning'
+        node = doc.at_css '.blockIndicator, .warning'
 
         # Can't use :first-child because #doc is a DocumentFragment
         return true unless node && node.parent == doc && !node.previous_element

lib/docs/filters/mdn/clean_html.rb

@@ -14,6 +14,8 @@ class CleanHtmlFilter < Filter
         '#Quick_Links',
         'hr']
 
+      BROWSER_UNNECESSARY_CLASS_REGEX = /\s*bc-browser[\w_-]+/
+
       def call
         css(*REMOVE_NODES).remove
 
@@ -61,6 +63,94 @@ def call
           node.previous_element << node
         end
 
+        # New compatibility tables
+
+        css('.bc-data #Legend + dl', '.bc-data #Legend', '.bc-data #Legend_2 + dl', '.bc-data #Legend_2', '.bc-browser-name').remove
+
+        css('abbr.only-icon[title="Full support"]',
+            'abbr.only-icon[title="Partial support"]',
+            'abbr.only-icon[title="No support"]',
+            'abbr.only-icon[title="See implementation notes"]').remove
+
+        css('.bc-data .ic-altname', '.bc-data .ic-deprecated', '.bc-data .ic-non-standard', '.bc-data .ic-experimental').each do |node|
+          node.parent.remove
+        end
+
+        css('abbr.only-icon').each do |node|
+          node.replace(node.content)
+        end
+
+        css('.bc-table .bc-platforms td', '.bc-table .bc-browsers td').each do |node|
+          node.name = 'th'
+        end
+
+        css('.bc-data').each do |node|
+          link = node.at_css('.bc-github-link')
+          prev = node.previous_element
+          prev = prev.previous_element until prev.name == 'h2'
+          prev.add_child(link)
+
+          node.before(node.children).remove
+        end
+
+        css('.bc-table').each do |node|
+          desktop_table = node
+
+          mobile_table = node.dup
+          desktop_table.after(mobile_table)
+
+          if desktop_table.at_css('.bc-platform-server')
+            server_table = node.dup
+            mobile_table.after(server_table)
+          end
+
+          desktop_columns = desktop_table.at_css('th.bc-platform-desktop')['colspan'].to_i
+          mobile_columns = desktop_table.at_css('th.bc-platform-mobile')['colspan'].to_i
+
+          desktop_table.css('.bc-platform-mobile').remove
+          desktop_table.css('.bc-platform-server').remove
+          desktop_table.css('.bc-browsers th').to_a[(desktop_columns + 1)..-1].each(&:remove)
+          desktop_table.css('tr:not(.bc-platforms):not(.bc-browsers)').each do |line|
+            line.css('td').to_a[(desktop_columns)..-1].each(&:remove)
+          end
+
+          mobile_table.css('.bc-platform-desktop').remove
+          mobile_table.css('.bc-platform-server').remove
+          mobile_table.css('.bc-browsers th').to_a[1..(desktop_columns)].each(&:remove)
+          mobile_table.css('.bc-browsers th').to_a[(mobile_columns + 1)..-1].each(&:remove)
+          mobile_table.css('tr:not(.bc-platforms):not(.bc-browsers)').each do |line|
+            line.css('td').to_a[0..(desktop_columns - 1)].each(&:remove)
+            line.css('td').to_a[(mobile_columns)..-1].each(&:remove)
+          end
+
+          if server_table
+            server_table.css('.bc-platform-desktop').remove
+            server_table.css('.bc-platform-mobile').remove
+            server_table.css('.bc-browsers th').to_a[1..(desktop_columns + mobile_columns)].each(&:remove)
+            server_table.css('tr:not(.bc-platforms):not(.bc-browsers)').each do |line|
+              line.css('td').to_a[0..(desktop_columns + mobile_columns - 1)].each(&:remove)
+            end
+          end
+        end
+
+        # Reduce page size to make the offline bundle smaller.
+        css('.bc-supports-unknown').remove_attr('class')
+        css('td[class*="bc-platform"], th[class*="bc-platform"]').remove_attr('class')
+        css('td[class*="bc-browser"], th[class*="bc-browser"]').each do |node|
+          class_name = node['class']
+          class_name.remove!(BROWSER_UNNECESSARY_CLASS_REGEX)
+
+          if class_name.present?
+            node['class'] = class_name
+          else
+            node.remove_attribute('class')
+          end
+        end
+
+        css('abbr[title*="Compatibility unknown"]').each do |node|
+          node.before(node.children).remove
+        end
+
         doc
       end
     end