Add class level comments to ComputedStyleBase.

third_party/WebKit/Source/build/scripts/templates/ComputedStyleBase.h.tmpl

 {% from 'macros.tmpl' import license, print_if %}
 {% from 'fields/field.tmpl' import encode, getter_expression, setter_expression, declare_storage, fieldwise_compare, fieldwise_copy, fieldwise_diff, fieldwise_pointer_compare_inherited %}
 {% from 'fields/group.tmpl' import define_field_group_class %}
 {{license()}}
 
 #ifndef ComputedStyleBase_h
 #define ComputedStyleBase_h
 
 #include "core/style/ComputedStyleConstants.h"
 #include "core/CoreExport.h"
@@ skipping 29 matching lines @@
   void* dataRefs[{{computed_style.subgroups|length}}];
   {% endif %}
   {% for field in computed_style.fields|rejectattr("is_bit_field") %}
   {{field.type_name}} {{field.name}};
   {% endfor %}
   unsigned m_bit_fields[{{computed_style.num_32_bit_words_for_bit_fields}}];
 };
 
 // The generated portion of ComputedStyle. For more info, see the header comment
 // in ComputedStyle.h.
-
-// ComputedStyleBase is a templated class to allow it to use functions
-// on ComputedStyle. This allows ComputedStyleBase to use hand written 
-// functions it would otherwise not know about.
-// It should only be templated with the ComputedStyle class and no other class
-// is allowed.
+//
+// ComputedStyleBase is a generated class that stores data members or 'fields'
+// used in ComputedStyle. These fields can represent CSS properties or internal
+// style information.
+//
+// STORAGE:
+//
+// Fields are organised in a tree structure, where a node (called a 'group')
+// stores a set of fields and a set of pointers to child nodes (called
+// 'subgroups'). We can visualise the tree structure with ComputedStyleBase as
+// the root node:
+//
+// ComputedStyleBase (fields: display, vertical-align, ...)
+//  |- StyleSurroundData (fields: padding, border, ...)
+//  |- StyleBoxData (fields: width, height, ...)
+//  |- ...
+//  |- StyleRareNonInheritedData (fields: box-shadow, text-overflow, ...)
+//      |- StyleFlexibleBoxData (fields: flex-direction, flex-wrap, ...)
+//      |- ...
+//
+// This design saves memory by allowing multiple ComputedStyleBases to share the
+// same instance of a subgroup. For example, if a page never uses flex box
+// properties, then every ComputedStyleBase can share the same instance of
+// StyleFlexibleBoxData. Without this sharing, we would need to allocate a copy
+// of all the flex box fields for every ComputedStyleBase. Similarly, when an
+// element inherits from its parent, its ComputedStyleBase can simply share all
+// of its subgroups with the parent's.
+//
+// INTERFACE:
+//
+// The functions generated for a field is determined by its 'template'. For
+// example, a field with the 'keyword' template has only one setter, whereas an
+// 'external' field has an extra setter that takes an rvalue reference. A list
+// of the available templates can be found in CSSProperties.json5.
+//
+// ComputedStyleBase is a template class to allow it to use functions on
+// ComputedStyle. This allows ComputedStyleBase to use hand written functions it
+// would otherwise not know about.  It should only be templated with the
+// ComputedStyle class and no other class is allowed.
 template <class ComputedStyleFinal>
 class CORE_EXPORT ComputedStyleBase {
  public:
   inline bool IndependentInheritedEqual(const ComputedStyleBase& o) const {
     return (
         {{fieldwise_compare(computed_style, computed_style.all_fields
             |selectattr("is_property")
             |selectattr("is_inherited")
             |selectattr("is_independent")
             |list
@@ skipping 130 matching lines @@
 
  private:
   {% for field in computed_style.fields %}
   {{declare_storage(field)}}
   {% endfor %}
 };
 
 } // namespace blink
 
 #endif // ComputedStyleBase_h