Live CSS: Fix properties from more distant ancestors overriding properties from nearer ancestors with the same specificity

src/calibre/gui2/tweak_book/live_css.py

@@ -5,6 +5,7 @@ from __future__ import absolute_import, division, print_function, unicode_litera
 __license__ = 'GPL v3'
 __copyright__ = '2014, Kovid Goyal <kovid at kovidgoyal.net>'
 
+import sys
 from PyQt5.Qt import (
     QWidget, QTimer, QStackedLayout, QLabel, QScrollArea, QVBoxLayout,
     QPainter, Qt, QPalette, QRect, QSize, QSizePolicy, pyqtSignal,
@@ -18,6 +19,9 @@ from css_selectors import parse, SelectorError
 from polyglot.builtins import unicode_type
 
 
+lowest_specificity = (-sys.maxsize, 0, 0, 0, 0, 0)
+
+
 class Heading(QWidget):  # {{{
 
     toggled = pyqtSignal(object)
@@ -280,7 +284,7 @@ class Box(QWidget):
         self.widgets = []
         for node in data['nodes']:
             node_name = node['name'] + ' @%s' % node['sourceline']
-            if node['is_ancestor']:
+            if node['ancestor_specificity'] != 0:
                 title = _('Inherited from %s') % node_name
             else:
                 title = _('Matched CSS rules for %s') % node_name
@@ -450,9 +454,8 @@ class LiveCSS(QWidget):
     def got_live_css_data(self, result):
         maximum_specificities = {}
         for node in result['nodes']:
-            is_ancestor = node['is_ancestor']
             for rule in node['css']:
-                self.process_rule(rule, is_ancestor, maximum_specificities)
+                self.process_rule(rule, node['ancestor_specificity'], maximum_specificities)
         for node in result['nodes']:
             for rule in node['css']:
                 for prop in rule['properties']:
@@ -486,7 +489,7 @@ class LiveCSS(QWidget):
         self.refresh_needed = False
         self.stack.setCurrentIndex(1)
 
-    def process_rule(self, rule, is_ancestor, maximum_specificities):
+    def process_rule(self, rule, ancestor_specificity, maximum_specificities):
         selector = rule['selector']
         sheet_index = rule['sheet_index']
         rule_address = rule['rule_address'] or ()
@@ -498,13 +501,12 @@ class LiveCSS(QWidget):
         else:  # style attribute
             specificity = [1, 0, 0, 0]
         specificity.extend((sheet_index, tuple(rule_address)))
-        ancestor_specificity = 0 if is_ancestor else 1
         properties = []
         for prop in rule['properties']:
             important = 1 if prop[-1] == 'important' else 0
             p = Property(prop, [ancestor_specificity] + [important] + specificity)
             properties.append(p)
-            if p.specificity > maximum_specificities.get(p.name, (0,0,0,0,0,0)):
+            if p.specificity > maximum_specificities.get(p.name, lowest_specificity):
                 maximum_specificities[p.name] = p.specificity
         rule['properties'] = properties
 

src/pyj/editor.pyj

@@ -147,19 +147,19 @@ def live_css(editor_name, sourceline, tags):
         target = node
         if i >= tags.length:
             break
-    is_ancestor = False
+    ancestor_specificity = 0
     while target and target.ownerDocument:
-        css = get_matched_css(target, is_ancestor, all_properties)
+        css = get_matched_css(target, ancestor_specificity is not 0, all_properties)
         # We want to show the Matched CSS rules header even if no rules matched
-        if css.length > 0 or not is_ancestor:
+        if css.length > 0 or ancestor_specificity is 0:
             tn = target.tagName.toLowerCase() if target.tagName else ''
             ans.nodes.push({
                 'name': tn,
-                'css': css, 'is_ancestor': is_ancestor,
+                'css': css, 'ancestor_specificity': -ancestor_specificity,
                 'sourceline': target.getAttribute('data-lnum')
             })
         target = target.parentNode
-        is_ancestor = True
+        ancestor_specificity += 1
     to_python.live_css_data(ans)
 
 

src/pyj/live_css.pyj

@@ -129,7 +129,7 @@ def get_color(property, val):
         try:
             color = window.parseCSSColor(val)  # Use the csscolor library to get an rgba 4-tuple
         except:
-            color = None
+            pass
     return color